Modified: trunk/Source/WebInspectorUI/ChangeLog (187449 => 187450)
--- trunk/Source/WebInspectorUI/ChangeLog 2015-07-27 21:08:41 UTC (rev 187449)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-07-27 21:20:35 UTC (rev 187450)
@@ -1,3 +1,28 @@
+2015-07-27 Devin Rousso <drou...@apple.com>
+
+ Web Inspector: support live editing of rule selectors
+ https://bugs.webkit.org/show_bug.cgi?id=139153
+
+ Reviewed by Timothy Hatcher.
+
+ * UserInterface/Controllers/DOMTreeManager.js:
+ (WebInspector.DOMTreeManager.prototype.highlightSelector):
+ Moved from CSSStyleDeclarationSection.
+
+ * UserInterface/Views/CSSStyleDeclarationSection.js:
+ (WebInspector.CSSStyleDeclarationSection):
+ (WebInspector.CSSStyleDeclarationSection.prototype.get _currentSelectorText):
+ Returns the current selector text, either from the style ownerRule or the selector element text.
+ (WebInspector.CSSStyleDeclarationSection.prototype._highlightNodesWithSelector):
+ Now highlights all nodes matching the current selector instead of the ownerRule's selector.
+ (WebInspector.CSSStyleDeclarationSection.prototype._hideDOMNodeHighlight):
+ (WebInspector.CSSStyleDeclarationSection.prototype._handleMouseOver):
+ (WebInspector.CSSStyleDeclarationSection.prototype._handleMouseOut):
+ (WebInspector.CSSStyleDeclarationSection.prototype._handleKeyDown):
+ If the character is not a tab, highlight all nodes matching the current selector text.
+ (WebInspector.CSSStyleDeclarationSection.prototype._handleKeyUp):
+ (WebInspector.CSSStyleDeclarationSection.prototype._hideHighlightOnNodesWithSelector): Deleted.
+
2015-07-27 Nikita Vasilyev <nvasil...@apple.com>
Web Inspector: " = $0" in Elements panel can cause a jerk by pushing nodes below it
Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/DOMTreeManager.js (187449 => 187450)
--- trunk/Source/WebInspectorUI/UserInterface/Controllers/DOMTreeManager.js 2015-07-27 21:08:41 UTC (rev 187449)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/DOMTreeManager.js 2015-07-27 21:20:35 UTC (rev 187450)
@@ -360,6 +360,14 @@
DOMAgent.hideHighlight();
}
+ highlightSelector(selectorText, frameId, mode)
+ {
+ if (!DOMAgent.highlightSelector || typeof DOMAgent.highlightSelector !== "function")
+ return;
+
+ DOMAgent.highlightSelector(this._buildHighlightConfig(mode), selectorText, frameId);
+ }
+
highlightRect(rect, usePageCoordinates)
{
DOMAgent.highlightRect.invoke({
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js (187449 => 187450)
--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js 2015-07-27 21:08:41 UTC (rev 187449)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js 2015-07-27 21:20:35 UTC (rev 187450)
@@ -48,9 +48,10 @@
this._selectorElement = document.createElement("span");
this._selectorElement.className = "selector";
this._selectorElement.setAttribute("spellcheck", "false");
- this._selectorElement.addEventListener("mouseover", this._highlightNodesWithSelector.bind(this));
- this._selectorElement.addEventListener("mouseout", this._hideHighlightOnNodesWithSelector.bind(this));
+ this._selectorElement.addEventListener("mouseover", this._handleMouseOver.bind(this));
+ this._selectorElement.addEventListener("mouseout", this._handleMouseOut.bind(this));
this._selectorElement.addEventListener("keydown", this._handleKeyDown.bind(this));
+ this._selectorElement.addEventListener("keyup", this._handleKeyUp.bind(this));
this._headerElement.appendChild(this._selectorElement);
this._originElement = document.createElement("span");
@@ -384,6 +385,18 @@
// Private
+ get _currentSelectorText()
+ {
+ if (!this._style.ownerRule)
+ return;
+
+ var selectorText = this._selectorElement.textContent;
+ if (!selectorText || !selectorText.length)
+ selectorText = this._style.ownerRule.selectorText;
+
+ return selectorText.trim();
+ },
+
_handleContextMenuEvent: function(event)
{
if (window.getSelection().toString().length)
@@ -444,33 +457,35 @@
_highlightNodesWithSelector: function()
{
- var highlightConfig = {
- borderColor: {r: 255, g: 229, b: 153, a: 0.66},
- contentColor: {r: 111, g: 168, b: 220, a: 0.66},
- marginColor: {r: 246, g: 178, b: 107, a: 0.66},
- paddingColor: {r: 147, g: 196, b: 125, a: 0.66},
- showInfo: true
- };
-
if (!this._style.ownerRule) {
- // COMPATIBILITY (iOS 6): Order of parameters changed in iOS 7.
- DOMAgent.highlightNode.invoke({nodeId: this._style.node.id, highlightConfig});
+ WebInspector.domTreeManager.highlightDOMNode(this._style.node.id);
return;
}
- if (DOMAgent.highlightSelector)
- DOMAgent.highlightSelector(highlightConfig, this._style.ownerRule.selectorText, this._style.node.ownerDocument.frameIdentifier);
+ WebInspector.domTreeManager.highlightSelector(this._currentSelectorText, this._style.node.ownerDocument.frameIdentifier);
},
- _hideHighlightOnNodesWithSelector: function()
+ _hideDOMNodeHighlight: function()
{
- DOMAgent.hideHighlight();
+ WebInspector.domTreeManager.hideDOMNodeHighlight();
},
+ _handleMouseOver: function(event)
+ {
+ this._highlightNodesWithSelector();
+ },
+
+ _handleMouseOut: function(event)
+ {
+ this._hideDOMNodeHighlight();
+ },
+
_handleKeyDown: function(event)
{
- if (event.keyCode !== 9)
+ if (event.keyCode !== 9) {
+ this._highlightNodesWithSelector();
return;
+ }
if (event.shiftKey && this._delegate && typeof this._delegate.cssStyleDeclarationSectionEditorPreviousRule === "function") {
event.preventDefault();
@@ -486,6 +501,11 @@
}
},
+ _handleKeyUp: function(event)
+ {
+ this._highlightNodesWithSelector();
+ },
+
_commitSelector: function(mutations)
{
console.assert(this._style.ownerRule);
