Skip to content

Instantly share code, notes, and snippets.

@davidl
Last active December 15, 2015 11:09
Show Gist options
  • Save davidl/5251362 to your computer and use it in GitHub Desktop.
Save davidl/5251362 to your computer and use it in GitHub Desktop.
Chrome DevTools Status Rappers - illustrate your Network panel
#-webkit-web-inspector .status-column {
overflow: visible !important;
}
#-webkit-web-inspector .status-column [title] {
overflow: visible !important;
position: relative !important;
}
#-webkit-web-inspector .status-column [title]::before {
border-color: transparent transparent #000 transparent !important;
border-style: solid !important;
border-width: 10px !important;
bottom: -10px !important;
height: 0 !important;
left: 10px !important;
width: 0 !important;
}
#-webkit-web-inspector .status-column [title]::after {
background: #000000 0 0 no-repeat scroll !important;
background-image: none !important;
background-size: contain !important;
bottom: -260px !important;
height: 250px !important;
left: 0 !important;
width: 325px !important;
}
#-webkit-web-inspector .status-column [title]::after,
#-webkit-web-inspector .status-column [title]::before {
content: ' ' !important;
opacity: 0 !important;
pointer-events: none !important;
position: absolute !important;
transition: all 0.5s ease-out !important;
z-index: 1 !important;
}
#-webkit-web-inspector .status-column [title]:hover::after,
#-webkit-web-inspector .status-column [title]:hover::before {
opacity: 1 !important;
}
#-webkit-web-inspector .status-column [title^="100 "]::after {
background-image: url(http://www.httpstatusrappers.com/images/100.png) !important;
}
#-webkit-web-inspector .status-column [title^="101 "]::after {
background-image: url(http://www.httpstatusrappers.com/images/101.png) !important;
}
#-webkit-web-inspector .status-column [title^="200 "]::after {
background-image: url(http://www.httpstatusrappers.com/images/200.png) !important;
}
#-webkit-web-inspector .status-column [title^="201 "]::after {
background-image: url(http://www.httpstatusrappers.com/images/201.png) !important;
}
#-webkit-web-inspector .status-column [title^="202 "]::after {
background-image: url(http://www.httpstatusrappers.com/images/202.png) !important;
}
#-webkit-web-inspector .status-column [title^="203 "]::after {
background-image: url(http://www.httpstatusrappers.com/images/203.png) !important;
}
#-webkit-web-inspector .status-column [title^="204 "]::after {
background-image: url(http://www.httpstatusrappers.com/images/204.png) !important;
}
#-webkit-web-inspector .status-column [title^="206 "]::after {
background-image: url(http://www.httpstatusrappers.com/images/206.png) !important;
}
#-webkit-web-inspector .status-column [title^="300 "]::after {
background-image: url(http://www.httpstatusrappers.com/images/300.png) !important;
}
#-webkit-web-inspector .status-column [title^="301 "]::after {
background-image: url(http://www.httpstatusrappers.com/images/301.png) !important;
}
#-webkit-web-inspector .status-column [title^="302 "]::after {
background-image: url(http://www.httpstatusrappers.com/images/302.png) !important;
}
#-webkit-web-inspector .status-column [title^="303 "]::after {
background-image: url(http://www.httpstatusrappers.com/images/303.png) !important;
}
#-webkit-web-inspector .status-column [title^="304 "]::after {
background-image: url(http://www.httpstatusrappers.com/images/304.png) !important;
}
#-webkit-web-inspector .status-column [title^="400 "]::after {
background-image: url(http://www.httpstatusrappers.com/images/400.png) !important;
}
#-webkit-web-inspector .status-column [title^="401 "]::after {
background-image: url(http://www.httpstatusrappers.com/images/401.png) !important;
}
#-webkit-web-inspector .status-column [title^="402 "]::after {
background-image: url(http://www.httpstatusrappers.com/images/402.png) !important;
}
#-webkit-web-inspector .status-column [title^="404 "]::after {
background-image: url(http://www.httpstatusrappers.com/images/404.png) !important;
}
#-webkit-web-inspector .status-column [title^="406 "]::after {
background-image: url(http://www.httpstatusrappers.com/images/406.png) !important;
}
#-webkit-web-inspector .status-column [title^="410 "]::after {
background-image: url(http://www.httpstatusrappers.com/images/410.png) !important;
}
#-webkit-web-inspector .status-column [title^="413 "]::after {
background-image: url(http://www.httpstatusrappers.com/images/413.png) !important;
}
#-webkit-web-inspector .status-column [title^="420 "]::after {
background-image: url(http://www.httpstatusrappers.com/images/420.png) !important;
}
#-webkit-web-inspector .status-column [title^="500 "]::after {
background-image: url(http://www.httpstatusrappers.com/images/500.png) !important;
}
#-webkit-web-inspector .status-column [title^="502 "]::after {
background-image: url(http://www.httpstatusrappers.com/images/502.png) !important;
}
#-webkit-web-inspector .status-column [title^="504 "]::after {
background-image: url(http://www.httpstatusrappers.com/images/504.png) !important;
}
#-webkit-web-inspector .status-column [title="Success"]::after,
#-webkit-web-inspector .status-column [title="Success"]::before,
#-webkit-web-inspector .status-column [title="(canceled)"]::after,
#-webkit-web-inspector .status-column [title="(canceled)"]::before,
#-webkit-web-inspector .status-column [title="(failed)"]::after,
#-webkit-web-inspector .status-column [title="(failed)"]::before,
#-webkit-web-inspector .status-column [title="(pending)"]::after,
#-webkit-web-inspector .status-column [title="(pending)"]::before,
#-webkit-web-inspector .status-column [title^="305 "]::after,
#-webkit-web-inspector .status-column [title^="305 "]::before,
#-webkit-web-inspector .status-column [title^="306 "]::after,
#-webkit-web-inspector .status-column [title^="306 "]::before,
#-webkit-web-inspector .status-column [title^="403 "]::after,
#-webkit-web-inspector .status-column [title^="403 "]::before,
#-webkit-web-inspector .status-column [title^="405 "]::after,
#-webkit-web-inspector .status-column [title^="405 "]::before,
#-webkit-web-inspector .status-column [title^="407 "]::after,
#-webkit-web-inspector .status-column [title^="407 "]::before,
#-webkit-web-inspector .status-column [title^="409 "]::after,
#-webkit-web-inspector .status-column [title^="409 "]::before,
#-webkit-web-inspector .status-column [title^="411 "]::after,
#-webkit-web-inspector .status-column [title^="411 "]::before,
#-webkit-web-inspector .status-column [title^="412 "]::after,
#-webkit-web-inspector .status-column [title^="412 "]::before,
#-webkit-web-inspector .status-column [title^="414 "]::after,
#-webkit-web-inspector .status-column [title^="414 "]::before,
#-webkit-web-inspector .status-column [title^="415 "]::after,
#-webkit-web-inspector .status-column [title^="415 "]::before,
#-webkit-web-inspector .status-column [title^="416 "]::after,
#-webkit-web-inspector .status-column [title^="416 "]::before,
#-webkit-web-inspector .status-column [title^="417 "]::after,
#-webkit-web-inspector .status-column [title^="417 "]::before,
#-webkit-web-inspector .status-column [title^="418 "]::after,
#-webkit-web-inspector .status-column [title^="418 "]::before,
#-webkit-web-inspector .status-column [title^="501 "]::after,
#-webkit-web-inspector .status-column [title^="501 "]::before,
#-webkit-web-inspector .status-column [title^="503 "]::after,
#-webkit-web-inspector .status-column [title^="503 "]::before,
#-webkit-web-inspector .status-column [title^="505 "]::after,
#-webkit-web-inspector .status-column [title^="505 "]::before {
display: none !important;
}
@davidl
Copy link
Author

davidl commented Mar 28, 2013

This looks much nicer now that Chrome 26 supports transitioning of generated pseudo-elements. Note that I had to allow the contents of the Status cells to overflow, so there can be some overlap with the Type cells.

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