Skip to content

Instantly share code, notes, and snippets.

@danro
Created September 16, 2012 17:32
Show Gist options
  • Save danro/3733364 to your computer and use it in GitHub Desktop.
Save danro/3733364 to your computer and use it in GitHub Desktop.
Improved webkit inspector toolbar

Improved webkit inspector toolbar

screenshot

This stylesheet was created to give the inspector a little love, and help improve the usability of the toolbar. It still needs a bit of work (as the columns get cut off when scaled down too far), but it's really just a quick fix. Hopefully the team at Google will take note and make similar improvements of their own.

  • If you're unfamiliar with modifying the User Stylesheet in Chrome, read [Skin your Chrome Inspector] 1 by Darcy Clarke.
  • Essentially, if you copy the following Custom.css into your own Custom.css, you should see an updated toolbar.
  • Also included is the SCSS file that was used to generate the toolbar styles.

Location of Custom.css:

Mac: ~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets
PC: C:\Users\YourUsername\AppData\Local\Google\Chrome\User\Data\Default\User
Ubuntu (Chromium): ~/.config/chromium/Default/User StyleSheets
#-webkit-web-inspector #toolbar {
background: #cdcdcd !important;
height: 36px !important;
}
#-webkit-web-inspector #main {
top: 36px !important;
}
#-webkit-web-inspector .toolbar-item.elements:hover:after {
content: "elements";
z-index: 9999;
position: absolute;
display: inline;
padding: 0 5px;
margin-left: -12px;
background: rgba(255, 255, 255, 0.8);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
border-radius: 20px;
color: #555;
font-size: 12px;
pointer-events: none;
}
#-webkit-web-inspector .toolbar-item.elements:active:hover:after {
display: none;
}
#-webkit-web-inspector .toolbar-item.resources:hover:after {
content: "resources";
z-index: 9999;
position: absolute;
display: inline;
padding: 0 5px;
margin-left: -12px;
background: rgba(255, 255, 255, 0.8);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
border-radius: 20px;
color: #555;
font-size: 12px;
pointer-events: none;
}
#-webkit-web-inspector .toolbar-item.resources:active:hover:after {
display: none;
}
#-webkit-web-inspector .toolbar-item.network:hover:after {
content: "network";
z-index: 9999;
position: absolute;
display: inline;
padding: 0 5px;
margin-left: -12px;
background: rgba(255, 255, 255, 0.8);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
border-radius: 20px;
color: #555;
font-size: 12px;
pointer-events: none;
}
#-webkit-web-inspector .toolbar-item.network:active:hover:after {
display: none;
}
#-webkit-web-inspector .toolbar-item.scripts:hover:after {
content: "scripts";
z-index: 9999;
position: absolute;
display: inline;
padding: 0 5px;
margin-left: -12px;
background: rgba(255, 255, 255, 0.8);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
border-radius: 20px;
color: #555;
font-size: 12px;
pointer-events: none;
}
#-webkit-web-inspector .toolbar-item.scripts:active:hover:after {
display: none;
}
#-webkit-web-inspector .toolbar-item.timeline:hover:after {
content: "timeline";
z-index: 9999;
position: absolute;
display: inline;
padding: 0 5px;
margin-left: -12px;
background: rgba(255, 255, 255, 0.8);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
border-radius: 20px;
color: #555;
font-size: 12px;
pointer-events: none;
}
#-webkit-web-inspector .toolbar-item.timeline:active:hover:after {
display: none;
}
#-webkit-web-inspector .toolbar-item.profiles:hover:after {
content: "profiles";
z-index: 9999;
position: absolute;
display: inline;
padding: 0 5px;
margin-left: -12px;
background: rgba(255, 255, 255, 0.8);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
border-radius: 20px;
color: #555;
font-size: 12px;
pointer-events: none;
}
#-webkit-web-inspector .toolbar-item.profiles:active:hover:after {
display: none;
}
#-webkit-web-inspector .toolbar-item.audits:hover:after {
content: "audits";
z-index: 9999;
position: absolute;
display: inline;
padding: 0 5px;
margin-left: -12px;
background: rgba(255, 255, 255, 0.8);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
border-radius: 20px;
color: #555;
font-size: 12px;
pointer-events: none;
}
#-webkit-web-inspector .toolbar-item.audits:active:hover:after {
display: none;
}
#-webkit-web-inspector .toolbar-item.console:hover:after {
content: "console";
z-index: 9999;
position: absolute;
display: inline;
padding: 0 5px;
margin-left: -12px;
background: rgba(255, 255, 255, 0.8);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
border-radius: 20px;
color: #555;
font-size: 12px;
pointer-events: none;
}
#-webkit-web-inspector .toolbar-item.console:active:hover:after {
display: none;
}
#-webkit-web-inspector .toolbar-item .toolbar-icon {
-webkit-transform: scale(0.72) translateY(-4px);
}
#-webkit-web-inspector .toolbar-item .toolbar-label {
display: none !important;
}
#-webkit-web-inspector.inactive .toolbar-item:hover:after {
display: none;
}
#-webkit-web-inspector.inactive #toolbar {
background: #ececec !important;
}
#-webkit-web-inspector.compact .toolbar-item:hover:after {
display: inline;
}
#-webkit-web-inspector.compact .toolbar-icon {
-webkit-transform: translateY(1px);
margin: 0 5px;
}
#-webkit-web-inspector.compact #toolbar {
background: #cdcdcd !important;
}
#-webkit-web-inspector .toolbar-item.toggled-on:hover:after {
display: none;
}
// --------------------------------------------------
// toolbar vars
$toolbar-bg-active: #cdcdcd !important;
$toolbar-bg-inactive: #ececec !important;
$toolbar-height: 36px !important;
// --------------------------------------------------
// custom tooltips for toolbar buttons
@mixin tooltip ($text:'') {
&:hover:after {
content: $text;
z-index: 9999;
position: absolute;
display: inline;
padding: 0 5px;
margin-left: -12px;
background: rgba(255,255,255,.8);
box-shadow: 1px 1px 2px rgba(0,0,0,.2);
border-radius: 20px;
color: #555;
font-size: 12px;
pointer-events: none;
}
&:active:hover:after {
display: none;
}
}
@mixin show-tooltip {
&:hover:after { display: inline; }
}
@mixin hide-tooltip {
&:hover:after { display: none; }
}
// --------------------------------------------------
// chrome web inspector styles
#-webkit-web-inspector {
#toolbar {
background: $toolbar-bg-active;
height: $toolbar-height;
}
#main {
top: $toolbar-height;
}
// custom toolbar labels
.toolbar-item {
&.elements { @include tooltip('elements'); }
&.resources { @include tooltip('resources'); }
&.network { @include tooltip('network'); }
&.scripts { @include tooltip('scripts'); }
&.timeline { @include tooltip('timeline'); }
&.profiles { @include tooltip('profiles'); }
&.audits { @include tooltip('audits'); }
&.console { @include tooltip('console'); }
.toolbar-icon {
-webkit-transform: scale(0.72) translateY(-4px);
}
.toolbar-label {
display: none !important;
}
}
// --------------------------------------------------
// inactive (undocked, no mouse focus)
&.inactive {
.toolbar-item {
@include hide-tooltip;
}
#toolbar {
background: $toolbar-bg-inactive;
}
}
// --------------------------------------------------
// compact (docked)
&.compact {
.toolbar-item {
@include show-tooltip;
}
.toolbar-icon {
-webkit-transform: translateY(1px);
margin: 0 5px;
}
#toolbar {
background: $toolbar-bg-active;
}
}
// always disable on toggle
.toolbar-item.toggled-on {
@include hide-tooltip;
}
}
@i-arindam
Copy link

While this is an awesome start, I vouch for the ability to dock 2-3 tabs together. Like network-console maybe?

@tdm00
Copy link

tdm00 commented Sep 17, 2012

This is fantastic, just what I was looking for! I would like to point out however that the path on the Mac isn't correct, it should be:
~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css

@danro
Copy link
Author

danro commented Sep 17, 2012

@talltroym thanks, fixed.

@jakebellacera
Copy link

Crazy, I had no idea that you made this Dan! Good stuff.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment