WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
RESOLVED FIXED
199166
Web Inspector: REGRESSION: Elements: the forced pseudo-class indicator isn't visible when hovering
https://bugs.webkit.org/show_bug.cgi?id=199166
Summary
Web Inspector: REGRESSION: Elements: the forced pseudo-class indicator isn't ...
Devin Rousso
Reported
2019-06-24 11:25:14 PDT
# STEPS TO REPRODUCE: 1. inspect any page 2. right-click on any node in the Elements Tab 3. toggle any of the submenu items of "Forced Pseudo-Classes" => a white circle appears to the left of the toggled node 4. select a different node 5. hover over the node from step 2 (and step 3) => the white circle disappears
Attachments
Patch
(1.78 KB, patch)
2019-06-24 11:32 PDT
,
Devin Rousso
no flags
Details
Formatted Diff
Diff
[Image] Mockup - hovered pseudo class indicator
(449.75 KB, image/png)
2019-06-25 10:45 PDT
,
Matt Baker
no flags
Details
Patch
(8.71 KB, patch)
2019-06-25 16:03 PDT
,
Devin Rousso
no flags
Details
Formatted Diff
Diff
Patch
(8.70 KB, patch)
2019-06-26 15:43 PDT
,
Devin Rousso
no flags
Details
Formatted Diff
Diff
Show Obsolete
(2)
View All
Add attachment
proposed patch, testcase, etc.
Devin Rousso
Comment 1
2019-06-24 11:32:29 PDT
Created
attachment 372774
[details]
Patch
Matt Baker
Comment 2
2019-06-25 10:43:03 PDT
I think the real issue is that the hovered .selection-area div has an opacity of 0.3, making the ::before element hard to read regardless of the background color: DOMTreeOutline.css:69: .tree-outline.dom:not(.non-selectable) li.hovered:not(.selected) .selection-area { opacity: 0.3; } If we could break out the pseudo class indicator from the .selection-area that would be awesome.
Matt Baker
Comment 3
2019-06-25 10:45:04 PDT
Created
attachment 372842
[details]
[Image] Mockup - hovered pseudo class indicator If we break this out of the .selection-area, the indicator can continue to use --glyph-color-active and be legible. Granted, the contrast is lower in dark mode, but that is true of other UI as well.
Matt Baker
Comment 4
2019-06-25 10:45:40 PDT
Comment on
attachment 372774
[details]
Patch r- for now, as I don't think this gives us the appearance we want in either light or dark mode.
Matt Baker
Comment 5
2019-06-25 10:48:51 PDT
And are we sure this is a regression? Did it regress during the CSS variable changes made for dark mode support? Or possibly the changes to use the system accent color? If so, please add the revision responsible.
Devin Rousso
Comment 6
2019-06-25 16:03:18 PDT
Created
attachment 372872
[details]
Patch
Matt Baker
Comment 7
2019-06-26 14:44:10 PDT
Comment on
attachment 372872
[details]
Patch View in context:
https://bugs.webkit.org/attachment.cgi?id=372872&action=review
Very nice! Colors look good in light and dark mode. Just a couple comments.
> Source/WebInspectorUI/ChangeLog:32 > + indicator, such as in the Console.
Should we be doing this? We didn't show the indicator in the console before.
> Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js:1856 > + if (!listItemElement)
Can we remove this local variable? Below `this.listItemElement` is used directly.
> Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css:41 > + --item-pseudo-class-indicator-start: -2px;
This should still be 2px. The indicator is cut off otherwise.
> Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css:154 > + background-color: white;
background-color: var(--selected-foreground-color);
Matt Baker
Comment 8
2019-06-26 14:45:25 PDT
Comment on
attachment 372872
[details]
Patch r-, due to the indicator being cut off when the gutter isn't showing. Otherwise this change looks great.
Devin Rousso
Comment 9
2019-06-26 15:40:25 PDT
Comment on
attachment 372872
[details]
Patch View in context:
https://bugs.webkit.org/attachment.cgi?id=372872&action=review
>> Source/WebInspectorUI/ChangeLog:32 >> + indicator, such as in the Console. > > Should we be doing this? We didn't show the indicator in the console before.
We actually did, just not for the logged node itself. If a child had a forced pseudo-class, it was shown (and updated) in the Console.
Devin Rousso
Comment 10
2019-06-26 15:43:08 PDT
Created
attachment 372957
[details]
Patch
Matt Baker
Comment 11
2019-06-26 16:08:33 PDT
Comment on
attachment 372957
[details]
Patch r=me, nice work!
WebKit Commit Bot
Comment 12
2019-06-26 16:25:23 PDT
Comment on
attachment 372957
[details]
Patch Clearing flags on attachment: 372957 Committed
r246855
: <
https://trac.webkit.org/changeset/246855
>
WebKit Commit Bot
Comment 13
2019-06-26 16:25:25 PDT
All reviewed patches have been landed. Closing bug.
Radar WebKit Bug Importer
Comment 14
2019-06-26 16:28:20 PDT
<
rdar://problem/52217790
>
Note
You need to
log in
before you can comment on or make changes to this bug.
Top of Page
Format For Printing
XML
Clone This Bug