Web Inspector: Support smart-pasting in the Rules sidebar panel
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 30 Jul 2015 23:56:51 +0000 (23:56 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 30 Jul 2015 23:56:51 +0000 (23:56 +0000)
https://bugs.webkit.org/show_bug.cgi?id=147362

Reviewed by Timothy Hatcher.

When pasting over the selector, if the pasted text matches CSS rule
formatting, replace the selected rule with the selector and text in
the pasted data.

* UserInterface/Models/DOMNodeStyles.js:
(WebInspector.DOMNodeStyles.prototype.changeRule.changeCompleted):
(WebInspector.DOMNodeStyles.prototype.changeRule.styleChanged):
(WebInspector.DOMNodeStyles.prototype.changeRule.changeText):
(WebInspector.DOMNodeStyles.prototype.changeRule.ruleSelectorChanged):
(WebInspector.DOMNodeStyles.prototype.changeRule):
* UserInterface/Views/CSSStyleDeclarationSection.js:
(WebInspector.CSSStyleDeclarationSection.prototype._handleSelectorPaste.parseTextForRule):
(WebInspector.CSSStyleDeclarationSection.prototype._handleSelectorPaste):
(WebInspector.CSSStyleDeclarationSection):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@187625 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js
Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js

index c9598a1..fd429ef 100644 (file)
@@ -1,3 +1,25 @@
+2015-07-30  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Support smart-pasting in the Rules sidebar panel
+        https://bugs.webkit.org/show_bug.cgi?id=147362
+
+        Reviewed by Timothy Hatcher.
+
+        When pasting over the selector, if the pasted text matches CSS rule
+        formatting, replace the selected rule with the selector and text in
+        the pasted data.
+
+        * UserInterface/Models/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype.changeRule.changeCompleted):
+        (WebInspector.DOMNodeStyles.prototype.changeRule.styleChanged):
+        (WebInspector.DOMNodeStyles.prototype.changeRule.changeText):
+        (WebInspector.DOMNodeStyles.prototype.changeRule.ruleSelectorChanged):
+        (WebInspector.DOMNodeStyles.prototype.changeRule):
+        * UserInterface/Views/CSSStyleDeclarationSection.js:
+        (WebInspector.CSSStyleDeclarationSection.prototype._handleSelectorPaste.parseTextForRule):
+        (WebInspector.CSSStyleDeclarationSection.prototype._handleSelectorPaste):
+        (WebInspector.CSSStyleDeclarationSection):
+
 2015-07-30  Matt Baker  <mattbaker@apple.com>
 
         Web Inspector: Fix typo in frame duration filtering console.assert message
index 45f722f..ed5b9ff 100644 (file)
@@ -322,6 +322,52 @@ WebInspector.DOMNodeStyles = class DOMNodeStyles extends WebInspector.Object
         this._markAsNeedsRefresh();
     }
 
+    changeRule(rule, selector, text)
+    {
+        if (!rule)
+            return;
+
+        selector = selector || "";
+
+        function changeCompleted()
+        {
+            DOMAgent.markUndoableState();
+            this.refresh();
+        }
+
+        function styleChanged(error, stylePayload)
+        {
+            if (error)
+                return;
+
+            changeCompleted.call(this);
+        }
+
+        function changeText(styleId)
+        {
+            // COMPATIBILITY (iOS 6): CSSAgent.setStyleText was not available in iOS 6.
+            if (!text || !text.length || !CSSAgent.setStyleText) {
+                changeCompleted.call(this);
+                return;
+            }
+
+            CSSAgent.setStyleText(styleId, text, styleChanged.bind(this));
+        }
+
+        function ruleSelectorChanged(error, rulePayload)
+        {
+            if (error)
+                return;
+
+            changeText.call(this, rulePayload.style.styleId);
+        }
+
+        this._needsRefresh = true;
+        this._ignoreNextContentDidChangeForStyleSheet = rule.ownerStyleSheet;
+
+        CSSAgent.setRuleSelector(rule.id, selector, ruleSelectorChanged.bind(this));
+    }
+
     changeRuleSelector(rule, selector)
     {
         selector = selector || "";
index 552c46e..454ed86 100644 (file)
@@ -52,6 +52,7 @@ WebInspector.CSSStyleDeclarationSection = function(delegate, style)
     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._selectorElement.addEventListener("paste", this._handleSelectorPaste.bind(this));
     this._headerElement.appendChild(this._selectorElement);
 
     this._originElement = document.createElement("span");
@@ -399,6 +400,43 @@ WebInspector.CSSStyleDeclarationSection.prototype = {
         return selectorText.trim();
     },
 
+    _handleSelectorPaste: function(event)
+    {
+        if (this._style.type === WebInspector.CSSStyleDeclaration.Type.Inline || !this._style.ownerRule)
+            return;
+
+        if (!event || !event.clipboardData)
+            return;
+
+        var data = event.clipboardData.getData("text/plain");
+        if (!data)
+            return;
+
+        function parseTextForRule(text)
+        {
+            var containsBraces = /[\{\}]/;
+            if (!containsBraces.test(text))
+                return null;
+
+            var match = text.match(/([^{]+){(.*)}/);
+            if (!match)
+                return null;
+
+            // If the match "body" contains braces, parse that body as if it were a rule.
+            // This will usually happen if the user includes a media query in the copied text.
+            return containsBraces.test(match[2]) ? parseTextForRule(match[2]) : match;
+        }
+
+        var match = parseTextForRule(data);
+        if (!match)
+            return;
+
+        var selector = match[1].trim();
+        this._selectorElement.textContent = selector;
+        this._style.nodeStyles.changeRule(this._style.ownerRule, selector, match[2]);
+        event.preventDefault();
+    },
+
     _handleContextMenuEvent: function(event)
     {
         if (window.getSelection().toString().length)