Changeset 265125 in webkit

Timestamp:

Jul 30, 2020 6:44:55 PM (4 years ago)

Author:

Nikita Vasilyev

Message:

REGRESSION (r?): Web Inspector: Timelines: blue border below selected timeline when in edit mode
​https://bugs.webkit.org/show_bug.cgi?id=214979
<rdar://problem/66338399>

Reviewed by Devin Rousso.

Color the top border after the selected item with the same background as the selected item.
When editing, don't color that border with the selected item background.

• UserInterface/Views/TimelineOverview.css:

(.timeline-overview.edit-instruments > .tree-outline.timelines .item:not(:first-child),):
(body:matches(.window-inactive, .window-docked-inactive) .timeline-overview:not(.edit-instruments) > .tree-outline.timelines .item.selected + .item):
(body:not(.window-inactive, .window-docked-inactive) .timeline-overview:not(.edit-instruments) > .tree-outline.timelines:focus-within .item.selected + .item):
(@media (prefers-color-scheme: dark) .timeline-overview:not(.frames) > .graphs-container > .timeline-overview-graph:nth-child(even)):
(.timeline-overview > .tree-outline.timelines .item.selected + .item): Deleted.
(body:not(.window-inactive, .window-docked-inactive) .timeline-overview > .tree-outline.timelines:focus-within .item.selected + .item): Deleted.
(@media (prefers-color-scheme: dark) .timeline-overview.edit-instruments > .tree-outline.timelines .item:not(:first-child),): Deleted.
(@media (prefers-color-scheme: dark) .timeline-overview > .tree-outline.timelines .item.selected + .item): Deleted.

Location:

trunk/Source/WebInspectorUI

Files:

• ChangeLog (modified) (1 diff)
• UserInterface/Views/TimelineOverview.css (modified) (2 diffs)

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2020-07-30  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        REGRESSION (r?): Web Inspector: Timelines: blue border below selected timeline when in edit mode
+        https://bugs.webkit.org/show_bug.cgi?id=214979
+        <rdar://problem/66338399>
+
+        Reviewed by Devin Rousso.
+
+        Color the top border after the selected item with the same background as the selected item.
+        When editing, don't color that border with the selected item background.
+
+        * UserInterface/Views/TimelineOverview.css:
+        (.timeline-overview.edit-instruments > .tree-outline.timelines .item:not(:first-child),):
+        (body:matches(.window-inactive, .window-docked-inactive) .timeline-overview:not(.edit-instruments) > .tree-outline.timelines .item.selected + .item):
+        (body:not(.window-inactive, .window-docked-inactive) .timeline-overview:not(.edit-instruments) > .tree-outline.timelines:focus-within .item.selected + .item):
+        (@media (prefers-color-scheme: dark) .timeline-overview:not(.frames) > .graphs-container > .timeline-overview-graph:nth-child(even)):
+        (.timeline-overview > .tree-outline.timelines .item.selected + .item): Deleted.
+        (body:not(.window-inactive, .window-docked-inactive) .timeline-overview > .tree-outline.timelines:focus-within .item.selected + .item): Deleted.
+        (@media (prefers-color-scheme: dark) .timeline-overview.edit-instruments > .tree-outline.timelines .item:not(:first-child),): Deleted.
+        (@media (prefers-color-scheme: dark) .timeline-overview > .tree-outline.timelines .item.selected + .item): Deleted.
+
 2020-07-30  Devin Rousso  <drousso@apple.com>
 

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

@@ -114 +114 @@
 .timeline-overview.edit-instruments > .tree-outline.timelines .item:not(:first-child),
 .timeline-overview > .tree-outline.timelines .item:not(.selected):not(:first-child) {
-    border-top: 1px solid hsla(0, 0%, 0%, 0.09);
-}
-
-.timeline-overview > .tree-outline.timelines .item.selected + .item {
-    border-top-color: hsl(0, 0%, 83%);
-}
-
-body:not(.window-inactive, .window-docked-inactive) .timeline-overview > .tree-outline.timelines:focus-within .item.selected + .item {
-    border-top-color: hsl(209, 100%, 49%);
+    border-top-color: hsla(0, 0%, var(--foreground-lightness), 0.09);
+}
+
+body:matches(.window-inactive, .window-docked-inactive) .timeline-overview:not(.edit-instruments) > .tree-outline.timelines .item.selected + .item {
+    border-top-color: var(--selected-background-color-unfocused);
+}
+
+body:not(.window-inactive, .window-docked-inactive) .timeline-overview:not(.edit-instruments) > .tree-outline.timelines:focus-within .item.selected + .item {
+    border-top-color: var(--selected-background-color);
 }
 
@@ -239 +239 @@
         background: var(--background-color-alternate);
     }
-
-    .timeline-overview.edit-instruments > .tree-outline.timelines .item:not(:first-child),
-    .timeline-overview > .tree-outline.timelines .item:not(.selected):not(:first-child) {
-        border-top-color: hsla(0, 0%, var(--foreground-lightness), 0.09);
-    }
-
-    .timeline-overview > .tree-outline.timelines .item.selected + .item {
-        border-top-color: hsla(0, 0%, var(--foreground-lightness), 0.09);
-    }
-}
+}