WebKit Bugzilla
Attachment 372957 Details for
Bug 199166
: Web Inspector: REGRESSION: Elements: the forced pseudo-class indicator isn't visible when hovering
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
[patch]
Patch
bug-199166-20190626154307.patch (text/plain), 8.70 KB, created by
Devin Rousso
on 2019-06-26 15:43:08 PDT
(
hide
)
Description:
Patch
Filename:
MIME Type:
Creator:
Devin Rousso
Created:
2019-06-26 15:43:08 PDT
Size:
8.70 KB
patch
obsolete
>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog >index 324e4e0bd4f8abf26d699c538cf52598311374bd..9457967be5c2b937adabb47d80be1a55f3b9c190 100644 >--- a/Source/WebInspectorUI/ChangeLog >+++ b/Source/WebInspectorUI/ChangeLog >@@ -1,3 +1,36 @@ >+2019-06-25 Devin Rousso <drousso@apple.com> >+ >+ Web Inspector: REGRESSION: Elements: the forced pseudo-class indicator isn't visible when hovering >+ https://bugs.webkit.org/show_bug.cgi?id=199166 >+ >+ Reviewed by NOBODY (OOPS!). >+ >+ Make the pseudo-class indicator into its own element instead of being a `::before`. >+ >+ * UserInterface/Views/DOMTreeElement.js: >+ (WI.DOMTreeElement): >+ (WI.DOMTreeElement.prototype.updateSelectionArea): >+ (WI.DOMTreeElement.prototype.updateTitle): >+ (WI.DOMTreeElement.prototype._updatePseudoClassIndicator): Added. >+ (WI.DOMTreeElement.prototype.get pseudoClassesEnabled): Deleted. >+ (WI.DOMTreeElement.prototype._nodePseudoClassesDidChange): Deleted. >+ >+ * UserInterface/Views/DOMTreeOutline.css: >+ (.tree-outline.dom): >+ (.tree-outline.dom li .pseudo-class-indicator): Added. >+ (body[dir=ltr] .tree-outline.dom li .pseudo-class-indicator): Added. >+ (body[dir=rtl] .tree-outline.dom li .pseudo-class-indicator): Added. >+ (.tree-outline.dom:focus li.selected .pseudo-class-indicator): Added. >+ (.tree-outline.dom li.pseudo-class-enabled > .selection-area::before): Deleted. >+ (body[dir=ltr] .tree-outline.dom li.pseudo-class-enabled > .selection-area::before): Deleted. >+ (body[dir=rtl] .tree-outline.dom li.pseudo-class-enabled > .selection-area::before): Deleted. >+ (.tree-outline.dom:focus li.selected.pseudo-class-enabled > .selection-area::before): Deleted. >+ >+ * UserInterface/Views/FormattedValue.css: >+ (.formatted-node > .tree-outline.dom): >+ Adjust the indent of any `DOMTreeOutline` so there's more room for the pseudo-class >+ indicator, such as in the Console. >+ > 2019-06-25 Matt Baker <mattbaker@apple.com> > > Web Inspector: Elements: show shadow DOM by default >diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css b/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css >index b213f457ae003f8a9975be10ad433243d130bac0..e249e43be60e90a8ccd0f406080c472a68b440a3 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css >+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css >@@ -34,7 +34,7 @@ > .content-view.dom-tree.show-gutter .tree-outline.dom { > -webkit-padding-start: 20px; > >- --item-pseudo-class-enabled-selection-before-start: 17px; >+ --item-pseudo-class-indicator-start: 17px; > } > > .content-view.dom-tree .tree-outline.dom li .status-image { >diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js >index 85298ed597d06f2385303d4f1c35ab7bf8d7a848..9b1b3b61caad291d5dd3a3759699c0bf00fb2761 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js >+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js >@@ -52,7 +52,7 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement > this._recentlyModifiedAttributes = new Map; > this._closeTagTreeElement = null; > >- node.addEventListener(WI.DOMNode.Event.EnabledPseudoClassesChanged, this._nodePseudoClassesDidChange, this); >+ node.addEventListener(WI.DOMNode.Event.EnabledPseudoClassesChanged, this._updatePseudoClassIndicator, this); > > this._ignoreSingleTextChild = false; > this._forceUpdateTitle = false; >@@ -393,7 +393,7 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement > > // If there's no reason to have a selection area, remove the DOM element. > let indicatesTreeOutlineState = this.treeOutline && (this.treeOutline.dragOverTreeElement === this || this.selected || this._animatingHighlight); >- if (!this.hovered && !this.pseudoClassesEnabled && !indicatesTreeOutlineState) { >+ if (!this.hovered && !indicatesTreeOutlineState) { > if (this._selectionElement) { > this._selectionElement.remove(); > this._selectionElement = null; >@@ -1292,6 +1292,7 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement > this._selectionElement = null; > this.updateSelectionArea(); > this._highlightSearchResults(); >+ this._updatePseudoClassIndicator(); > this._updateBreakpointStatus(); > } > >@@ -1840,24 +1841,29 @@ WI.DOMTreeElement = class DOMTreeElement extends WI.TreeElement > element.classList.add("node-state-changed"); > } > >- get pseudoClassesEnabled() >- { >- return !!this.representedObject.enabledPseudoClasses.length; >- } >- > get isNodeHidden() > { > let classes = this.representedObject.getAttribute("class"); > return classes && classes.includes(WI.DOMTreeElement.HideElementStyleSheetIdOrClassName); > } > >- _nodePseudoClassesDidChange(event) >+ _updatePseudoClassIndicator() > { >- if (this._elementCloseTag) >+ if (!this.listItemElement || this._elementCloseTag) > return; > >- this.updateSelectionArea(); >- this.listItemElement.classList.toggle("pseudo-class-enabled", !!this.representedObject.enabledPseudoClasses.length); >+ if (this.representedObject.enabledPseudoClasses.length) { >+ if (!this._pseudoClassIndicatorElement) { >+ this._pseudoClassIndicatorElement = document.createElement("div"); >+ this._pseudoClassIndicatorElement.classList.add("pseudo-class-indicator"); >+ } >+ this.listItemElement.insertBefore(this._pseudoClassIndicatorElement, this.listItemElement.firstChild); >+ } else { >+ if (this._pseudoClassIndicatorElement) { >+ this._pseudoClassIndicatorElement.remove(); >+ this._pseudoClassIndicatorElement = null; >+ } >+ } > } > > handleEvent(event) >diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css >index a340188c95e4b26f97b83e343ec5be94237fa6de..053868376a68d765ebf8dbcc59342dcc499fb977 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css >+++ b/Source/WebInspectorUI/UserInterface/Views/DOMTreeOutline.css >@@ -38,7 +38,7 @@ > background-color: transparent !important; > color: var(--text-color); > >- --item-pseudo-class-enabled-selection-before-start: 2px; >+ --item-pseudo-class-indicator-start: 2px; > > --sublist-margin-start: 4px; > --sublist-padding-start: 1px; >@@ -131,23 +131,27 @@ body[dir=rtl] .tree-outline.dom li:matches(.hovered, .selected) + ol.children.ex > -webkit-margin-end: var(--item-padding-end); > } > >-.tree-outline.dom li.pseudo-class-enabled > .selection-area::before { >+.tree-outline.dom li .pseudo-class-indicator { > display: inline-block; > position: absolute; >- top: 4px; > width: 5px; > height: 5px; >+ margin-top: 4px; > content: ""; > background-color: var(--glyph-color-active); > border-radius: 50%; > } > >-body[dir=ltr] .tree-outline.dom li.pseudo-class-enabled > .selection-area::before { >- left: var(--item-pseudo-class-enabled-selection-before-start); >+body[dir=ltr] .tree-outline.dom li .pseudo-class-indicator { >+ left: var(--item-pseudo-class-indicator-start); > } > >-body[dir=rtl] .tree-outline.dom li.pseudo-class-enabled > .selection-area::before { >- right: var(--item-pseudo-class-enabled-selection-before-start); >+body[dir=rtl] .tree-outline.dom li .pseudo-class-indicator { >+ right: var(--item-pseudo-class-indicator-start); >+} >+ >+.tree-outline.dom:focus li.selected .pseudo-class-indicator { >+ background-color: var(--selected-foreground-color); > } > > .tree-outline.dom.single-node li { >@@ -158,10 +162,6 @@ body[dir=rtl] .tree-outline.dom li.pseudo-class-enabled > .selection-area::befor > color: white; > } > >-.tree-outline.dom:focus li.selected.pseudo-class-enabled > .selection-area::before { >- background-color: hsl(0, 100%, 100%); >-} >- > .tree-outline.dom:focus li.selected * { > color: inherit; > } >diff --git a/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css b/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css >index dd0272d9e2b2321f68992f8071317699e1d0efdc..ff207a23037af9ff3df83ea72ca0bdb946e20621 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css >+++ b/Source/WebInspectorUI/UserInterface/Views/FormattedValue.css >@@ -65,7 +65,8 @@ > .formatted-node > .tree-outline.dom { > display: block !important; > padding: 0; >- margin-left: -2px; >+ >+ --item-pseudo-class-indicator-start: -2px; > } > > .formatted-node > .tree-outline.dom li {
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Formatted Diff
|
Diff
Attachments on
bug 199166
:
372774
|
372842
|
372872
| 372957