Changeset 132321 in webkit

Timestamp:

Oct 24, 2012, 12:34:24 AM (12 years ago)

Author:

[email protected]

Message:

Web Inspector: Implement CSS reload upon related SASS resource saving
​https://bugs.webkit.org/show_bug.cgi?id=98024

Reviewed by Vsevolod Vlasov.

SASS-generated debug info in CSS is parsed to find out which SASS files contributed to this stylesheet.
Upon SASS file save in the Sources panel, all affected external CSS stylesheets are reloaded to update
the page styles (presuming that SASS is running in the "watch" mode during the development cycle).

• English.lproj/localizedStrings.js:
• inspector/front-end/SASSSourceMapping.js:

(WebInspector.SASSSourceMapping):
(WebInspector.SASSSourceMapping.prototype._fileSaveFinished.callback):
(WebInspector.SASSSourceMapping.prototype._reloadCSS):
(_bindUISourceCode):
(_addCSSURLforSASSURL):

• inspector/front-end/Settings.js:
• inspector/front-end/SettingsScreen.js:

(WebInspector.GenericSettingsTab):

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• English.lproj/localizedStrings.js (modified) (2 diffs)
• inspector/front-end/SASSSourceMapping.js (modified) (3 diffs)
• inspector/front-end/Settings.js (modified) (1 diff)
• inspector/front-end/SettingsScreen.js (modified) (2 diffs)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2012-10-24  Alexander Pavlov  <[email protected]>
+
+        Web Inspector: Implement CSS reload upon related SASS resource saving
+        https://bugs.webkit.org/show_bug.cgi?id=98024
+
+        Reviewed by Vsevolod Vlasov.
+
+        SASS-generated debug info in CSS is parsed to find out which SASS files contributed to this stylesheet.
+        Upon SASS file save in the Sources panel, all affected external CSS stylesheets are reloaded to update
+        the page styles (presuming that SASS is running in the "watch" mode during the development cycle).
+
+        * English.lproj/localizedStrings.js:
+        * inspector/front-end/SASSSourceMapping.js:
+        (WebInspector.SASSSourceMapping):
+        (WebInspector.SASSSourceMapping.prototype._fileSaveFinished.callback):
+        (WebInspector.SASSSourceMapping.prototype._reloadCSS):
+        (_bindUISourceCode):
+        (_addCSSURLforSASSURL):
+        * inspector/front-end/Settings.js:
+        * inspector/front-end/SettingsScreen.js:
+        (WebInspector.GenericSettingsTab):
+
 2012-10-23  Yury Semikhatsky  <[email protected]>
 

trunk/Source/WebCore/English.lproj/localizedStrings.js

@@ -79 +79 @@
 localizedStrings["Audit Present State"] = "Audit Present State";
 localizedStrings["Audits"] = "Audits";
+localizedStrings["Auto-reload CSS upon SASS save"] = "Auto-reload CSS upon SASS save";
 localizedStrings["Average"] = "Average";
 localizedStrings["Blocking"] = "Blocking";
@@ -412 +413 @@
 localizedStrings["Timeline"] = "Timeline";
 localizedStrings["Timeout"] = "Timeout";
+localizedStrings["Timeout (ms)"] = "Timeout (ms)";
 localizedStrings["Timer Fired"] = "Timer Fired";
 localizedStrings["Timer ID"] = "Timer ID";

trunk/Source/WebCore/inspector/front-end/SASSSourceMapping.js

@@ -38 +38 @@
     this._workspace = workspace;
     this._uiLocations = {};
+    this._cssURLsForSASSURL = {};
+    this._timeoutForURL = {};
     WebInspector.resourceTreeModel.addEventListener(WebInspector.ResourceTreeModel.EventTypes.ResourceAdded, this._resourceAdded, this);
+    WebInspector.fileManager.addEventListener(WebInspector.FileManager.EventTypes.SavedURL, this._fileSaveFinished, this);
     this._workspace.addEventListener(WebInspector.Workspace.Events.ProjectWillReset, this._reset, this);
 }
@@ -56 +59 @@
 
         populateFrame.call(this, WebInspector.resourceTreeModel.mainFrame);
+    },
+
+    /**
+     * @param {WebInspector.Event} event
+     */
+    _fileSaveFinished: function(event)
+    {
+        var sassURL = /** @type {string} */ event.data;
+        function callback()
+        {
+            delete this._timeoutForURL[sassURL];
+            var cssURLs = this._cssURLsForSASSURL[sassURL];
+            if (!cssURLs)
+                return;
+            for (var i = 0; i < cssURLs.length; ++i)
+                this._reloadCSS(cssURLs[i]);
+        }
+
+        var timer = this._timeoutForURL[sassURL];
+        if (timer) {
+            clearTimeout(timer);
+            delete this._timeoutForURL[sassURL];
+        }
+        if (!WebInspector.settings.cssReloadEnabled.get() || !this._cssURLsForSASSURL[sassURL])
+            return;
+        var timeout = WebInspector.settings.cssReloadTimeout.get();
+        if (timeout && isFinite(timeout))
+            this._timeoutForURL[sassURL] = setTimeout(callback.bind(this), Number(timeout));
+    },
+
+    _reloadCSS: function(url)
+    {
+        var uiSourceCode = this._workspace.uiSourceCodeForURL(url);
+        if (!uiSourceCode)
+            return;
+        var newContent = InspectorFrontendHost.loadResourceSynchronously(url);
+        uiSourceCode.addRevision(newContent);
     },
 
@@ -122 +162 @@
         var rawLocationString = rawURL + ":" + (rawLine + 1);  // Next line after mapping metainfo
         this._uiLocations[rawLocationString] = new WebInspector.UILocation(uiSourceCode, line - 1, 0);
+        this._addCSSURLforSASSURL(rawURL, url);
+    },
+
+    /**
+     * @param {string} cssURL
+     * @param {string} sassURL
+     */
+    _addCSSURLforSASSURL: function(cssURL, sassURL)
+    {
+        var cssURLs;
+        if (this._cssURLsForSASSURL.hasOwnProperty(sassURL))
+            cssURLs = this._cssURLsForSASSURL[sassURL];
+        else {
+            cssURLs = [];
+            this._cssURLsForSASSURL[sassURL] = cssURLs;
+        }
+        if (cssURLs.indexOf(cssURL) === -1)
+            cssURLs.push(cssURL);
     },
 

trunk/Source/WebCore/inspector/front-end/Settings.js

@@ -106 +106 @@
     this.textEditorIndent = this.createSetting("textEditorIndent", "    ");
     this.lastDockState = this.createSetting("lastDockState", "");
+    this.cssReloadEnabled = this.createSetting("cssReloadEnabled", false);
+    this.cssReloadTimeout = this.createSetting("cssReloadTimeout", 1000);
 
     // If there are too many breakpoints in a storage, it is likely due to a recent bug that caused

trunk/Source/WebCore/inspector/front-end/SettingsScreen.js

@@ -277 +277 @@
     p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Search in content scripts"), WebInspector.settings.searchInContentScripts));
     p.appendChild(this._createCheckboxSetting(WebInspector.UIString("Enable source maps"), WebInspector.settings.sourceMapsEnabled));
+    if (WebInspector.experimentsSettings.isEnabled("sass"))
+        p.appendChild(this._createCSSAutoReloadControls());
     p.appendChild(this._createSelectSetting(WebInspector.UIString("Indentation"), [
             [ WebInspector.UIString("2 spaces"), WebInspector.TextEditorModel.Indent.TwoSpaces ],
@@ -332 +334 @@
         // We need to manually update the checkbox state, since enabling JavaScript in the page can actually uncover the "forbidden" state.
         PageAgent.setScriptExecutionDisabled(WebInspector.settings.javaScriptDisabled.get(), this._updateScriptDisabledCheckbox.bind(this));
+    },
+
+    _createCSSAutoReloadControls: function()
+    {
+        var fragment = document.createDocumentFragment();
+        var labelElement = fragment.createChild("label");
+        var checkboxElement = labelElement.createChild("input");
+        checkboxElement.type = "checkbox";
+        checkboxElement.checked = WebInspector.settings.cssReloadEnabled.get();
+        checkboxElement.addEventListener("click", checkboxClicked, false);
+        labelElement.appendChild(document.createTextNode(WebInspector.UIString("Auto-reload CSS upon SASS save")));
+
+        var fieldsetElement = fragment.createChild("fieldset");
+        fieldsetElement.disabled = !checkboxElement.checked;
+        var p = fieldsetElement.createChild("p");
+        p.appendChild(document.createTextNode(WebInspector.UIString("Timeout (ms)")));
+        p.appendChild(document.createTextNode(" "));
+        var timeoutInput = p.createChild("input");
+        timeoutInput.value = WebInspector.settings.cssReloadTimeout.get();
+        timeoutInput.style.width = "60px";
+        timeoutInput.maxLength = 8;
+        timeoutInput.addEventListener("blur", blurListener, false);
+        return fragment;
+
+        function checkboxClicked()
+        {
+            var reloadEnabled = checkboxElement.checked;
+            WebInspector.settings.cssReloadEnabled.set(reloadEnabled);
+            fieldsetElement.disabled = !reloadEnabled;
+        }
+
+        function blurListener()
+        {
+            var value = timeoutInput.value;
+            if (!isFinite(value) || value <= 0) {
+                timeoutInput.value = WebInspector.settings.cssReloadTimeout.get();
+                return;
+            }
+            WebInspector.settings.cssReloadTimeout.set(Number(value));
+        }
     },