Changeset 217911 in webkit

Timestamp:

Jun 7, 2017 4:53:10 PM (7 years ago)

Author:

Devin Rousso

Message:

Web Inspector: Allow user to choose stylesheet when creating new rules
​https://bugs.webkit.org/show_bug.cgi?id=172487

Reviewed by Joseph Pecoraro.

Source/WebCore:

New test: inspector/css/add-rule.html

• inspector/InspectorStyleSheet.cpp:

(WebCore::InspectorStyleSheet::addRule):
Reparse the content when a new rule is added to a non-inspector origin stylesheet.

Source/WebInspectorUI:

• Localizations/en.lproj/localizedStrings.js:
• UserInterface/Models/DOMNodeStyles.js:

(WebInspector.DOMNodeStyles.prototype.addRule.inspectorStyleSheetAvailable):
(WebInspector.DOMNodeStyles.prototype.addRule):

• UserInterface/Views/CSSStyleDetailsSidebarPanel.js:

(WebInspector.CSSStyleDetailsSidebarPanel.prototype.initialLayout):
(WebInspector.CSSStyleDetailsSidebarPanel.prototype._newRuleButtonContextMenu):

• UserInterface/Views/RulesStyleDetailsPanel.js:

(WebInspector.RulesStyleDetailsPanel.prototype.newRuleButtonClicked):
(WebInspector.RulesStyleDetailsPanel.prototype.newRuleButtonContextMenu):

• UserInterface/Views/VisualStyleSelectorSection.js:

(WebInspector.VisualStyleSelectorSection):
(WebInspector.VisualStyleSelectorSection.prototype._addNewRuleContextMenu):
(WebInspector.VisualStyleSelectorSection.prototype._addNewRule): Renamed _addNewRuleClick.

LayoutTests:

• inspector/css/add-rule-expected.html: Added.
• inspector/css/add-rule.html: Added.

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/inspector/css/add-rule-expected.txt (added)
• LayoutTests/inspector/css/add-rule.html (added)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/inspector/InspectorStyleSheet.cpp (modified) (2 diffs)
• Source/WebInspectorUI/ChangeLog (modified) (1 diff)
• Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (modified) (1 diff)
• Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js (modified) (2 diffs)
• Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js (modified) (2 diffs)
• Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js (modified) (1 diff)
• Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.js (modified) (3 diffs)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2017-06-07  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Allow user to choose stylesheet when creating new rules
+        https://bugs.webkit.org/show_bug.cgi?id=172487
+
+        Reviewed by Joseph Pecoraro.
+
+        * inspector/css/add-rule-expected.html: Added.
+        * inspector/css/add-rule.html: Added.
+
 2017-06-07  Youenn Fablet  <youenn@apple.com>
 

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2017-06-07  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Allow user to choose stylesheet when creating new rules
+        https://bugs.webkit.org/show_bug.cgi?id=172487
+
+        Reviewed by Joseph Pecoraro.
+
+        New test: inspector/css/add-rule.html
+
+        * inspector/InspectorStyleSheet.cpp:
+        (WebCore::InspectorStyleSheet::addRule):
+        Reparse the content when a new rule is added to a non-inspector origin stylesheet.
+
 2017-06-07  Youenn Fablet  <youenn@apple.com>
 

trunk/Source/WebCore/inspector/InspectorStyleSheet.cpp

@@ -930 +930 @@
         return text.releaseException();
 
-    StringBuilder styleSheetText;
-    styleSheetText.append(text.releaseReturnValue());
-
     auto addRuleResult = m_pageStyleSheet->addRule(selector, emptyString(), std::nullopt);
     if (addRuleResult.hasException())
         return addRuleResult.releaseException();
+
+    StringBuilder styleSheetText;
+    styleSheetText.append(text.releaseReturnValue());
+
+    if (!styleSheetText.isEmpty())
+        styleSheetText.append('\n');
+
+    styleSheetText.append(selector);
+    styleSheetText.appendLiteral(" {}");
+
+    // Using setText() as this operation changes the stylesheet rule set.
+    setText(styleSheetText.toString());
+
+    // Inspector Style Sheets are always treated as though their parsed data is ready.
+    if (m_origin == Inspector::Protocol::CSS::StyleSheetOrigin::Inspector)
+        fireStyleSheetChanged();
+    else
+        reparseStyleSheet(styleSheetText.toString());
+
     ASSERT(m_pageStyleSheet->length());
     unsigned lastRuleIndex = m_pageStyleSheet->length() - 1;
@@ -948 +964 @@
         return Exception { SYNTAX_ERR };
     }
-
-    if (!styleSheetText.isEmpty())
-        styleSheetText.append('\n');
-
-    styleSheetText.append(selector);
-    styleSheetText.appendLiteral(" {}");
-    // Using setText() as this operation changes the stylesheet rule set.
-    setText(styleSheetText.toString());
-
-    fireStyleSheetChanged();
 
     return styleRule;

trunk/Source/WebInspectorUI/ChangeLog

@@ +1 @@
+2017-06-07  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Allow user to choose stylesheet when creating new rules
+        https://bugs.webkit.org/show_bug.cgi?id=172487
+
+        Reviewed by Joseph Pecoraro.
+
+        * Localizations/en.lproj/localizedStrings.js:
+        * UserInterface/Models/DOMNodeStyles.js:
+        (WebInspector.DOMNodeStyles.prototype.addRule.inspectorStyleSheetAvailable):
+        (WebInspector.DOMNodeStyles.prototype.addRule):
+        * UserInterface/Views/CSSStyleDetailsSidebarPanel.js:
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype.initialLayout):
+        (WebInspector.CSSStyleDetailsSidebarPanel.prototype._newRuleButtonContextMenu):
+        * UserInterface/Views/RulesStyleDetailsPanel.js:
+        (WebInspector.RulesStyleDetailsPanel.prototype.newRuleButtonClicked):
+        (WebInspector.RulesStyleDetailsPanel.prototype.newRuleButtonContextMenu):
+        * UserInterface/Views/VisualStyleSelectorSection.js:
+        (WebInspector.VisualStyleSelectorSection):
+        (WebInspector.VisualStyleSelectorSection.prototype._addNewRuleContextMenu):
+        (WebInspector.VisualStyleSelectorSection.prototype._addNewRule): Renamed _addNewRuleClick.
+
 2017-06-06  Joseph Pecoraro  <pecoraro@apple.com>
 

trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js

@@ -113 +113 @@
 localizedStrings["Automatically continue after evaluating"] = "Automatically continue after evaluating";
 localizedStrings["Automatically insert newline"] = "Automatically insert newline";
+localizedStrings["Available Style Sheets"] = "Available Style Sheets";
 localizedStrings["Average Time"] = "Average Time";
 localizedStrings["Back (%s)"] = "Back (%s)";

trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js

@@ -264 +264 @@
     }
 
-    addRule(selector, text)
+    addRule(selector, text, styleSheetId)
     {
         selector = selector || this._node.appropriateSelectorFor(true);
@@ -303 +303 @@
         function inspectorStyleSheetAvailable(styleSheet)
         {
+            if (!styleSheet)
+                return;
+
             CSSAgent.addRule(styleSheet.id, selector, addedRule.bind(this));
         }
 
-        WebInspector.cssStyleManager.preferredInspectorStyleSheetForFrame(this._node.frame, inspectorStyleSheetAvailable.bind(this));
+        if (styleSheetId)
+            inspectorStyleSheetAvailable.call(this, WebInspector.cssStyleManager.styleSheetForIdentifier(styleSheetId));
+        else
+            WebInspector.cssStyleManager.preferredInspectorStyleSheetForFrame(this._node.frame, inspectorStyleSheetAvailable.bind(this));
     }
 

trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDetailsSidebarPanel.js

@@ -171 +171 @@
         newRuleButton.title = WebInspector.UIString("Add new rule");
         newRuleButton.addEventListener("click", this._newRuleButtonClicked.bind(this));
+        newRuleButton.addEventListener("contextmenu", this._newRuleButtonContextMenu.bind(this));
 
         this._filterBar = new WebInspector.FilterBar;
@@ -321 +322 @@
         if (this._selectedPanel && typeof this._selectedPanel.newRuleButtonClicked === "function")
             this._selectedPanel.newRuleButtonClicked();
+    }
+
+    _newRuleButtonContextMenu(event)
+    {
+        if (this._selectedPanel && typeof this._selectedPanel.newRuleButtonContextMenu === "function")
+            this._selectedPanel.newRuleButtonContextMenu(event);
     }
 

trunk/Source/WebInspectorUI/UserInterface/Views/RulesStyleDetailsPanel.js

@@ -398 +398 @@
     }
 
+    newRuleButtonContextMenu(event)
+    {
+        if (this.nodeStyles.node.isInUserAgentShadowTree())
+            return;
+
+        let styleSheets = WebInspector.cssStyleManager.styleSheets.filter(styleSheet => styleSheet.hasInfo() && !styleSheet.isInlineStyleTag() && !styleSheet.isInlineStyleAttributeStyleSheet());
+        if (!styleSheets.length)
+            return;
+
+        const justSelector = true;
+        let selector = this.nodeStyles.node.appropriateSelectorFor(justSelector);
+
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+
+        const handler = null;
+        const disabled = true;
+        contextMenu.appendItem(WebInspector.UIString("Available Style Sheets"), handler, disabled);
+
+        for (let styleSheet of styleSheets) {
+            contextMenu.appendItem(styleSheet.displayName, () => {
+                const text = "";
+                this.nodeStyles.addRule(selector, text, styleSheet.id);
+            });
+        }
+    }
+
     sectionForStyle(style)
     {

trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.js

@@ -61 +61 @@
 
         let addGlyphElement = useSVGSymbol("Images/Plus13.svg", "visual-style-selector-section-add-rule", WebInspector.UIString("Add new rule"));
-        addGlyphElement.addEventListener("click", this._addNewRule.bind(this));
+        addGlyphElement.addEventListener("click", this._addNewRuleClick.bind(this));
+        addGlyphElement.addEventListener("contextmenu", this._addNewRuleContextMenu.bind(this));
         controlElement.appendChild(addGlyphElement);
 
@@ -257 +258 @@
     }
 
-    _addNewRule(event)
+    _addNewRuleClick(event)
     {
         if (!this._nodeStyles || this._nodeStyles.node.isInUserAgentShadowTree())
@@ -271 +272 @@
         this._newInspectorRuleSelector = selector;
         this._nodeStyles.addRule(selector);
+    }
+
+    _addNewRuleContextMenu(event)
+    {
+        if (!this._nodeStyles || this._nodeStyles.node.isInUserAgentShadowTree())
+            return;
+
+        let styleSheets = WebInspector.cssStyleManager.styleSheets.filter(styleSheet => styleSheet.hasInfo() && !styleSheet.isInlineStyleTag() && !styleSheet.isInlineStyleAttributeStyleSheet());
+        if (!styleSheets.length)
+            return;
+
+        let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
+
+        const handler = null;
+        const disabled = true;
+        contextMenu.appendItem(WebInspector.UIString("Available Style Sheets"), handler, disabled);
+
+        for (let styleSheet of styleSheets) {
+            contextMenu.appendItem(styleSheet.displayName, () => {
+                const text = "";
+                this._nodeStyles.addRule(this.currentStyle().selectorText, text, styleSheet.id);
+            });
+        }
     }