Changeset 144449 in webkit

Timestamp:

Mar 1, 2013 6:12:38 AM (11 years ago)

Author:

apavlov@chromium.org

Message:

Web Inspector: [Styles] Implement navigation to UI locations of property names/values in the source code
​https://bugs.webkit.org/show_bug.cgi?id=105285

Reviewed by Vsevolod Vlasov.

Users can now Ctrl/Cmd-click CSS property names/values whose UI locations are found in
an external stylesheet/sass/other file. Inline stylesheets are not navigable,
since their start position is not detectable inside the surrounding HTML as of yet.

No new tests, a UI change.

• inspector/front-end/CSSStyleModel.js:

(WebInspector.CSSRule.prototype.isSourceNavigable): Whether the rule contains reliable source code information.
(WebInspector.CSSProperty.prototype.uiLocation): Returns a UILocation for the property name of value.

• inspector/front-end/StylesSidebarPane.js: Add navigation code.

(WebInspector.StylesSidebarPane.prototype._innerRebuildUpdate):
(WebInspector.StylePropertiesSection):

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/front-end/CSSStyleModel.js (modified) (2 diffs)
• inspector/front-end/StylesSidebarPane.js (modified) (7 diffs)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2013-03-01  Alexander Pavlov  <apavlov@chromium.org>
+
+        Web Inspector: [Styles] Implement navigation to UI locations of property names/values in the source code
+        https://bugs.webkit.org/show_bug.cgi?id=105285
+
+        Reviewed by Vsevolod Vlasov.
+
+        Users can now Ctrl/Cmd-click CSS property names/values whose UI locations are found in
+        an external stylesheet/sass/other file. Inline stylesheets are not navigable,
+        since their start position is not detectable inside the surrounding HTML as of yet.
+
+        No new tests, a UI change.
+
+        * inspector/front-end/CSSStyleModel.js:
+        (WebInspector.CSSRule.prototype.isSourceNavigable): Whether the rule contains reliable source code information.
+        (WebInspector.CSSProperty.prototype.uiLocation): Returns a UILocation for the property name of value.
+        * inspector/front-end/StylesSidebarPane.js: Add navigation code.
+        (WebInspector.StylesSidebarPane.prototype._innerRebuildUpdate):
+        (WebInspector.StylePropertiesSection):
+
 2013-03-01  Sheriff Bot  <webkit.review.bot@gmail.com>
 

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

@@ -883 +883 @@
     {
         return this.origin === "regular";
+    },
+
+    /**
+     * @return {boolean}
+     */
+    isSourceNavigable: function()
+    {
+        if (!this.sourceURL)
+            return false;
+        var resource = WebInspector.resourceTreeModel.resourceForURL(this.sourceURL);
+        return !!resource && resource.contentType() === WebInspector.resourceTypes.Stylesheet;
     }
 }
@@ -1071 +1082 @@
         WebInspector.cssModel._pendingCommandsMajorState.push(false);
         CSSAgent.toggleProperty(this.ownerStyle.id, this.index, disabled, callback.bind(this));
+    },
+
+    /**
+     * @param {boolean} forName
+     * @return {WebInspector.UILocation}
+     */
+    uiLocation: function(forName)
+    {
+        if (!this.range || !this.ownerStyle || !this.ownerStyle.parentRule || !this.ownerStyle.parentRule.sourceURL)
+            return null;
+
+        var range = this.range;
+        var line = forName ? range.startLine : range.endLine;
+        // End of range is exclusive, so subtract 1 from the end offset.
+        var column = forName ? range.startColumn : range.endColumn - 1;
+        var rawLocation = new WebInspector.CSSLocation(this.ownerStyle.parentRule.sourceURL, line, column);
+        return WebInspector.cssModel.rawLocationToUILocation(rawLocation);
     }
 }

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

@@ -377 +377 @@
         var anchorElement = this.sections[0].inheritedPropertiesSeparatorElement;
 
-        if (styles.computedStyle)        
+        if (styles.computedStyle)
             this.sections[0][0].rebuildComputedTrace(this.sections[0]);
 
@@ -895 +895 @@
         if (this.rule.isUserAgent || this.rule.isUser)
             this.editable = false;
+        else
+            this.navigable = this.rule.isSourceNavigable();
         this.titleElement.addStyleClass("styles-selector");
     }
@@ -909 +911 @@
     if (isInherited)
         this.element.addStyleClass("show-inherited"); // This one is related to inherited rules, not computed style.
+
+    if (this.navigable)
+        this.element.addStyleClass("navigable");
 
     if (!this.editable)
@@ -2046 +2051 @@
                 return;
 
+            newStyle.parentRule = this.style.parentRule;
             this.style = newStyle;
             this._styleRule.style = newStyle;
@@ -2159 +2165 @@
         }
 
+        if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(event) && this.section().navigable) {
+            this._navigateToSource(event.target);
+            return;
+        }
+
         this.startEditing(event.target);
+    },
+
+    /**
+     * @param {Element} element
+     */
+    _navigateToSource: function(element)
+    {
+        console.assert(this.section().navigable);
+        var propertyNameClicked = element === this.nameElement;
+        var uiLocation = this.property.uiLocation(propertyNameClicked);
+        if (!uiLocation)
+            return;
+        WebInspector.showPanel("scripts").showUISourceCode(uiLocation.uiSourceCode, uiLocation.lineNumber);
     },
 
@@ -2581 +2605 @@
             if (this._newProperty)
                 this._newPropertyInStyle = true;
+            newStyle.parentRule = this.style.parentRule;
             this.style = newStyle;
             this.property = newStyle.propertyAt(this.property.index);
@@ -2674 +2699 @@
             this._sidebarPane.applyStyleText(this._sidebarPane.nameElement.textContent + ": " + this._sidebarPane.valueElement.textContent, false, false, false);
         }
-    
+
         // Handle numeric value increment/decrement only at this point.
         if (!this._isEditingName && WebInspector.handleElementValueModifications(event, this._sidebarPane.valueElement, finishHandler.bind(this), this._isValueSuggestion.bind(this)))