Improved webkit inspector toolbar

readme.md

Improved webkit inspector toolbar

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

Custom.css

#-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;
}

Custom.scss

// --------------------------------------------------
// 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;
  }
}

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;
  }
}

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)

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

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

@talltroym thanks, fixed.

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