Modified: trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js (143206 => 143207)
--- trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js 2013-02-18 13:45:36 UTC (rev 143206)
+++ trunk/Source/WebCore/inspector/front-end/StylesSidebarPane.js 2013-02-18 14:01:54 UTC (rev 143207)
@@ -1040,7 +1040,7 @@
var isShorthand = !!WebInspector.CSSMetadata.cssPropertiesMetainfo.longhands(property.name);
var inherited = this.isPropertyInherited(property.name);
var overloaded = property.inactive || this.isPropertyOverloaded(property.name);
- var item = new WebInspector.StylePropertyTreeElement(this, this._parentPane, this.styleRule, style, property, isShorthand, inherited, overloaded);
+ var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, style, property, isShorthand, inherited, overloaded);
this.propertiesTreeOutline.appendChild(item);
}
return;
@@ -1074,7 +1074,7 @@
// Generate synthetic shorthand we have a value for.
var shorthandProperty = new WebInspector.CSSProperty(style, style.allProperties.length, shorthand, style.shorthandValue(shorthand), "", "style", true, true, undefined);
var overloaded = property.inactive || this.isPropertyOverloaded(property.name, true);
- var item = new WebInspector.StylePropertyTreeElement(this, this._parentPane, this.styleRule, style, shorthandProperty, /* isShorthand */ true, /* inherited */ false, overloaded);
+ var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, style, shorthandProperty, /* isShorthand */ true, /* inherited */ false, overloaded);
this.propertiesTreeOutline.appendChild(item);
generatedShorthands[shorthand] = shorthandProperty;
shorthandPropertyAvailable = true;
@@ -1084,7 +1084,7 @@
var inherited = this.isPropertyInherited(property.name);
var overloaded = property.inactive || this.isPropertyOverloaded(property.name, isShorthand);
- var item = new WebInspector.StylePropertyTreeElement(this, this._parentPane, this.styleRule, style, property, isShorthand, inherited, overloaded);
+ var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, style, property, isShorthand, inherited, overloaded);
this.propertiesTreeOutline.appendChild(item);
}
},
@@ -1158,7 +1158,7 @@
{
var style = this.styleRule.style;
var property = style.newBlankProperty(index);
- var item = new WebInspector.StylePropertyTreeElement(this, this._parentPane, this.styleRule, style, property, false, false, false);
+ var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, style, property, false, false, false);
index = property.index;
this.propertiesTreeOutline.insertChild(item, index);
item.listItemElement.textContent = "";
@@ -1347,16 +1347,16 @@
/**
* @constructor
* @extends {WebInspector.PropertiesSection}
- * @param {!WebInspector.StylesSidebarPane} parentPane
+ * @param {!WebInspector.StylesSidebarPane} stylesPane
* @param {!Object} styleRule
* @param {!Object.<string, boolean>} usedProperties
*/
-WebInspector.ComputedStylePropertiesSection = function(parentPane, styleRule, usedProperties)
+WebInspector.ComputedStylePropertiesSection = function(stylesPane, styleRule, usedProperties)
{
WebInspector.PropertiesSection.call(this, "");
this.headerElement.addStyleClass("hidden");
this.element.className = "styles-section monospace first-styles-section read-only computed-style";
- this._parentPane = parentPane;
+ this._stylesPane = stylesPane;
this.styleRule = styleRule;
this._usedProperties = usedProperties;
this._alwaysShowComputedProperties = { "display": true, "height": true, "width": true };
@@ -1366,11 +1366,6 @@
}
WebInspector.ComputedStylePropertiesSection.prototype = {
- get pane()
- {
- return this._parentPane;
- },
-
collapse: function(dontRememberState)
{
// Overriding with empty body.
@@ -1415,7 +1410,7 @@
for (var i = 0; i < uniqueProperties.length; ++i) {
var property = uniqueProperties[i];
var inherited = this._isPropertyInherited(property.name);
- var item = new WebInspector.StylePropertyTreeElement(this, this._parentPane, this.styleRule, style, property, false, inherited, false);
+ var item = new WebInspector.ComputedStylePropertyTreeElement(this._stylesPane, this.styleRule, style, property, inherited);
this.propertiesTreeOutline.appendChild(item);
this._propertyTreeElements[property.name] = item;
}
@@ -1470,10 +1465,12 @@
/**
* @constructor
* @extends {WebInspector.StylePropertiesSection}
+ * @param {WebInspector.StylesSidebarPane} stylesPane
+ * @param {string} defaultSelectorText
*/
-WebInspector.BlankStylePropertiesSection = function(parentPane, defaultSelectorText)
+WebInspector.BlankStylePropertiesSection = function(stylesPane, defaultSelectorText)
{
- WebInspector.StylePropertiesSection.call(this, parentPane, {selectorText: defaultSelectorText, rule: {isViaInspector: true}}, true, false, false);
+ WebInspector.StylePropertiesSection.call(this, stylesPane, {selectorText: defaultSelectorText, rule: {isViaInspector: true}}, true, false, false);
this.element.addStyleClass("blank-section");
}
@@ -1549,33 +1546,44 @@
/**
* @constructor
* @extends {TreeElement}
- * @param {WebInspector.StylePropertiesSection|WebInspector.ComputedStylePropertiesSection} section
- * @param {?WebInspector.StylesSidebarPane} parentPane
* @param {Object} styleRule
* @param {WebInspector.CSSStyleDeclaration} style
* @param {WebInspector.CSSProperty} property
- * @param {boolean} isShorthand
* @param {boolean} inherited
* @param {boolean} overloaded
+ * @param {boolean} hasChildren
*/
-WebInspector.StylePropertyTreeElement = function(section, parentPane, styleRule, style, property, isShorthand, inherited, overloaded)
+WebInspector.StylePropertyTreeElementBase = function(styleRule, style, property, inherited, overloaded, hasChildren)
{
- this.section = section;
- this._parentPane = parentPane;
this._styleRule = styleRule;
this.style = style;
this.property = property;
- this.isShorthand = isShorthand;
this._inherited = inherited;
this._overloaded = overloaded;
// Pass an empty title, the title gets made later in onattach.
- TreeElement.call(this, "", null, isShorthand);
+ TreeElement.call(this, "", null, hasChildren);
this.selectable = false;
}
-WebInspector.StylePropertyTreeElement.prototype = {
+WebInspector.StylePropertyTreeElementBase.prototype = {
+ /**
+ * @return {?WebInspector.DOMNode}
+ */
+ node: function()
+ {
+ return null; // Overridden by ancestors.
+ },
+
+ /**
+ * @return {?WebInspector.StylesSidebarPane}
+ */
+ editablePane: function()
+ {
+ return null; // Overridden by ancestors.
+ },
+
get inherited()
{
return this._inherited;
@@ -1652,44 +1660,14 @@
onattach: function()
{
this.updateTitle();
- this.listItemElement.addEventListener("mousedown", this._mouseDown.bind(this));
- this.listItemElement.addEventListener("mouseup", this._resetMouseDownElement.bind(this));
- this.listItemElement.addEventListener("click", this._mouseClick.bind(this));
},
- _mouseDown: function(event)
- {
- if (this._parentPane) {
- this._parentPane._mouseDownTreeElement = this;
- this._parentPane._mouseDownTreeElementIsName = this._isNameElement(event.target);
- this._parentPane._mouseDownTreeElementIsValue = this._isValueElement(event.target);
- }
- },
-
- _resetMouseDownElement: function()
- {
- if (this._parentPane) {
- delete this._parentPane._mouseDownTreeElement;
- delete this._parentPane._mouseDownTreeElementIsName;
- delete this._parentPane._mouseDownTreeElementIsValue;
- }
- },
-
updateTitle: function()
{
var value = this.value;
this.updateState();
- var enabledCheckboxElement;
- if (this.parsedOk) {
- enabledCheckboxElement = document.createElement("input");
- enabledCheckboxElement.className = "enabled-button";
- enabledCheckboxElement.type = "checkbox";
- enabledCheckboxElement.checked = !this.disabled;
- enabledCheckboxElement.addEventListener("click", this.toggleEnabled.bind(this), false);
- }
-
var nameElement = document.createElement("span");
nameElement.className = "webkit-css-property";
nameElement.textContent = this.name;
@@ -1739,8 +1717,8 @@
container.appendChild(document.createTextNode("url("));
if (self._styleRule.sourceURL)
hrefUrl = WebInspector.ParsedURL.completeURL(self._styleRule.sourceURL, hrefUrl);
- else if (self._parentPane.node)
- hrefUrl = self._parentPane.node.resolveURL(hrefUrl);
+ else if (self.node())
+ hrefUrl = self.node().resolveURL(hrefUrl);
var hasResource = !!WebInspector.resourceForURL(hrefUrl);
// FIXME: WebInspector.linkifyURLAsNode() should really use baseURI.
container.appendChild(WebInspector.linkifyURLAsNode(hrefUrl, url, undefined, !hasResource));
@@ -1752,13 +1730,12 @@
{
var color = WebInspector.Color.parse(text);
- // We can be called with valid non-color values of |text| (like 'none' from border style)
- if (!color)
+ // We can be called with valid non-color values of |text| (like 'none' from border style)
+ if (!color)
return document.createTextNode(text);
-
+
var format = getFormat();
- var hasSpectrum = self._parentPane;
- var spectrumHelper = hasSpectrum ? self._parentPane._spectrumHelper : null;
+ var spectrumHelper = self.editablePane() && self.editablePane()._spectrumHelper;
var spectrum = spectrumHelper ? spectrumHelper.spectrum() : null;
var colorSwatch = new WebInspector.ColorSwatch();
@@ -1787,7 +1764,7 @@
spectrum.removeEventListener(WebInspector.Spectrum.Events.ColorChanged, spectrumChanged);
spectrumHelper.removeEventListener(WebInspector.SpectrumPopupHelper.Events.Hidden, spectrumHidden);
- delete self._parentPane._isEditingStyle;
+ delete self.editablePane()._isEditingStyle;
delete self.originalPropertyText;
}
@@ -1808,7 +1785,7 @@
if (visible) {
spectrum.displayText = color.toString(format);
self.originalPropertyText = self.property.propertyText;
- self._parentPane._isEditingStyle = true;
+ self.editablePane()._isEditingStyle = true;
spectrum.addEventListener(WebInspector.Spectrum.Events.ColorChanged, spectrumChanged);
spectrumHelper.addEventListener(WebInspector.SpectrumPopupHelper.Events.Hidden, spectrumHidden);
@@ -1917,9 +1894,6 @@
if (!this.treeOutline)
return;
- // Append the checkbox for root elements of an editable section.
- if (enabledCheckboxElement && this.treeOutline.section && this.parent.root && !this.section.computedStyle)
- this.listItemElement.appendChild(enabledCheckboxElement);
this.listItemElement.appendChild(nameElement);
this.listItemElement.appendChild(document.createTextNode(": "));
this.listItemElement.appendChild(this._expandElement);
@@ -1938,10 +1912,118 @@
this.listItemElement.addStyleClass("inactive");
},
+ updateState: function()
+ {
+ if (!this.listItemElement)
+ return;
+
+ if (this.style.isPropertyImplicit(this.name) || this.value === "initial")
+ this.listItemElement.addStyleClass("implicit");
+ else
+ this.listItemElement.removeStyleClass("implicit");
+
+ if (this.inherited)
+ this.listItemElement.addStyleClass("inherited");
+ else
+ this.listItemElement.removeStyleClass("inherited");
+
+ if (this.overloaded)
+ this.listItemElement.addStyleClass("overloaded");
+ else
+ this.listItemElement.removeStyleClass("overloaded");
+
+ if (this.disabled)
+ this.listItemElement.addStyleClass("disabled");
+ else
+ this.listItemElement.removeStyleClass("disabled");
+ },
+
+ __proto__: TreeElement.prototype
+}
+
+/**
+ * @constructor
+ * @extends {WebInspector.StylePropertyTreeElementBase}
+ * @param {WebInspector.StylesSidebarPane} stylesPane
+ * @param {Object} styleRule
+ * @param {WebInspector.CSSStyleDeclaration} style
+ * @param {WebInspector.CSSProperty} property
+ * @param {boolean} inherited
+ */
+WebInspector.ComputedStylePropertyTreeElement = function(stylesPane, styleRule, style, property, inherited)
+{
+ WebInspector.StylePropertyTreeElementBase.call(this, styleRule, style, property, inherited, false, false);
+ this._stylesPane = stylesPane;
+}
+
+WebInspector.ComputedStylePropertyTreeElement.prototype = {
+ /**
+ * @return {?WebInspector.DOMNode}
+ */
+ node: function()
+ {
+ return this._stylesPane.node;
+ },
+
+ /**
+ * @return {?WebInspector.StylesSidebarPane}
+ */
+ editablePane: function()
+ {
+ return null;
+ },
+
+ __proto__: WebInspector.StylePropertyTreeElementBase.prototype
+}
+
+/**
+ * @constructor
+ * @extends {WebInspector.StylePropertyTreeElementBase}
+ * @param {?WebInspector.StylesSidebarPane} stylesPane
+ * @param {Object} styleRule
+ * @param {WebInspector.CSSStyleDeclaration} style
+ * @param {WebInspector.CSSProperty} property
+ * @param {boolean} isShorthand
+ * @param {boolean} inherited
+ * @param {boolean} overloaded
+ */
+WebInspector.StylePropertyTreeElement = function(stylesPane, styleRule, style, property, isShorthand, inherited, overloaded)
+{
+ WebInspector.StylePropertyTreeElementBase.call(this, styleRule, style, property, inherited, overloaded, isShorthand);
+ this._parentPane = stylesPane;
+ this.isShorthand = isShorthand;
+}
+
+WebInspector.StylePropertyTreeElement.prototype = {
+ /**
+ * @return {?WebInspector.DOMNode}
+ */
+ node: function()
+ {
+ return this._parentPane.node;
+ },
+
+ /**
+ * @return {?WebInspector.StylesSidebarPane}
+ */
+ editablePane: function()
+ {
+ return this._parentPane;
+ },
+
+ /**
+ * @return {WebInspector.StylePropertiesSection}
+ */
+ section: function()
+ {
+ return this.treeOutline && this.treeOutline.section;
+ },
+
_updatePane: function(userCallback)
{
- if (this.treeOutline && this.treeOutline.section && this.treeOutline.section.pane)
- this.treeOutline.section.pane._refreshUpdate(this.treeOutline.section, false, userCallback);
+ var section = this.section();
+ if (section && section.pane)
+ section.pane._refreshUpdate(section, false, userCallback);
else {
if (userCallback)
userCallback();
@@ -1960,8 +2042,9 @@
this.style = newStyle;
this._styleRule.style = newStyle;
- if (this.treeOutline.section && this.treeOutline.section.pane)
- this.treeOutline.section.pane.dispatchEventToListeners("style property toggled");
+ var section = this.section();
+ if (section && section.pane)
+ section.pane.dispatchEventToListeners("style property toggled");
this._updatePane();
@@ -1973,32 +2056,6 @@
event.consume();
},
- updateState: function()
- {
- if (!this.listItemElement)
- return;
-
- if (this.style.isPropertyImplicit(this.name) || this.value === "initial")
- this.listItemElement.addStyleClass("implicit");
- else
- this.listItemElement.removeStyleClass("implicit");
-
- if (this.inherited)
- this.listItemElement.addStyleClass("inherited");
- else
- this.listItemElement.removeStyleClass("inherited");
-
- if (this.overloaded)
- this.listItemElement.addStyleClass("overloaded");
- else
- this.listItemElement.removeStyleClass("overloaded");
-
- if (this.disabled)
- this.listItemElement.addStyleClass("disabled");
- else
- this.listItemElement.removeStyleClass("disabled");
- },
-
onpopulate: function()
{
// Only populate once and if this property is a shorthand.
@@ -2009,16 +2066,17 @@
for (var i = 0; i < longhandProperties.length; ++i) {
var name = longhandProperties[i].name;
- if (this.treeOutline.section) {
- var inherited = this.treeOutline.section.isPropertyInherited(name);
- var overloaded = this.treeOutline.section.isPropertyOverloaded(name);
+ var section = this.section();
+ if (section) {
+ var inherited = section.isPropertyInherited(name);
+ var overloaded = section.isPropertyOverloaded(name);
}
var liveProperty = this.style.getLiveProperty(name);
if (!liveProperty)
continue;
- var item = new WebInspector.StylePropertyTreeElement(this.section, this._parentPane, this._styleRule, this.style, liveProperty, false, inherited, overloaded);
+ var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this._styleRule, this.style, liveProperty, false, inherited, overloaded);
this.appendChild(item);
}
},
@@ -2035,6 +2093,47 @@
this.listItemElement.insertBefore(this.nameElement, this.listItemElement.firstChild);
},
+ onattach: function()
+ {
+ WebInspector.StylePropertyTreeElementBase.prototype.onattach.call(this);
+
+ this.listItemElement.addEventListener("mousedown", this._mouseDown.bind(this));
+ this.listItemElement.addEventListener("mouseup", this._resetMouseDownElement.bind(this));
+ this.listItemElement.addEventListener("click", this._mouseClick.bind(this));
+ },
+
+ _mouseDown: function(event)
+ {
+ if (this._parentPane) {
+ this._parentPane._mouseDownTreeElement = this;
+ this._parentPane._mouseDownTreeElementIsName = this._isNameElement(event.target);
+ this._parentPane._mouseDownTreeElementIsValue = this._isValueElement(event.target);
+ }
+ },
+
+ _resetMouseDownElement: function()
+ {
+ if (this._parentPane) {
+ delete this._parentPane._mouseDownTreeElement;
+ delete this._parentPane._mouseDownTreeElementIsName;
+ delete this._parentPane._mouseDownTreeElementIsValue;
+ }
+ },
+
+ updateTitle: function()
+ {
+ WebInspector.StylePropertyTreeElementBase.prototype.updateTitle.call(this);
+
+ if (this.parsedOk && this.section() && this.parent.root) {
+ var enabledCheckboxElement = document.createElement("input");
+ enabledCheckboxElement.className = "enabled-button";
+ enabledCheckboxElement.type = "checkbox";
+ enabledCheckboxElement.checked = !this.disabled;
+ enabledCheckboxElement.addEventListener("click", this.toggleEnabled.bind(this), false);
+ this.listItemElement.appendChild(enabledCheckboxElement);
+ }
+ },
+
_mouseClick: function(event)
{
if (!window.getSelection().isCollapsed)
@@ -2043,12 +2142,13 @@
event.consume(true);
if (event.target === this.listItemElement) {
- if (!this.section.editable)
+ var section = this.section();
+ if (!section || !section.editable)
return;
- if (this.section._checkWillCancelEditing())
+ if (section._checkWillCancelEditing())
return;
- this.section.addNewBlankProperty(this.property.index + 1).startEditing();
+ section.addNewBlankProperty(this.property.index + 1).startEditing();
return;
}
@@ -2074,7 +2174,8 @@
if (selectElement === this._expandElement)
return;
- if (this.treeOutline.section && !this.treeOutline.section.editable)
+ var section = this.section();
+ if (section && !section.editable)
return;
if (!selectElement)
@@ -2330,8 +2431,9 @@
var isDataPasted = "originalName" in context;
var isDirtyViaPaste = isDataPasted && (this.nameElement.textContent !== context.originalName || this.valueElement.textContent !== context.originalValue);
var shouldCommitNewProperty = this._newProperty && (moveToOther || (!moveDirection && !isEditingName) || (isEditingName && blankInput));
+ var section = this.section();
if (((userInput !== previousContent || isDirtyViaPaste) && !this._newProperty) || shouldCommitNewProperty) {
- this.treeOutline.section._afterUpdate = moveToNextCallback.bind(this, this._newProperty, !blankInput, this.treeOutline.section);
+ section._afterUpdate = moveToNextCallback.bind(this, this._newProperty, !blankInput, section);
var propertyText;
if (blankInput || (this._newProperty && /^\s*$/.test(this.valueElement.textContent)))
propertyText = "";
@@ -2345,7 +2447,7 @@
} else {
if (!isDataPasted && !this._newProperty)
this.updateTitle();
- moveToNextCallback.call(this, this._newProperty, false, this.treeOutline.section);
+ moveToNextCallback.call(this, this._newProperty, false, section);
}
// The Callback to start editing the next/previous property/selector.
@@ -2445,7 +2547,7 @@
if (!this.treeOutline)
return;
- var section = this.treeOutline.section;
+ var section = this.section();
styleText = styleText.replace(/\s/g, " ").trim(); // Replace with whitespace.
var styleTextLength = styleText.length;
if (!styleTextLength && updateInterface && !isRevert && this._newProperty && !this._hasBeenModifiedIncrementally()) {
@@ -2479,7 +2581,7 @@
if (section && section.pane)
section.pane.dispatchEventToListeners("style edited");
- if (updateInterface && currentNode === section.pane.node) {
+ if (updateInterface && currentNode === this.node()) {
this._updatePane(userCallback);
return;
}
@@ -2502,12 +2604,10 @@
isEventWithinDisclosureTriangle: function(event)
{
- if (!this.section.computedStyle)
- return event.target === this._expandElement;
- return TreeElement.prototype.isEventWithinDisclosureTriangle.call(this, event);
+ return event.target === this._expandElement;
},
- __proto__: TreeElement.prototype
+ __proto__: WebInspector.StylePropertyTreeElementBase.prototype
}
/**
