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;
}
}
@danro
Copy link
Author

danro commented Sep 17, 2012

And for the serious minimalists out there.. you can add this media query to hide the search box when it no longer fits within the bar. Happy hacking..

@media screen and (max-width: 640px) {
  #-webkit-web-inspector #toolbar-controls {
    display: none !important;
  }
}

@davidkna
Copy link

Path for windows was C:\Users\YourUsername\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custum.css for me (not C:\Users\YourUsername\AppData\Local\Google\Chrome\User\Data\Default\User\StyleSheetsCustom.css)

@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