Skip to content

GitLab

T
tangled
Commit 69dc5374 authored by pfeldman@chromium.org's avatar pfeldman@chromium.org
Browse files
Options

DevTools: [network] make timing colors consistent in popover and tab, remove... 

DevTools: [network] make timing colors consistent in popover and tab, remove box shadows and round borders.

R=eustas@chromium.org, vsevik@chromium.org

Review URL: https://codereview.chromium.org/474453002

git-svn-id: svn://svn.chromium.org/blink/trunk@180198 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent 41427a30
Hide whitespace changes
Inline Side-by-side
Showing with 46 additions and 94 deletions
third_party/WebKit/Source/devtools/front_end/inspectorCommon.css
View file @ 69dc5374
......@@ -180,38 +180,6 @@ iframe.view {
margin-right: -2px;
}
/* Network timing is shared between popover and network item view pane */
.network-timing-table td {
padding: 0;
}
.network-timing-table td.caution {
font-weight: bold;
color: rgb(255, 128, 0);
padding: 2px 0;
}
.network-timing-row {
position: relative;
height: 16px;
}
.network-timing-bar {
position: absolute;
background-color: red;
border-left: 1px solid red;
opacity: 0.4;
top: 0;
bottom: 0;
}
.network-timing-bar-title {
position: absolute;
color: #222;
top: 1px;
}
.highlighted-search-result {
border-radius: 1px;
padding: 1px;
......
third_party/WebKit/Source/devtools/front_end/networkLogView.css
View file @ 69dc5374
......@@ -289,7 +289,6 @@
position: absolute;
top: 0;
bottom: 0;
margin: auto -7px;
height: 13px;
line-height: 13px;
font-size: 90%;
......@@ -317,7 +316,7 @@
color: rgba(0, 0, 0, 0.7);
text-shadow: none;
text-align: right;
margin-right: 2px;
margin-right: -2px;
}
.network-graph-label.before::after {
......@@ -330,7 +329,7 @@
color: rgba(0, 0, 0, 0.7);
text-shadow: none;
text-align: left;
margin-left: 2px;
margin-left: -1px;
}
.network-graph-label.after::before {
......@@ -343,15 +342,12 @@
position: absolute;
top: 0;
bottom: 0;
margin: auto -7px;
margin: auto -1px;
height: 12px;
min-width: 14px;
min-width: 2px;
opacity: 0.65;
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%));
}
......@@ -365,9 +361,6 @@
.network-graph-bar.cached {
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-graph-bar.document {
......@@ -377,9 +370,6 @@
.network-graph-bar.cached.document {
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-graph-bar.stylesheet {
......@@ -389,9 +379,6 @@
.network-graph-bar.cached.stylesheet {
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-graph-bar.image {
......@@ -401,9 +388,6 @@
.network-graph-bar.cached.image {
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-graph-bar.media {
......@@ -413,9 +397,6 @@
.network-graph-bar.cached.media {
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-graph-bar.font {
......@@ -425,9 +406,6 @@
.network-graph-bar.cached.font {
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-graph-bar.texttrack {
......@@ -437,9 +415,6 @@
.network-graph-bar.cached.texttrack {
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-graph-bar.script {
......@@ -449,9 +424,6 @@
.network-graph-bar.cached.script {
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-graph-bar.xhr {
......@@ -461,9 +433,6 @@
.network-graph-bar.cached.xhr {
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-graph-bar.websocket {
......@@ -473,9 +442,6 @@
.network-graph-bar.cached.websocket {
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 {
......
third_party/WebKit/Source/devtools/front_end/networkPanel.css
View file @ 69dc5374
......@@ -84,8 +84,6 @@
left: 0;
bottom: 0;
margin: 6px;
font-weight: bold;
font-size: 11px;
color: rgb(30%, 30%, 30%);
}
......@@ -93,40 +91,60 @@
border-spacing: 21px 0;
}
.resource-timing-view .network-timing-bar {
opacity: 1;
/* Network timing is shared between popover and network item view pane */
.network-timing-table td {
padding: 2px 0;
}
.network-timing-table td.caution {
font-weight: bold;
color: rgb(255, 128, 0);
padding: 2px 0;
}
.network-timing-row {
position: relative;
height: 16px;
}
.network-timing-bar {
position: absolute;
min-width: 1px;
top: 0;
bottom: 0;
}
.network-timing-bar-title {
position: absolute;
color: #222;
top: 1px;
}
.resource-timing-view .network-timing-bar.blocking,
.resource-timing-view .network-timing-bar.proxy {
background-image: linear-gradient(to bottom, rgb(242, 242, 194), rgb(204, 204, 102));
border-left: 1px solid rgb(204, 204, 102);
.network-timing-bar.blocking,
.network-timing-bar.proxy {
background-color: rgb(205, 205, 205);
}
.resource-timing-view .network-timing-bar.dns {
background-image: linear-gradient(to bottom, rgb(194, 242, 194), rgb(102, 204, 102));
border-left: 1px solid rgb(102, 204, 102);
.network-timing-bar.dns {
background-color: rgb(31, 124, 131);
}
.resource-timing-view .network-timing-bar.connecting,
.resource-timing-view .network-timing-bar.ssl {
background-image: linear-gradient(to bottom, rgb(194, 242, 242), rgb(102, 204, 204));
border-left: 1px solid rgb(102, 204, 204);
.network-timing-bar.connecting,
.network-timing-bar.ssl {
background-color: rgb(229, 130, 38);
}
.resource-timing-view .network-timing-bar.sending {
background-image: linear-gradient(to bottom, rgb(194, 194, 242), rgb(102, 102, 204));
border-left: 1px solid rgb(102, 102, 204);
.network-timing-bar.sending {
background-color: rgb(95, 221, 95);
}
.resource-timing-view .network-timing-bar.waiting {
background-image: linear-gradient(to bottom, rgb(242, 194, 242), rgb(204, 102, 204));
border-left: 1px solid rgb(204, 102, 204);
.network-timing-bar.waiting {
background-color: rgb(95, 221, 95);
}
.resource-timing-view .network-timing-bar.receiving {
background-image: linear-gradient(to bottom, rgb(242, 194, 194), rgb(204, 102, 102));
border-left: 1px solid rgb(204, 102, 102);
.network-timing-bar.receiving {
background-color: rgb(65, 137, 215);
}
.resource-timing-view.visible {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment