Attachment 358521 Details for Bug 193186 – Patch

[patch] Patch

bug-193186-20190107142424.patch (text/plain), 7.08 KB, created by Devin Rousso on 2019-01-07 13:24:25 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Devin Rousso

Created: 2019-01-07 13:24:25 PST

Size: 7.08 KB

patch

obsolete

>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog
>index f05867e772b1e72f1f71f2d8dd7aa992a18c40c6..06753548fc9932ee021d83874bc65252324ad12d 100644
>--- a/Source/WebInspectorUI/ChangeLog
>+++ b/Source/WebInspectorUI/ChangeLog
>@@ -1,3 +1,37 @@
>+2019-01-07  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 NOBODY (OOPS!).
>+
>+        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/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 > .markers > .marker.current-time::before): Deleted.
>+
>+        * UserInterface/Views/TimelineRecordBar.css:
>+        (.timeline-record-bar):
>+        (.timeline-record-bar > .segment):
>+
> 2019-01-04  Joseph Pecoraro  <pecoraro@apple.com>
> 
>         Web Inspector: subclasses of WI.ClusterContentView don't save/restore content views after the initial view
>diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.css b/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.css
>index 7df5e227d2cc02f15085e68bb11ed5f2f49e9280..6443751f8f1776b2d2e1fc9b521da110c3e2e00d 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: 10;
> 
>     --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: 10;
> }
> 
> .timeline-record-bar.selected > .segment {
>diff --git a/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css b/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css
>index da1277d89aa9b88869bb4f7a6c7b09cc38fb8258..fa6633eac255b84a6dc054086f320d9f40c354a8 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: 5;
> }
> 
> .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: 5px;
>+    --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: 9px;
>+    --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 {

Actions: View | Formatted Diff | Diff

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