REGRESSION (r?): Web Inspector: Timelines: blue border below selected timeline when in edit mode

• Component: Web Inspector
• Status: RESOLVED FIXED

[Devin Rousso]

# STEPS TO REPRODUCE
1. inspect any page
2. go to the Timelines Tab
3. select any timeline
4. enter Edit mode
  => blue border seen below the selected timeline

[Radar WebKit Bug Importer]

<rdar://problem/66338399>

[Nikita Vasilyev]

It's coming from this rule:

body:not(.window-inactive, .window-docked-inactive) .timeline-overview > .tree-outline.timelines:focus-within .item.selected + .item {
    border-top-color: hsl(209, 100%, 49%);
}

[Nikita Vasilyev]

The CSS rule was added in 2016: https://trac.webkit.org/changeset/197473/webkit
I don't know why we need it now (haven't looked deeply into the issue though).

[Jon Lee]

Was this an intentional design decision that we should now reconsider? Or is this a regression?

[Nikita Vasilyev]

First of all, this isn't a recent regression.

I assume that, 4 years ago, Matt wanted to style the border of selected item with slightly lighter color than the selection color. That predated custom accent colors. I don't think we should do this (change border color) anymore.

[Devin Rousso]

(In reply to Nikita Vasilyev from comment #5)
> First of all, this isn't a recent regression.
> 
> I assume that, 4 years ago, Matt wanted to style the border of selected item with slightly lighter color than the selection color. That predated custom accent colors. I don't think we should do this (change border color) anymore.

This is not true.  I am not able to reproduce this using Safari 13.1.1 (15609.2.9.1.2).  I'm not able to even select timelines when in Edit mode.

[Nikita Vasilyev]

Okay, I'm going to remove this colored border now. It doesn't match the accent color — when the accent color is yellow the border is still blue.

[Nikita Vasilyev]

Created attachment 405642 [details]
Patch

[Nikita Vasilyev]

Created attachment 405643 [details]
[Video] With patch applied

[Devin Rousso]

Comment on attachment 405642 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=405642&action=review

r=me, nice!

> Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css:115
>  .timeline-overview > .tree-outline.timelines .item:not(.selected):not(:first-child) {

It's odd to me that the `border-top` doesn't also apply when `.selected`, as right now there's basically no border between the selected item and the item above it, while there is a border between the selected item and the item below it.  I think we should also have the `border-top` set when `.selected`.

[Nikita Vasilyev]

Created attachment 405649 [details]
Patch

[EWS]

Committed r265125: <https://trac.webkit.org/changeset/265125>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 405649 [details].