Bug 214979 - REGRESSION (r?): Web Inspector: Timelines: blue border below selected timeline when in edit mode
Summary: REGRESSION (r?): Web Inspector: Timelines: blue border below selected timelin...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nikita Vasilyev
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2020-07-30 11:26 PDT by Devin Rousso
Modified: 2020-07-30 18:45 PDT (History)
5 users (show)

See Also:


Attachments
Patch (3.32 KB, patch)
2020-07-30 17:37 PDT, Nikita Vasilyev
drousso: review+
Details | Formatted Diff | Diff
[Video] With patch applied (1.18 MB, video/quicktime)
2020-07-30 17:40 PDT, Nikita Vasilyev
no flags Details
Patch (4.07 KB, patch)
2020-07-30 18:22 PDT, Nikita Vasilyev
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Devin Rousso 2020-07-30 11:26:40 PDT
# 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
Comment 1 Radar WebKit Bug Importer 2020-07-30 11:26:57 PDT
<rdar://problem/66338399>
Comment 2 Nikita Vasilyev 2020-07-30 11:36:18 PDT
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%);
}
Comment 3 Nikita Vasilyev 2020-07-30 11:39:55 PDT
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).
Comment 4 Jon Lee 2020-07-30 17:06:54 PDT
Was this an intentional design decision that we should now reconsider? Or is this a regression?
Comment 5 Nikita Vasilyev 2020-07-30 17:10:32 PDT
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.
Comment 6 Devin Rousso 2020-07-30 17:24:31 PDT
(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.
Comment 7 Nikita Vasilyev 2020-07-30 17:28:03 PDT
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.
Comment 8 Nikita Vasilyev 2020-07-30 17:37:34 PDT
Created attachment 405642 [details]
Patch
Comment 9 Nikita Vasilyev 2020-07-30 17:40:44 PDT
Created attachment 405643 [details]
[Video] With patch applied
Comment 10 Devin Rousso 2020-07-30 17:43:44 PDT
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`.
Comment 11 Nikita Vasilyev 2020-07-30 18:22:09 PDT
Created attachment 405649 [details]
Patch
Comment 12 EWS 2020-07-30 18:44:59 PDT
Committed r265125: <https://trac.webkit.org/changeset/265125>

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