Web Inspector: Styles Redesign: Command-S should save changes in matching CSS resource
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 18 Dec 2017 23:02:40 +0000 (23:02 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 18 Dec 2017 23:02:40 +0000 (23:02 +0000)
https://bugs.webkit.org/show_bug.cgi?id=180900

Reviewed by Timothy Hatcher.

When focused on a CSS selector, property name or value, pressing Command-S should save
the CSS resource to the file system.

* UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
(WI.SpreadsheetCSSStyleDeclarationSection.prototype.initialLayout):
(WI.SpreadsheetCSSStyleDeclarationSection.prototype._save):

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js

index 3a60562..6aae450 100644 (file)
@@ -1,3 +1,17 @@
+2017-12-18  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Styles Redesign: Command-S should save changes in matching CSS resource
+        https://bugs.webkit.org/show_bug.cgi?id=180900
+
+        Reviewed by Timothy Hatcher.
+
+        When focused on a CSS selector, property name or value, pressing Command-S should save
+        the CSS resource to the file system.
+
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.js:
+        (WI.SpreadsheetCSSStyleDeclarationSection.prototype.initialLayout):
+        (WI.SpreadsheetCSSStyleDeclarationSection.prototype._save):
+
 2017-12-18  Devin Rousso  <webkit@devinrousso.com>
 
         Web Inspector: Styles Redesign: add inline swatch for CSS variables
index 7c0c5e4..16306b3 100644 (file)
@@ -104,6 +104,9 @@ WI.SpreadsheetCSSStyleDeclarationSection = class SpreadsheetCSSStyleDeclarationS
         if (this._style.editable) {
             this.element.addEventListener("click", this._handleClick.bind(this));
             this.element.addEventListener("mousedown", this._handleMouseDown.bind(this));
+
+            new WI.KeyboardShortcut(WI.KeyboardShortcut.Modifier.CommandOrControl, "S", this._save.bind(this), this._element);
+            new WI.KeyboardShortcut(WI.KeyboardShortcut.Modifier.CommandOrControl | WI.KeyboardShortcut.Modifier.Shift, "S", this._save.bind(this), this._element);
         }
     }
 
@@ -377,6 +380,42 @@ WI.SpreadsheetCSSStyleDeclarationSection = class SpreadsheetCSSStyleDeclarationS
         return mediaElement;
     }
 
+    _save(event)
+    {
+        event.stop();
+
+        if (this._style.type !== WI.CSSStyleDeclaration.Type.Rule) {
+            // FIXME: Can't save CSS inside <style></style> <https://webkit.org/b/150357>
+            InspectorFrontendHost.beep();
+            return;
+        }
+
+        console.assert(this._style.ownerRule instanceof WI.CSSRule);
+        console.assert(this._style.ownerRule.sourceCodeLocation instanceof WI.SourceCodeLocation);
+
+        let sourceCode = this._style.ownerRule.sourceCodeLocation.sourceCode;
+        if (sourceCode.type !== WI.Resource.Type.Stylesheet) {
+            // FIXME: Can't save CSS inside style="" <https://webkit.org/b/150357>
+            InspectorFrontendHost.beep();
+            return;
+        }
+
+        let url;
+        if (sourceCode.urlComponents.scheme === "data") {
+            let mainResource = WI.frameResourceManager.mainFrame.mainResource;
+            if (mainResource.urlComponents.lastPathComponent.endsWith(".html"))
+                url = mainResource.url.replace(/\.html$/, "-data.css");
+            else {
+                let pathDirectory = mainResource.url.slice(0, -mainResource.urlComponents.lastPathComponent.length);
+                url = pathDirectory + "data.css";
+            }
+        } else
+            url = sourceCode.url;
+
+        const saveAs = event.shiftKey;
+        WI.saveDataToFile({url: url, content: sourceCode.content}, saveAs);
+    }
+
     _handleMouseDown(event)
     {
         this._wasFocused = this._propertiesEditor.isFocused();