Attachment 360157 Details for Bug 193186 – Patch

[patch] Patch

bug-193186-20190125134815.patch (text/plain), 10.49 KB, created by Devin Rousso on 2019-01-25 13:48:16 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Devin Rousso

Created: 2019-01-25 13:48:16 PST

Size: 10.49 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index 868cb3d8c97fddd1e2f04f467d2247f587187bcb..a5cfda4a3fb65832a21abc790400e3421770511c 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,48 @@
>+2019-01-25  Devin Rousso  <drousso@apple.com>
>+
>+        Web Inspector: Timelines: DOMContentLoaded and load event lines need to be more obvious
>+        https://bugs.webkit.org/show_bug.cgi?id=193186
>+        <rdar://problem/45100694>
>+
>+        Reviewed by Joseph Pecoraro.
>+
>+        Shift around z-index values to make Timelines markers appear behind record bars. Widen the
>+        marker hit region to make it easier to see the tooltip.
>+
>+        * UserInterface/Views/Variables.css:
>+        (:root):
>+
>+        * UserInterface/Views/TimelineRuler.css:
>+        (.timeline-ruler):
>+        (.timeline-ruler > .markers):
>+        (.timeline-ruler > .markers > .marker):
>+        (body[dir=ltr] .timeline-ruler > .markers > .marker):
>+        (body[dir=rtl] .timeline-ruler > .markers > .marker):
>+        (.timeline-ruler > .markers > .marker::before):
>+        (body[dir=ltr] .timeline-ruler > .markers > .marker::before):
>+        (body[dir=rtl] .timeline-ruler > .markers > .marker::before):
>+        (.timeline-ruler > .markers > .marker::after): Added.
>+        (body[dir=ltr] .timeline-ruler > .markers > .marker::after): Added.
>+        (body[dir=rtl] .timeline-ruler > .markers > .marker::after): Added.
>+        (.timeline-ruler > .markers > .marker.current-time):
>+        (.timeline-ruler > .markers > .marker.current-time::after): Added.
>+        (.timeline-ruler > .markers > .marker.load-event):
>+        (.timeline-ruler > .markers > .marker.dom-content-event):
>+        (.timeline-ruler > .markers > .marker.timestamp):
>+        (.timeline-ruler > .selection-handle):
>+        (.timeline-ruler.both-handles-clamped > .selection-handle):
>+        (.timeline-ruler > .shaded-area):
>+        (.timeline-ruler > .markers > .marker.current-time::before): Deleted.
>+
>+        * UserInterface/Views/TimelineRecordBar.css:
>+        (.timeline-record-bar):
>+        (.timeline-record-bar > .segment):
>+
>+        * UserInterface/Views/CPUTimelineOverviewGraph.css:
>+        (.timeline-overview-graph.cpu > .legend):
>+        * UserInterface/Views/MemoryTimelineOverviewGraph.css:
>+        (.timeline-overview-graph.memory > .legend):
>+
> 2019-01-25  Devin Rousso  <drousso@apple.com>
> 
>         Web Inspector: REGRESSION (r237808): offscreen path warning doesn't work
>diff --git a/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css b/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css
>index aaeb296d2aa2b2ffa2edba3762bac044ae634dfd..6c2573c186288c4dfbc681f38f4a3d33bf29fb48 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css
>@@ -35,6 +35,7 @@ body .timeline-overview > .graphs-container > .timeline-overview-graph.cpu {
> .timeline-overview-graph.cpu > .legend {
>     position: absolute;
>     top: 0;
>+    z-index: var(--timeline-record-z-index);
>     padding: 2px;
>     font-size: 8px;
>     color: hsl(0, 0%, 50%);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css
>index 31af436536f8b1dcbe8fe7a9d86c4032b9ccdc26..c663bdd8217383612a003229d6a9ff9427991f77 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css
>@@ -35,6 +35,7 @@ body .timeline-overview > .graphs-container > .timeline-overview-graph.memory {
> .timeline-overview-graph.memory > .legend {
>     position: absolute;
>     top: 0;
>+    z-index: var(--timeline-record-z-index);
>     padding: 2px;
>     font-size: 8px;
>     color: hsl(0, 0%, 50%);
>diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.css b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.css
>index 7df5e227d2cc02f15085e68bb11ed5f2f49e9280..5e5d2ddd29d0f9d326471acbf3a2cc137c790c92 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.css
>@@ -26,7 +26,7 @@
> .timeline-record-bar {
>     position: absolute;
>     height: 12px;
>-    z-index: 1;
>+    z-index: var(--timeline-record-z-index);
> 
>     --timeline-record-bar-has-inactive-segment-not-inactive-segment-border-start: 1px solid hsla(215, 67%, 53%, 0.7) !important;
> }
>@@ -38,7 +38,7 @@
>     border: 1px solid hsl(0, 0%, 78%);
>     border-radius: 3px;
>     min-width: 4px;
>-    z-index: 1;
>+    z-index: var(--timeline-record-z-index);
> }
> 
> .timeline-record-bar.selected > .segment {
>diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css b/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css
>index da1277d89aa9b88869bb4f7a6c7b09cc38fb8258..78f75168e37245d77b6670f951532523c80c9570 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css
>@@ -26,7 +26,6 @@
> .timeline-ruler {
>     position: relative;
>     pointer-events: none;
>-    z-index: 1;
> 
>     --timeline-ruler-marker-translateX: -1px;
> }
>@@ -103,7 +102,7 @@ body[dir=rtl] .timeline-ruler > .header > .divider > .label {
>     left: 0;
>     right: 0;
>     bottom: 0;
>-    z-index: 10;
>+    z-index: var(--timeline-marker-z-index);
> }
> 
> .timeline-ruler > .markers > .divider {
>@@ -118,69 +117,84 @@ body[dir=rtl] .timeline-ruler > .header > .divider > .label {
>     position: absolute;
>     top: 0;
>     bottom: 0;
>+    width: 3px;
>+    color: hsla(0, 0%, 50%, 0.5);
>+    border: 0 solid currentColor;
>     pointer-events: all;
> 
>-    border: 0 solid hsla(0, 0%, 50%, 0.5);
>+    --timeline-ruler-marker-border-width: 1px;
> }
> 
> body[dir=ltr] .timeline-ruler > .markers > .marker {
>-    border-left-width: 1px;
>+    border-left-width: var(--timeline-ruler-marker-border-width);
> }
> 
> body[dir=rtl] .timeline-ruler > .markers > .marker {
>-    border-right-width: 1px;
>-}
>-
>-/* Larger tooltip area */
>-.timeline-ruler > .markers > .marker {
>-    z-index: 20;
>-    width: 3px;
>+    border-right-width: var(--timeline-ruler-marker-border-width);
> }
> 
> .timeline-ruler > .markers > .marker::before {
>-    width: 3px;
>-    content: "";
>+    width: var(--timeline-ruler-marker-before-size);
>     position: absolute;
>     top: 0;
>     bottom: 0;
>+    content: "";
> 
>-    --timeline-ruler-marker-before-offset-start: -3px;
>+    --timeline-ruler-marker-before-size: 6px;
>+    --timeline-ruler-marker-before-offset: calc(-1 * ((var(--timeline-ruler-marker-before-size) + var(--timeline-ruler-marker-border-width)) / 2));
> }
> 
> body[dir=ltr] .timeline-ruler > .markers > .marker::before {
>-    left: var(--timeline-ruler-marker-before-offset-start);
>+    left: var(--timeline-ruler-marker-before-offset);
> }
> 
> body[dir=rtl] .timeline-ruler > .markers > .marker::before {
>-    right: var(--timeline-ruler-marker-before-offset-start);
>+    right: var(--timeline-ruler-marker-before-offset);
>+}
>+
>+.timeline-ruler > .markers > .marker::after {
>+    position: absolute;
>+    top: calc(-1 * (var(--timeline-ruler-marker-after-size) - 1px) / 2);
>+    content: "";
>+    border-right: calc(var(--timeline-ruler-marker-after-size) / 2) solid transparent;
>+    border-left: calc(var(--timeline-ruler-marker-after-size) / 2) solid transparent;
>+    border-top: calc(var(--timeline-ruler-marker-after-size) / 2) solid currentColor;
>+
>+    --timeline-ruler-marker-after-size: 10px;
>+    --timeline-ruler-marker-after-offset: calc(-1 * ((var(--timeline-ruler-marker-after-size) + var(--timeline-ruler-marker-border-width)) / 2));
>+}
>+
>+body[dir=ltr] .timeline-ruler > .markers > .marker::after {
>+    left: var(--timeline-ruler-marker-after-offset);
>+}
>+
>+body[dir=rtl] .timeline-ruler > .markers > .marker::after {
>+    right: var(--timeline-ruler-marker-after-offset);
> }
> 
> .timeline-ruler > .markers > .marker.current-time {
>-    border-color: red;
>+    color: red;
> }
> 
>-.timeline-ruler > .markers > .marker.current-time::before {
>-    position: absolute;
>-    top: -5px;
>-    width: 9px;
>-    height: 9px;
>-    background-color: red;
>+.timeline-ruler > .markers > .marker.current-time::after {
>+    top: var(--timeline-ruler-marker-after-offset);
>+    width: var(--timeline-ruler-marker-after-size);
>+    height: var(--timeline-ruler-marker-after-size);
>+    background-color: currentColor;
>+    border: none;
>     border-radius: 5px;
>-    content: "";
>-
>-     --timeline-ruler-marker-before-offset-start: -5px;
> }
> 
> .timeline-ruler > .markers > .marker.load-event {
>-    border-color: hsla(0, 100%, 50%, 0.25);
>+    color: hsl(0, 100%, 50%);
> }
> 
> .timeline-ruler > .markers > .marker.dom-content-event {
>-    border-color: hsla(240, 100%, 50%, 0.25);
>+    color: hsl(240, 100%, 50%);
> }
> 
> .timeline-ruler > .markers > .marker.timestamp {
>-    border-color: hsla(119, 100%, 21%, 0.25);
>+    color: hsl(119, 100%, 21%);
> }
> 
> .timeline-ruler > .selection-drag {
>@@ -208,7 +222,7 @@ body[dir=rtl] .timeline-ruler > .markers > .marker::before {
>     border: 1px solid white;
>     cursor: col-resize;
>     pointer-events: all;
>-    z-index: 15;
>+    z-index: var(--timeline-selection-z-index);
> 
>     --timeline-ruler-selection-handle-translateX: -4px;
> }
>@@ -233,7 +247,7 @@ body[dir=rtl] .timeline-ruler > .markers > .marker::before {
> }
> 
> .timeline-ruler.both-handles-clamped > .selection-handle {
>-    z-index: 14;
>+    z-index: calc(var(--timeline-selection-z-index) - 1);
> }
> 
> .timeline-ruler > .selection-handle.clamped.hidden {
>@@ -255,7 +269,7 @@ body[dir=rtl] .timeline-ruler > .selection-handle.left {
>     top: 0;
>     bottom: 0;
>     background-color: hsla(0, 0%, 0%, 0.1);
>-    z-index: 15;
>+    z-index: var(--timeline-selection-z-index);
> }
> 
> body[dir=ltr] .timeline-ruler > .shaded-area.left,
>diff --git a/Source/WebInspectorUI/UserInterface/Views/Variables.css b/Source/WebInspectorUI/UserInterface/Views/Variables.css
>index ef4c55424939ee4d7c5d13e3b067fc36b384fb14..6312d996a4955978bc27e8b138773272bb7f361a 100644
>--- a/Source/WebInspectorUI/UserInterface/Views/Variables.css
>+++ b/Source/WebInspectorUI/UserInterface/Views/Variables.css
>@@ -105,6 +105,10 @@
> 
>     --syntax-highlight-regex-group-color: var(--text-color-gray-medium);
> 
>+    --timeline-marker-z-index: 4;
>+    --timeline-record-z-index: 8;
>+    --timeline-selection-z-index: 16;
>+
>     --memory-javascript-fill-color: hsl(269, 65%, 75%);
>     --memory-javascript-stroke-color: hsl(269, 33%, 50%);
>     --memory-images-fill-color: hsl(0, 65%, 75%);

Actions: View | Formatted Diff | Diff

Attachments on bug 193186: 358475 | 358476 | 358513 | 358521 | 358522 | 360157