diff options
Diffstat (limited to 'chromium/third_party/WebKit/Source/devtools/front_end/networkLogView.css')
-rw-r--r-- | chromium/third_party/WebKit/Source/devtools/front_end/networkLogView.css | 142 |
1 files changed, 99 insertions, 43 deletions
diff --git a/chromium/third_party/WebKit/Source/devtools/front_end/networkLogView.css b/chromium/third_party/WebKit/Source/devtools/front_end/networkLogView.css index c34afbc812f..d9f2784dd6e 100644 --- a/chromium/third_party/WebKit/Source/devtools/front_end/networkLogView.css +++ b/chromium/third_party/WebKit/Source/devtools/front_end/networkLogView.css @@ -49,12 +49,12 @@ } .network-log-grid.data-grid table.data { - background-size: 1px 82px; - background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.05)), to(rgba(0, 0, 0, 0.05))); + background-size: 128px 82px; + background-image: linear-gradient(to bottom, white, white 50%, #eee 50%, #eee); } .network-log-grid.data-grid.small table.data { - background-size: 1px 42px; + background-size: 128px 42px; } .network-log-grid.data-grid td { @@ -100,14 +100,6 @@ color: inherit; } -.network-log-grid.data-grid.small tr.offscreen { - height: 21px; -} - -.network-log-grid.data-grid tr.offscreen { - height: 41px; -} - .network-log-grid.data-grid tr.offscreen > td > div { display: none; } @@ -202,6 +194,21 @@ content: url(Images/resourceDocumentIconSmall.png); } +.network-log-grid.data-grid .network-type-media .icon { + content: url(Images/resourcePlainIcon.png); // FIXME: media icon +} + +.network-log-grid.data-grid.small .network-type-media .icon { + content: url(Images/resourcePlainIconSmall.png); // FIXME: media icon +} +.network-log-grid.data-grid .network-type-texttrack .icon { + content: url(Images/resourcePlainIcon.png); // FIXME: vtt icon +} + +.network-log-grid.data-grid.small .network-type-texttrack .icon { + content: url(Images/resourcePlainIconSmall.png); // FIXME: vtt icon +} + .network-log-grid.data-grid .network-type-image .icon { position: relative; background-image: url(Images/resourcePlainIcon.png); @@ -222,10 +229,6 @@ margin-right: 3px; } -.network-log-grid.data-grid th { - border-bottom: 1px solid rgb(205,205,205) !important; -} - .network-log-grid.data-grid.small .icon { width: 16px; height: 16px; @@ -292,12 +295,11 @@ z-index: 150; overflow: hidden; text-align: center; - opacity: 0; - -webkit-transition: opacity 250ms ease-in-out; + visibility: hidden; } .network-graph-side:hover .network-graph-label { - opacity: 1; + visibility: visible; } .network-graph-label:empty { @@ -343,11 +345,16 @@ top: 0; bottom: 0; margin: auto -7px; - border-width: 6px 7px; - height: 0; + height: 12px; min-width: 14px; opacity: 0.65; - -webkit-border-image: url(Images/timelinePillGray.png) 7 7 7 7; + border-width: 1px; + border-style: solid; + border-radius: 7px / 6px; + box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8); + + border-color: hsl(0, 0%, 65%); + background: linear-gradient(0deg, hsl(0, 0%, 73%), hsl(0, 0%, 78%)); } .network-graph-bar.waiting, @@ -359,63 +366,118 @@ .resource-cached .network-graph-bar { - -webkit-border-image: url(Images/timelineHollowPillGray.png) 7 7 7 7; + background: hsl(0, 0%, 90%); + box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8), + inset 0 0 0 2px hsl(0, 0%, 73%), + inset 0 1px 0 2px hsla(0, 0%, 76%, 0.85); } .network-type-document .network-graph-bar { - -webkit-border-image: url(Images/timelinePillBlue.png) 7 7 7 7; + border-color: hsl(215, 49%, 52%); + background: linear-gradient(0deg, hsl(215, 72%, 61%), hsl(215, 100%, 69%)); } .network-type-document.resource-cached .network-graph-bar { - -webkit-border-image: url(Images/timelineHollowPillBlue.png) 7 7 7 7; + background: hsl(215, 99%, 86%); + box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8), + inset 0 0 0 2px hsl(215, 71%, 61%), + inset 0 1px 0 2px hsla(215, 58%, 65%, 0.85); } .network-type-stylesheet .network-graph-bar { - -webkit-border-image: url(Images/timelinePillGreen.png) 7 7 7 7; + border-color: hsl(99, 34%, 52%); + background: linear-gradient(0deg, hsl(100, 50%, 61%), hsl(90, 50%, 64%)); } .network-type-stylesheet.resource-cached .network-graph-bar { - -webkit-border-image: url(Images/timelineHollowPillGreen.png) 7 7 7 7; + background: hsl(99, 100%, 86%); + box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8), + inset 0 0 0 2px hsl(99, 72%, 61%), + inset 0 1px 0 2px hsla(99, 59%, 65%, 0.85); } .network-type-image .network-graph-bar { - -webkit-border-image: url(Images/timelinePillPurple.png) 6 7 6 7; + border-color: hsl(272, 31%, 52%); + background: linear-gradient(0deg, hsl(272, 46%, 61%), hsl(272, 64%, 69%)); } .network-type-image.resource-cached .network-graph-bar { - border-image: url(Images/timelineHollowPillPurple.png) 7 7 7 7; + background: hsl(272, 65%, 86%); + box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8), + inset 0 0 0 2px hsl(272, 47%, 61%), + inset 0 1px 0 2px hsla(273, 38%, 65%, 0.85); +} + +.network-type-media .network-graph-bar { + border-color: hsl(272, 31%, 52%); + background: linear-gradient(0deg, hsl(272, 46%, 61%), hsl(272, 64%, 69%)); +} + +.network-type-media.resource-cached .network-graph-bar { + background: hsl(272, 65%, 86%); + box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8), + inset 0 0 0 2px hsl(272, 47%, 61%), + inset 0 1px 0 2px hsla(273, 38%, 65%, 0.85); } .network-type-font .network-graph-bar { - -webkit-border-image: url(Images/timelinePillRed.png) 7 7 7 7; + border-color: hsl(8, 49%, 52%); + background: linear-gradient(0deg, hsl(8, 72%, 61%), hsl(8, 100%, 69%)); } .network-type-font.resource-cached .network-graph-bar { - -webkit-border-image: url(Images/timelineHollowPillRed.png) 7 7 7 7; + background: hsl(8, 100%, 86%); + box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8), + inset 0 0 0 2px hsl(8, 72%, 61%), + inset 0 1px 0 2px hsla(8, 59%, 65%, 0.85); +} + +.network-type-texttrack .network-graph-bar { + border-color: hsl(8, 49%, 52%); + background: linear-gradient(0deg, hsl(8, 72%, 61%), hsl(8, 100%, 69%)); +} + +.network-type-texttrack.resource-cached .network-graph-bar { + background: hsl(8, 100%, 86%); + box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8), + inset 0 0 0 2px hsl(8, 72%, 61%), + inset 0 1px 0 2px hsla(8, 59%, 65%, 0.85); } .network-type-script .network-graph-bar { - -webkit-border-image: url(Images/timelinePillOrange.png) 7 7 7 7; + border-color: hsl(31, 49%, 52%); + background: linear-gradient(0deg, hsl(31, 72%, 61%), hsl(31, 100%, 69%)); } .network-type-script.resource-cached .network-graph-bar { - -webkit-border-image: url(Images/timelineHollowPillOrange.png) 7 7 7 7; + background: hsl(31, 100%, 86%); + box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8), + inset 0 0 0 2px hsl(31, 78%, 61%), + inset 0 1px 0 2px hsla(31, 64%, 65%, 0.85); } .network-type-xhr .network-graph-bar { - -webkit-border-image: url(Images/timelinePillYellow.png) 7 7 7 7; + border-color: hsl(53, 49%, 52%); + background: linear-gradient(0deg, hsl(53, 72%, 61%), hsl(53, 100%, 69%)); } .network-type-xhr.resource-cached .network-graph-bar { - -webkit-border-image: url(Images/timelineHollowPillYellow.png) 7 7 7 7; + background: hsl(53, 100%, 86%); + box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8), + inset 0 0 0 2px hsl(53, 72%, 61%), + inset 0 1px 0 2px hsla(54, 59%, 65%, 0.85); } .network-type-websocket .network-graph-bar { - -webkit-border-image: url(Images/timelinePillGray.png) 7 7 7 7; + border-color: hsl(0, 0%, 65%); + background: linear-gradient(0deg, hsl(0, 0%, 73%), hsl(0, 0%, 78%)); } .network-type-websocket.resource-cached .network-graph-bar { - -webkit-border-image: url(Images/timelineHollowPillGray.png) 7 7 7 7; + background: hsl(0, 0%, 90%); + box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8), + inset 0 0 0 2px hsl(0, 0%, 73%), + inset 0 1px 0 2px hsla(0, 0%, 76%, 0.85); } .network-dim-cell { @@ -504,16 +566,10 @@ /* Filters */ -.network-log-grid.data-grid table.data tr.revealed.network-item.filtered-out { +.network-log-grid.data-grid table.data tr.revealed.filtered-out { display: none; } -/* Summary */ - -.network-log-grid.data-grid tr.filler td { - padding-bottom: 20px !important; -} - #network-container { overflow-y: auto; overflow-x: hidden; |