Changeset 237432 in webkit

Timestamp:

Oct 25, 2018 4:09:59 PM (6 years ago)

Author:

Devin Rousso

Message:

Web Inspector: add corner rounding to the network timing "blocks"
​https://bugs.webkit.org/show_bug.cgi?id=190379

Reviewed by Timothy Hatcher.

• UserInterface/Views/NetworkTableContentView.css:

(.waterfall .block):
(body[dir=ltr] .waterfall .block): Added.
(body[dir=rtl] .waterfall .block): Added.
(.network-table .waterfall .block + .block): Added.
(.network-table .waterfall .block.filler + .block, .network-table .waterfall .block:not(.request, .response) + :matches(.request, .response)): Added.
(.network-table .waterfall .block:last-child): Added.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/NetworkTableContentView.css (modified) (1 diff)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2018-10-25  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: add corner rounding to the network timing "blocks"
+        https://bugs.webkit.org/show_bug.cgi?id=190379
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Views/NetworkTableContentView.css:
+        (.waterfall .block):
+        (body[dir=ltr] .waterfall .block): Added.
+        (body[dir=rtl] .waterfall .block): Added.
+        (.network-table .waterfall .block + .block): Added.
+        (.network-table .waterfall .block.filler + .block, .network-table .waterfall .block:not(.request, .response) + :matches(.request, .response)): Added.
+        (.network-table .waterfall .block:last-child): Added.
+
 2018-10-25  Devin Rousso  <drousso@apple.com>
 

trunk/Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css

@@ -207 +207 @@
     min-width: 2px;
     height: 4px;
+
+    --start-radius: 2px;
+    --end-radius: 2px;
+}
+
+body[dir=ltr] .waterfall .block {
+    border-top-left-radius: var(--start-radius);
+    border-top-right-radius: var(--end-radius);
+    border-bottom-left-radius: var(--start-radius);
+    border-bottom-right-radius: var(--end-radius);
+}
+
+body[dir=rtl] .waterfall .block {
+    border-top-left-radius: var(--end-radius);
+    border-top-right-radius: var(--start-radius);
+    border-bottom-left-radius: var(--end-radius);
+    border-bottom-right-radius: var(--start-radius);
+}
+
+.network-table .waterfall .block + .block {
+    --start-radius: 0;
+    --end-radius: 0;
+}
+
+.network-table .waterfall .block.filler + .block,
+.network-table .waterfall .block:not(.request, .response) + :matches(.request, .response) {
+    --start-radius: 2px;
+}
+
+.network-table .waterfall .block:last-child {
+    --end-radius: 2px;
 }