Changeset 208270 in webkit
- Timestamp:
- Nov 1, 2016 7:38:56 PM (7 years ago)
- Location:
- trunk/Source/WebInspectorUI
- Files:
-
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebInspectorUI/ChangeLog
r208260 r208270 1 2016-11-01 Devin Rousso <dcrousso+webkit@gmail.com> 2 3 Web Inspector: Creating a new pseudo-selector in the Styles sidebar doesn't work on first attempt 4 https://bugs.webkit.org/show_bug.cgi?id=164092 5 6 Reviewed by Timothy Hatcher. 7 8 * UserInterface/Views/CSSStyleDeclarationSection.css: 9 (.style-declaration-section:not(.invalid-selector).rule-disabled > .header > .icon): 10 (.style-declaration-section.invalid-selector > .header > .icon): 11 (.style-declaration-section.invalid-selector > .header > .selector,): 12 (.style-declaration-section.rule-disabled > .header > .icon): Deleted. 13 14 * UserInterface/Views/CSSStyleDeclarationSection.js: 15 (WebInspector.CSSStyleDeclarationSection): 16 (WebInspector.CSSStyleDeclarationSection.prototype.refresh): 17 (WebInspector.CSSStyleDeclarationSection.prototype._handleIconElementClicked): 18 (WebInspector.CSSStyleDeclarationSection.prototype._updateSelectorIcon): Added. 19 Re-add logic removed by https://webkit.org/b/159734 for handling invalid selectors. Instead 20 of just refreshing the section whenever the represented CSSRule changes selectors, we only 21 need to refresh if the selector no longer applies to the current element. 22 23 (WebInspector.CSSStyleDeclarationSection.prototype._handleMouseMove): Added. 24 Fix another issue discovered while adding the invalid selector warnings, where the title 25 attribute of each individual selector was no longer visible. To fix this, whenever the user 26 moves their mouse over the selector input, the position is compared to each selector to find 27 the first one that matches, whose title is then applied to the input element. 28 1 29 2016-11-01 Joseph Pecoraro <pecoraro@apple.com> 2 30 -
trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.css
r205792 r208270 91 91 } 92 92 93 .style-declaration-section .rule-disabled > .header > .icon {93 .style-declaration-section:not(.invalid-selector).rule-disabled > .header > .icon { 94 94 opacity: 0.5; 95 95 } … … 152 152 } 153 153 154 .style-declaration-section.invalid-selector > .header > .icon { 155 top: 4px; 156 left: 6px; 157 width: 12px; 158 height: 12px; 159 content: url(../Images/Error.svg); 160 } 161 162 .style-declaration-section.invalid-selector > .header > .selector, 163 .style-declaration-section.invalid-selector > .header > .selector > * { 164 color: red; 165 } 166 154 167 @media (-webkit-min-device-pixel-ratio: 2) { 155 168 .style-declaration-section, -
trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js
r206888 r208270 37 37 this._selectorElements = []; 38 38 this._ruleDisabled = false; 39 this._hasInvalidSelector = false; 39 40 40 41 this._element = document.createElement("div"); … … 54 55 this._selectorInput.tabIndex = -1; 55 56 this._selectorInput.addEventListener("mouseover", this._handleMouseOver.bind(this)); 57 this._selectorInput.addEventListener("mousemove", this._handleMouseMove.bind(this)); 56 58 this._selectorInput.addEventListener("mouseout", this._handleMouseOut.bind(this)); 57 59 this._selectorInput.addEventListener("keydown", this._handleKeyDown.bind(this)); … … 120 122 this._element.classList.add(WebInspector.CSSStyleDeclarationSection.LockedStyleClassName); 121 123 else if (style.ownerRule) 122 this._style.ownerRule.addEventListener(WebInspector.CSSRule.Event.SelectorChanged, this. refresh.bind(this));124 this._style.ownerRule.addEventListener(WebInspector.CSSRule.Event.SelectorChanged, this._updateSelectorIcon.bind(this)); 123 125 else 124 126 this._element.classList.add(WebInspector.CSSStyleDeclarationSection.SelectorLockedStyleClassName); … … 274 276 } 275 277 278 this._updateSelectorIcon(); 276 279 if (this._selectorInput) 277 280 this._selectorInput.value = this._selectorElement.textContent; … … 533 536 _handleIconElementClicked() 534 537 { 538 if (this._hasInvalidSelector) { 539 // This will revert the selector text to the original valid value. 540 this.refresh(); 541 return; 542 } 543 535 544 this._ruleDisabled = this._ruleDisabled ? !this._propertiesTextEditor.uncommentAllProperties() : this._propertiesTextEditor.commentAllProperties(); 536 545 this._iconElement.title = this._ruleDisabled ? WebInspector.UIString("Uncomment All Properties") : WebInspector.UIString("Comment All Properties"); … … 556 565 { 557 566 this._highlightNodesWithSelector(); 567 } 568 569 _handleMouseMove(event) 570 { 571 if (this._hasInvalidSelector) 572 return; 573 574 // Attempts to find a selector element under the mouse so that the title (which contains the 575 // specificity information) can be applied to _selectorInput, which will then display the 576 // title if the user hovers long enough. 577 for (let element of this._selectorElements) { 578 let {top, right, bottom, left} = element.getBoundingClientRect(); 579 if (event.clientX >= left && event.clientX <= right && event.clientY >= top && event.clientY <= bottom) { 580 this._selectorInput.title = element.title; 581 return; 582 } 583 } 584 585 this._selectorInput.title = ""; 558 586 } 559 587 … … 654 682 } 655 683 684 _updateSelectorIcon(event) 685 { 686 if (!this._style.ownerRule || !this._style.editable) 687 return; 688 689 this._hasInvalidSelector = event && event.data && !event.data.valid; 690 this._element.classList.toggle("invalid-selector", !!this._hasInvalidSelector); 691 if (this._hasInvalidSelector) { 692 this._iconElement.title = WebInspector.UIString("The selector “%s” is invalid.\nClick to revert to the previous selector.").format(this._selectorElement.textContent.trim()); 693 this._selectorInput.title = WebInspector.UIString("Using the previous selector “%s”.").format(this._style.ownerRule.selectorText); 694 return; 695 } 696 697 this._iconElement.title = this._ruleDisabled ? WebInspector.UIString("Uncomment All Properties") : WebInspector.UIString("Comment All Properties"); 698 this._selectorInput.title = ""; 699 } 700 656 701 _editorContentChanged(event) 657 702 {
Note: See TracChangeset
for help on using the changeset viewer.