Title: [187625] trunk/Source/WebInspectorUI
Revision
187625
Author
drou...@apple.com
Date
2015-07-30 16:56:51 -0700 (Thu, 30 Jul 2015)

Log Message

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):

Modified Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (187624 => 187625)


--- trunk/Source/WebInspectorUI/ChangeLog	2015-07-30 23:51:29 UTC (rev 187624)
+++ trunk/Source/WebInspectorUI/ChangeLog	2015-07-30 23:56:51 UTC (rev 187625)
@@ -1,3 +1,25 @@
+2015-07-30  Devin Rousso  <drou...@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  <mattba...@apple.com>
 
         Web Inspector: Fix typo in frame duration filtering console.assert message

Modified: trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js (187624 => 187625)


--- trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js	2015-07-30 23:51:29 UTC (rev 187624)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js	2015-07-30 23:56:51 UTC (rev 187625)
@@ -322,6 +322,52 @@
         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 || "";

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js (187624 => 187625)


--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js	2015-07-30 23:51:29 UTC (rev 187624)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js	2015-07-30 23:56:51 UTC (rev 187625)
@@ -52,6 +52,7 @@
     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 @@
         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 = ""
+        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)
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to