Modified: trunk/Source/WebCore/ChangeLog (144448 => 144449)
--- trunk/Source/WebCore/ChangeLog 2013-03-01 14:02:36 UTC (rev 144448)
+++ trunk/Source/WebCore/ChangeLog 2013-03-01 14:12:38 UTC (rev 144449)
@@ -1,3 +1,23 @@
+2013-03-01 Alexander Pavlov <[email protected]>
+
+ 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 <[email protected]>
Unreviewed, rolling out r144443.
Modified: trunk/Source/WebCore/inspector/front-end/CSSStyleModel.js (144448 => 144449)
--- trunk/Source/WebCore/inspector/front-end/CSSStyleModel.js 2013-03-01 14:02:36 UTC (rev 144448)
+++ trunk/Source/WebCore/inspector/front-end/CSSStyleModel.js 2013-03-01 14:12:38 UTC (rev 144449)
@@ -882,6 +882,17 @@
get isRegular()
{
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;
}
}
@@ -1070,6 +1081,23 @@
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);
}
}
Modified: trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js (144448 => 144449)
--- trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js 2013-03-01 14:02:36 UTC (rev 144448)
+++ trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js 2013-03-01 14:12:38 UTC (rev 144449)
@@ -376,7 +376,7 @@
this.sections[0] = this._rebuildSectionsForStyleRules(styleRules, usedProperties, 0, null);
var anchorElement = this.sections[0].inheritedPropertiesSeparatorElement;
- if (styles.computedStyle)
+ if (styles.computedStyle)
this.sections[0][0].rebuildComputedTrace(this.sections[0]);
for (var i = 0; i < styles.pseudoElements.length; ++i) {
@@ -894,6 +894,8 @@
// Prevent editing the user agent and user rules.
if (this.rule.isUserAgent || this.rule.isUser)
this.editable = false;
+ else
+ this.navigable = this.rule.isSourceNavigable();
this.titleElement.addStyleClass("styles-selector");
}
@@ -909,6 +911,9 @@
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)
this.element.addStyleClass("read-only");
}
@@ -2045,6 +2050,7 @@
if (!newStyle)
return;
+ newStyle.parentRule = this.style.parentRule;
this.style = newStyle;
this._styleRule.style = newStyle;
@@ -2158,9 +2164,27 @@
return;
}
+ 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);
+ },
+
_isNameElement: function(element)
{
return element.enclosingNodeOrSelfWithClass("webkit-css-property") === this.nameElement;
@@ -2580,6 +2604,7 @@
if (this._newProperty)
this._newPropertyInStyle = true;
+ newStyle.parentRule = this.style.parentRule;
this.style = newStyle;
this.property = newStyle.propertyAt(this.property.index);
this._styleRule.style = this.style;
@@ -2673,7 +2698,7 @@
// Synthesize property text disregarding any comments, custom whitespace etc.
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)))
return true;
