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