- Revision
- 240506
- Author
- [email protected]
- Date
- 2019-01-25 14:05:09 -0800 (Fri, 25 Jan 2019)
Log Message
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):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (240505 => 240506)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-01-25 21:56:20 UTC (rev 240505)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-01-25 22:05:09 UTC (rev 240506)
@@ -1,5 +1,50 @@
2019-01-25 Devin Rousso <[email protected]>
+ 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 <[email protected]>
+
Web Inspector: Audit: remove experimental setting
https://bugs.webkit.org/show_bug.cgi?id=193743
<rdar://problem/28234022>
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css (240505 => 240506)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css 2019-01-25 21:56:20 UTC (rev 240505)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CPUTimelineOverviewGraph.css 2019-01-25 22:05:09 UTC (rev 240506)
@@ -35,6 +35,7 @@
.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%);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css (240505 => 240506)
--- trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css 2019-01-25 21:56:20 UTC (rev 240505)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/MemoryTimelineOverviewGraph.css 2019-01-25 22:05:09 UTC (rev 240506)
@@ -35,6 +35,7 @@
.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%);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.css (240505 => 240506)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.css 2019-01-25 21:56:20 UTC (rev 240505)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRecordBar.css 2019-01-25 22:05:09 UTC (rev 240506)
@@ -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 {
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css (240505 => 240506)
--- trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css 2019-01-25 21:56:20 UTC (rev 240505)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/TimelineRuler.css 2019-01-25 22:05:09 UTC (rev 240506)
@@ -26,7 +26,6 @@
.timeline-ruler {
position: relative;
pointer-events: none;
- z-index: 1;
--timeline-ruler-marker-translateX: -1px;
}
@@ -103,7 +102,7 @@
left: 0;
right: 0;
bottom: 0;
- z-index: 10;
+ z-index: var(--timeline-marker-z-index);
}
.timeline-ruler > .markers > .divider {
@@ -118,69 +117,84 @@
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;
+ border-right-width: var(--timeline-ruler-marker-border-width);
}
-/* Larger tooltip area */
-.timeline-ruler > .markers > .marker {
- z-index: 20;
- width: 3px;
-}
-
.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 @@
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 @@
}
.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 @@
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,
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css (240505 => 240506)
--- trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2019-01-25 21:56:20 UTC (rev 240505)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Variables.css 2019-01-25 22:05:09 UTC (rev 240506)
@@ -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%);
