chrome/tools/test/reference_build/chrome_linux/resources/inspector/StylesSidebarPane.js - Issue 177049: On Linux, move the passing of filedescriptors to a dedicated socketpair().

Unified Diff: chrome/tools/test/reference_build/chrome_linux/resources/inspector/StylesSidebarPane.js

Issue 177049: On Linux, move the passing of filedescriptors to a dedicated socketpair(). (Closed)

Patch Set: Removed *.d files from reference build Created 11 years, 4 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

« no previous file with comments | « chrome/tools/test/reference_build/chrome_linux/resources/inspector/StoragePanel.js ('k') | chrome/tools/test/reference_build/chrome_linux/resources/inspector/SummaryBar.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: chrome/tools/test/reference_build/chrome_linux/resources/inspector/StylesSidebarPane.js

diff --git a/chrome/tools/test/reference_build/chrome_linux/resources/inspector/StylesSidebarPane.js b/chrome/tools/test/reference_build/chrome_linux/resources/inspector/StylesSidebarPane.js

index c30444ba08efa382dbe6b00eeea6c51bebfd87fa..c652f9a4673f20c38bf96bfc0f58dffc490227d0 100644

--- a/chrome/tools/test/reference_build/chrome_linux/resources/inspector/StylesSidebarPane.js

+++ b/chrome/tools/test/reference_build/chrome_linux/resources/inspector/StylesSidebarPane.js

@@ -1,5 +1,6 @@

* Redistribution and use in source and binary forms, with or without

* modification, are permitted provided that the following conditions

@@ -62,14 +63,33 @@ WebInspector.StylesSidebarPane.prototype = {

if (!node)

return;

+ var self = this;

+ var callback = function(styles) {

+ if (!styles)

+ return;

+ node._setStyles(styles.computedStyle, styles.inlineStyle, styles.styleAttributes, styles.matchedCSSRules);

+ self._update(refresh, body, node, editedSection, forceUpdate);

+ };

+ InspectorController.getStyles(node.id, !Preferences.showUserAgentStyles, callback);

+ },

+ _update: function(refresh, body, node, editedSection, forceUpdate)

+ {

+ if (!refresh) {

+ body.removeChildren();

+ this.sections = [];

+ }

var styleRules = [];

if (refresh) {

for (var i = 0; i < this.sections.length; ++i) {

var section = this.sections[i];

+ if (section._blank)

+ continue;

if (section.computedStyle)

section.styleRule.style = node.ownerDocument.defaultView.getComputedStyle(node);

- var styleRule = { section: section, style: section.styleRule.style, computedStyle: section.computedStyle };

+ var styleRule = { section: section, style: section.styleRule.style, computedStyle: section.computedStyle, rule: section.rule };

styleRules.push(styleRule);

}

} else {

@@ -90,8 +110,9 @@ WebInspector.StylesSidebarPane.prototype = {

}

- if (node.style && (node.style.length || Object.hasProperties(node.style.__disabledProperties))) {

- var inlineStyle = { selectorText: WebInspector.UIString("Inline Style Attribute"), style: node.style };

+ // Always Show element's Style Attributes

+ if (node.nodeType === Node.ELEMENT_NODE) {

+ var inlineStyle = { selectorText: WebInspector.UIString("Style Attribute"), style: node.style, isAttribute: true };

inlineStyle.subtitle = WebInspector.UIString("element’s “%s” attribute", "style");

styleRules.push(inlineStyle);

}

@@ -101,7 +122,7 @@ WebInspector.StylesSidebarPane.prototype = {

// Add rules in reverse order to match the cascade order.

for (var i = (matchedStyleRules.length - 1); i >= 0; --i) {

var rule = matchedStyleRules[i];

- styleRules.push({ style: rule.style, selectorText: rule.selectorText, parentStyleSheet: rule.parentStyleSheet });

+ styleRules.push({ style: rule.style, selectorText: rule.selectorText, parentStyleSheet: rule.parentStyleSheet, rule: rule });

}

@@ -127,6 +148,8 @@ WebInspector.StylesSidebarPane.prototype = {

var styleRule = styleRules[i];

if (styleRule.computedStyle)

continue;

+ if (styleRule.section && styleRule.section.noAffect)

+ continue;

styleRule.usedProperties = {};

@@ -181,7 +204,7 @@ WebInspector.StylesSidebarPane.prototype = {

continue;

var style = styleRules[i].style;

- var uniqueProperties = getUniqueStyleProperties(style);

+ var uniqueProperties = style.uniqueStyleProperties;

for (var j = 0; j < uniqueProperties.length; ++j) {

var name = uniqueProperties[j];

if (style.getPropertyPriority(name).length) {

@@ -222,6 +245,9 @@ WebInspector.StylesSidebarPane.prototype = {

var editable = styleRule.editable;

delete styleRule.editable;

+ var isAttribute = styleRule.isAttribute;

+ delete styleRule.isAttribute;

// Default editable to true if it was omitted.

if (typeof editable === "undefined")

editable = true;

@@ -235,13 +261,51 @@ WebInspector.StylesSidebarPane.prototype = {

section.expanded = Preferences.styleRulesExpandedState[section.identifier];

else if (computedStyle)

section.collapse(true);

+ else if (isAttribute && styleRule.style.length === 0)

+ section.collapse(true);

else

section.expand(true);

body.appendChild(section.element);

this.sections.push(section);

}

+ this.addBlankSection();

}

+ },

+ addBlankSection: function()

+ {

+ var blankSection = new WebInspector.BlankStylePropertiesSection();

+ blankSection.pane = this;

+ this.bodyElement.insertBefore(blankSection.element, this.bodyElement.firstChild.nextSibling.nextSibling); // 0 is computed, 1 is element.style

+ var computed = this.sections.shift();

+ var elementStyle = this.sections.shift();

+ this.sections.unshift(blankSection);

+ this.sections.unshift(elementStyle);

+ this.sections.unshift(computed);

+ },

+ appropriateSelectorForNode: function()

+ {

+ var node = this.node;

+ if (!node)

+ return;

+ var id = node.getAttribute("id");

+ if (id)

+ return "#" + id;

+ var className = node.getAttribute("class");

+ if (className)

+ return "." + className.replace(/\s+/, ".");

+ var nodeName = node.nodeName.toLowerCase();

+ if (nodeName === "input" && node.getAttribute("type"))

+ return nodeName + "[type=\"" + node.getAttribute("type") + "\"]";

+ return nodeName;

}

@@ -250,14 +314,20 @@ WebInspector.StylesSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.pr

WebInspector.StylePropertiesSection = function(styleRule, subtitle, computedStyle, usedProperties, editable)

{

WebInspector.PropertiesSection.call(this, styleRule.selectorText);

+ this.titleElement.addEventListener("click", function(e) { e.stopPropagation(); }, false);

+ this.titleElement.addEventListener("dblclick", this._dblclickSelector.bind(this), false);

+ this.element.addEventListener("dblclick", this._dblclickEmptySpace.bind(this), false);

this.styleRule = styleRule;

+ this.rule = this.styleRule.rule;

this.computedStyle = computedStyle;

this.editable = (editable && !computedStyle);

// Prevent editing the user agent and user rules.

- var isUserAgent = this.styleRule.parentStyleSheet && !this.styleRule.parentStyleSheet.ownerNode && !this.styleRule.parentStyleSheet.href;

- var isUser = this.styleRule.parentStyleSheet && this.styleRule.parentStyleSheet.ownerNode && this.styleRule.parentStyleSheet.ownerNode.nodeName == '#document';

+ var isUserAgent = this.rule && this.rule.isUserAgent;

+ var isUser = this.rule && this.rule.isUser;

+ var isViaInspector = this.rule && this.rule.isViaInspector;

if (isUserAgent || isUser)

this.editable = false;

@@ -299,6 +369,8 @@ WebInspector.StylePropertiesSection = function(styleRule, subtitle, computedStyl

subtitle = WebInspector.UIString("user agent stylesheet");

else if (isUser)

subtitle = WebInspector.UIString("user stylesheet");

+ else if (isViaInspector)

+ subtitle = WebInspector.UIString("via inspector");

else

subtitle = WebInspector.UIString("inline stylesheet");

}

@@ -308,7 +380,7 @@ WebInspector.StylePropertiesSection = function(styleRule, subtitle, computedStyl

this.identifier = styleRule.selectorText;

if (this.subtitle)

- this.identifier += ":" + this.subtitleElement.textContent;

+ this.identifier += ":" + this.subtitleElement.textContent;

}

WebInspector.StylePropertiesSection.prototype = {

@@ -325,6 +397,9 @@ WebInspector.StylePropertiesSection.prototype = {

expand: function(dontRememberState)

{

+ if (this._blank)

+ return;

WebInspector.PropertiesSection.prototype.expand.call(this);

if (dontRememberState)

return;

@@ -347,7 +422,7 @@ WebInspector.StylePropertiesSection.prototype = {

isPropertyInherited: function(property)

{

- if (!this.computedStyle || !this._usedProperties)

+ if (!this.computedStyle || !this._usedProperties || this.noAffect)

return false;

// These properties should always show for Computed Style.

var alwaysShowComputedProperties = { "display": true, "height": true, "width": true };

@@ -356,7 +431,7 @@ WebInspector.StylePropertiesSection.prototype = {

isPropertyOverloaded: function(property, shorthand)

{

- if (this.computedStyle || !this._usedProperties)

+ if (this.computedStyle || !this._usedProperties || this.noAffect)

return false;

var used = (property in this.usedProperties);

@@ -365,7 +440,7 @@ WebInspector.StylePropertiesSection.prototype = {

// Find out if any of the individual longhand properties of the shorthand

// are used, if none are then the shorthand is overloaded too.

- var longhandProperties = getLonghandProperties(this.styleRule.style, property);

+ var longhandProperties = this.styleRule.style.getLonghandProperties(property);

for (var j = 0; j < longhandProperties.length; ++j) {

var individualProperty = longhandProperties[j];

if (individualProperty in this.usedProperties)

@@ -375,6 +450,11 @@ WebInspector.StylePropertiesSection.prototype = {

return true;

+ isInspectorStylesheet: function()

+ {

+ return (this.styleRule.parentStyleSheet === WebInspector.panels.elements.stylesheet);

+ },

update: function(full)

{

if (full || this.computedStyle) {

@@ -387,6 +467,11 @@ WebInspector.StylePropertiesSection.prototype = {

child = child.traverseNextTreeElement(false, null, true);

}

+ if (this._afterUpdate) {

+ this._afterUpdate(this);

+ delete this._afterUpdate;

+ }

onpopulate: function()

@@ -394,7 +479,7 @@ WebInspector.StylePropertiesSection.prototype = {

var style = this.styleRule.style;

var foundShorthands = {};

- var uniqueProperties = getUniqueStyleProperties(style);

+ var uniqueProperties = style.uniqueStyleProperties;

var disabledProperties = style.__disabledPropertyValues || {};

for (var name in disabledProperties)

@@ -422,16 +507,214 @@ WebInspector.StylePropertiesSection.prototype = {

var inherited = this.isPropertyInherited(name);

var overloaded = this.isPropertyOverloaded(name, isShorthand);

- var item = new WebInspector.StylePropertyTreeElement(style, name, isShorthand, inherited, overloaded, disabled);

+ var item = new WebInspector.StylePropertyTreeElement(this.styleRule, style, name, isShorthand, inherited, overloaded, disabled);

this.propertiesTreeOutline.appendChild(item);

}

+ },

+ findTreeElementWithName: function(name)

+ {

+ var treeElement = this.propertiesTreeOutline.children[0];

+ while (treeElement) {

+ if (treeElement.name === name)

+ return treeElement;

+ treeElement = treeElement.traverseNextTreeElement(true, null, true);

+ }

+ return null;

+ },

+ addNewBlankProperty: function()

+ {

+ var item = new WebInspector.StylePropertyTreeElement(this.styleRule, this.styleRule.style, "", false, false, false, false);

+ this.propertiesTreeOutline.appendChild(item);

+ item.listItemElement.textContent = "";

+ item._newProperty = true;

+ return item;

+ },

+ _dblclickEmptySpace: function(event)

+ {

+ this.expand();

+ this.addNewBlankProperty().startEditing();

+ },

+ _dblclickSelector: function(event)

+ {

+ if (!this.editable)

+ return;

+ if (!this.rule && this.propertiesTreeOutline.children.length === 0) {

+ this.expand();

+ this.addNewBlankProperty().startEditing();

+ return;

+ }

+ if (!this.rule)

+ return;

+ this.startEditingSelector();

+ event.stopPropagation();

+ },

+ startEditingSelector: function()

+ {

+ var element = this.titleElement;

+ if (WebInspector.isBeingEdited(element))

+ return;

+ var context = this.styleRule.selectorText;

+ WebInspector.startEditing(this.titleElement, this.editingSelectorCommitted.bind(this), this.editingSelectorCancelled.bind(this), context);

+ window.getSelection().setBaseAndExtent(element, 0, element, 1);

+ },

+ editingSelectorCommitted: function(element, newContent, oldContent, context, moveDirection)

+ {

+ function moveToNextIfNeeded() {

+ if (!moveDirection || moveDirection !== "forward")

+ return;

+ this.expand();

+ if (this.propertiesTreeOutline.children.length === 0)

+ this.addNewBlankProperty().startEditing();

+ else {

+ var item = this.propertiesTreeOutline.children[0]

+ item.startEditing(item.valueElement);

+ }

+ if (newContent === oldContent)

+ return moveToNextIfNeeded.call(this);

+ var self = this;

+ var callback = function(result) {

+ if (!result) {

+ // Invalid Syntax for a Selector

+ self.editingSelectorCancelled(element, context);

+ moveToNextIfNeeded.call(self);

+ return;

+ }

+ var newRulePayload = result[0];

+ var doesAffectSelectedNode = result[1];

+ if (!doesAffectSelectedNode) {

+ self.noAffect = true;

+ self.element.addStyleClass("no-affect");

+ } else {

+ delete self.noAffect;

+ self.element.removeStyleClass("no-affect");

+ }

+ var newRule = WebInspector.CSSStyleDeclaration.parseRule(newRulePayload);

+ self.rule = newRule;

+ self.styleRule = { section: self, style: newRule.style, selectorText: newRule.selectorText, parentStyleSheet: newRule.parentStyleSheet, rule: newRule };

+ var oldIdentifier = this.identifier;

+ self.identifier = newRule.selectorText + ":" + self.subtitleElement.textContent;

+ self.pane.update(null, true);

+ WebInspector.panels.elements.renameSelector(oldIdentifier, this.identifier, oldContent, newContent);

+ moveToNextIfNeeded.call(self);

+ };

+ InspectorController.applyStyleRuleText(this.rule.id, newContent, this.pane.node.id, callback);

+ },

+ editingSelectorCancelled: function(element, context)

+ {

+ element.textContent = context;

}

WebInspector.StylePropertiesSection.prototype.__proto__ = WebInspector.PropertiesSection.prototype;

-WebInspector.StylePropertyTreeElement = function(style, name, shorthand, inherited, overloaded, disabled)

+WebInspector.BlankStylePropertiesSection = function()

{

+ WebInspector.PropertiesSection.call(this, WebInspector.UIString("Double-Click to Add"), null);

+ this._blank = true;

+ this._dblclickListener = this._dblclick.bind(this);

+ this.element.addStyleClass("blank-section");

+ this.titleElement.addStyleClass("blank-title");

+ this.titleElement.addEventListener("click", function(e) { e.stopPropagation(); }, false);

+ this.titleElement.addEventListener("dblclick", this._dblclickListener, false);

+WebInspector.BlankStylePropertiesSection.prototype = {

+ _dblclick: function(event)

+ {

+ this.startEditing();

+ },

+ startEditing: function()

+ {

+ var element = this.titleElement;

+ if (WebInspector.isBeingEdited(element))

+ return;

+ this.titleElement.textContent = this.pane.appropriateSelectorForNode();

+ this.titleElement.removeStyleClass("blank-title");

+ WebInspector.startEditing(this.titleElement, this.editingCommitted.bind(this), this.editingCancelled.bind(this), "");

+ window.getSelection().setBaseAndExtent(element, 0, element, 1);

+ },

+ editingCancelled: function()

+ {

+ this.titleElement.textContent = WebInspector.UIString("Double-Click to Add");

+ this.titleElement.addStyleClass("blank-title");

+ },

+ editingCommitted: function(element, newContent, oldContent, context)

+ {

+ var self = this;

+ var callback = function(result) {

+ if (!result) {

+ // Invalid Syntax for a Selector

+ self.editingCancelled();

+ return;

+ }

+ var styleRule = result[0];

+ var doesSelectorAffectSelectedNode = result[1];

+ self.makeNormal(WebInspector.CSSStyleDeclaration.parseRule(styleRule));

+ if (!doesSelectorAffectSelectedNode) {

+ self.noAffect = true;

+ self.element.addStyleClass("no-affect");

+ }

+ self.subtitleElement.textContent = WebInspector.UIString("via inspector");

+ self.expand();

+ self.pane.addBlankSection();

+ self.addNewBlankProperty().startEditing();

+ };

+ InspectorController.addStyleSelector(newContent, this.pane.node.id, callback);

+ },

+ makeNormal: function(styleRule)

+ {

+ this.titleElement.removeEventListener("dblclick", this._dblclickListener, false);

+ this.titleElement.addEventListener("dblclick", this._dblclickSelector.bind(this), false);

+ this.element.addEventListener("dblclick", this._dblclickEmptySpace.bind(this), false);

+ this.element.removeStyleClass("blank-section");

+ delete this._blank;

+ delete this._dblclick;

+ delete this.startEditing;

+ delete this.editingCancelled;

+ delete this.editingCommitted;

+ delete this._dblclickListener;

+ delete this.makeNormal;

+ this.styleRule = styleRule;

+ this.rule = styleRule.rule;

+ this.computedStyle = false;

+ this.editable = true;

+ this.identifier = styleRule.selectorText + ":inspector";

+ // leftovers are: this.noAffect if applicable

+ }

+WebInspector.BlankStylePropertiesSection.prototype.__proto__ = WebInspector.StylePropertiesSection.prototype;

+WebInspector.StylePropertyTreeElement = function(styleRule, style, name, shorthand, inherited, overloaded, disabled)

+ this._styleRule = styleRule;

this.style = style;

this.name = name;

this.shorthand = shorthand;

@@ -487,14 +770,14 @@ WebInspector.StylePropertyTreeElement.prototype = {

{

if (this.disabled && this.style.__disabledPropertyPriorities && this.name in this.style.__disabledPropertyPriorities)

return this.style.__disabledPropertyPriorities[this.name];

- return (this.shorthand ? getShorthandPriority(this.style, this.name) : this.style.getPropertyPriority(this.name));

+ return (this.shorthand ? this.style.getShorthandPriority(this.name) : this.style.getPropertyPriority(this.name));

get value()

{

if (this.disabled && this.style.__disabledPropertyValues && this.name in this.style.__disabledPropertyValues)

return this.style.__disabledPropertyValues[this.name];

- return (this.shorthand ? getShorthandValue(this.style, this.name) : this.style.getPropertyValue(this.name));

+ return (this.shorthand ? this.style.getShorthandValue(this.name) : this.style.getPropertyValue(this.name));

onattach: function()

@@ -558,10 +841,12 @@ WebInspector.StylePropertyTreeElement.prototype = {

var nameElement = document.createElement("span");

nameElement.className = "name";

nameElement.textContent = this.name;

+ this.nameElement = nameElement;

var valueElement = document.createElement("span");

valueElement.className = "value";

valueElement.innerHTML = htmlValue;

+ this.valueElement = valueElement;

if (priority) {

var priorityElement = document.createElement("span");

@@ -587,7 +872,8 @@ WebInspector.StylePropertyTreeElement.prototype = {

if (value) {

// FIXME: this only covers W3C and CSS 16 valid color names

- var colors = value.match(/((rgb|hsl)a?$[^)]+$)|(#[0-9a-fA-F]{6})|(#[0-9a-fA-F]{3})|aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|purple|red|silver|teal|white|yellow/g);

+ var colors = value.match(/((rgb|hsl)a?$[^)]+$)|(#[0-9a-fA-F]{6})|(#[0-9a-fA-F]{3})|aqua|black|blue|fuchsia|gray|green|lime|maroon|navy|olive|purple|red|silver|teal|white|yellow|transparent/g);

+ var swatch;

if (colors) {

var colorsLength = colors.length;

for (var i = 0; i < colorsLength; ++i) {

@@ -595,6 +881,79 @@ WebInspector.StylePropertyTreeElement.prototype = {

swatchElement.className = "swatch";

swatchElement.style.setProperty("background-color", colors[i]);

this.listItemElement.appendChild(swatchElement);

+ swatch = swatchElement;

+ }

+ // Rotate through Color Representations by Clicking on the Swatch

+ // Simple: rgb -> hsl -> nickname? -> shorthex? -> hex -> ...

+ // Advanced: rgba -> hsla -> nickname? -> ...

+ if (colors && colors.length === 1) {

+ try {

+ var color = new WebInspector.Color(htmlValue);

+ } catch(e) {

+ var color = null;

+ }

+ if (color) {

+ swatch.addEventListener("click", changeColorDisplay, false);

+ swatch.addEventListener("dblclick", function(event) {

+ event.stopPropagation();

+ }, false);

+ var mode = color.mode;

+ var valueElement = this.valueElement;

+ function changeColorDisplay(event) {

+ function changeTo(newMode, content) {

+ mode = newMode;

+ valueElement.textContent = content;

+ }

+ switch (mode) {

+ case "rgb":

+ changeTo("hsl", color.toHsl());

+ break;

+ case "shorthex":

+ changeTo("hex", color.toHex());

+ break;

+ case "hex":

+ changeTo("rgb", color.toRgb());

+ break;

+ case "nickname":

+ if (color.simple) {

+ if (color.hasShortHex())

+ changeTo("shorthex", color.toShortHex());

+ else

+ changeTo("hex", color.toHex());

+ } else

+ changeTo("rgba", color.toRgba());

+ break;

+ case "hsl":

+ if (color.nickname)

+ changeTo("nickname", color.toNickname());

+ else if (color.hasShortHex())

+ changeTo("shorthex", color.toShortHex());

+ else

+ changeTo("hex", color.toHex());

+ break;

+ case "rgba":

+ changeTo("hsla", color.toHsla());

+ break;

+ case "hsla":

+ if (color.nickname)

+ changeTo("nickname", color.toNickname());

+ else

+ changeTo("rgba", color.toRgba());

+ break;

+ }

}

@@ -616,42 +975,24 @@ WebInspector.StylePropertyTreeElement.prototype = {

{

var disabled = !event.target.checked;

- if (disabled) {

- if (!this.style.__disabledPropertyValues || !this.style.__disabledPropertyPriorities) {

- var inspectedWindow = InspectorController.inspectedWindow();

- this.style.__disabledProperties = new inspectedWindow.Object;

- this.style.__disabledPropertyValues = new inspectedWindow.Object;

- this.style.__disabledPropertyPriorities = new inspectedWindow.Object;

- }

- this.style.__disabledPropertyValues[this.name] = this.value;

- this.style.__disabledPropertyPriorities[this.name] = this.priority;

+ var self = this;

+ var callback = function(newPayload) {

+ if (!newPayload)

+ return;

- if (this.shorthand) {

- var longhandProperties = getLonghandProperties(this.style, this.name);

- for (var i = 0; i < longhandProperties.length; ++i) {

- this.style.__disabledProperties[longhandProperties[i]] = true;

- this.style.removeProperty(longhandProperties[i]);

- }

- } else {

- this.style.__disabledProperties[this.name] = true;

- this.style.removeProperty(this.name);

- }

- } else {

- this.style.setProperty(this.name, this.value, this.priority);

- delete this.style.__disabledProperties[this.name];

- delete this.style.__disabledPropertyValues[this.name];

- delete this.style.__disabledPropertyPriorities[this.name];

- }

+ self.style = WebInspector.CSSStyleDeclaration.parseStyle(newPayload);

+ self._styleRule.style = self.style;

- // Set the disabled property here, since the code above replies on it not changing

- // until after the value and priority are retrieved.

- this.disabled = disabled;

+ // Set the disabled property here, since the code above replies on it not changing

+ // until after the value and priority are retrieved.

+ self.disabled = disabled;

- if (this.treeOutline.section && this.treeOutline.section.pane)

- this.treeOutline.section.pane.dispatchEventToListeners("style property toggled");

+ if (self.treeOutline.section && self.treeOutline.section.pane)

+ self.treeOutline.section.pane.dispatchEventToListeners("style property toggled");

- this.updateAll(true);

+ self.updateAll(true);

+ };

+ InspectorController.toggleStyleEnabled(this.style.id, this.name, disabled, callback);

updateState: function()

@@ -686,7 +1027,7 @@ WebInspector.StylePropertyTreeElement.prototype = {

if (this.children.length || !this.shorthand)

return;

- var longhandProperties = getLonghandProperties(this.style, this.name);

+ var longhandProperties = this.style.getLonghandProperties(this.name);

for (var i = 0; i < longhandProperties.length; ++i) {

var name = longhandProperties[i];

@@ -695,7 +1036,7 @@ WebInspector.StylePropertyTreeElement.prototype = {

var overloaded = this.treeOutline.section.isPropertyOverloaded(name);

}

- var item = new WebInspector.StylePropertyTreeElement(this.style, name, false, inherited, overloaded);

+ var item = new WebInspector.StylePropertyTreeElement(this._styleRule, this.style, name, false, inherited, overloaded);

this.appendChild(item);

}

@@ -703,6 +1044,7 @@ WebInspector.StylePropertyTreeElement.prototype = {

ondblclick: function(element, event)

{

this.startEditing(event.target);

+ event.stopPropagation();

startEditing: function(selectElement)

@@ -809,11 +1151,11 @@ WebInspector.StylePropertyTreeElement.prototype = {

if (!this.originalCSSText) {

// Remember the rule's original CSS text, so it can be restored

// if the editing is canceled and before each apply.

- this.originalCSSText = getStyleTextWithShorthands(this.style);

+ this.originalCSSText = this.style.styleTextWithShorthands();

} else {

// Restore the original CSS text before applying user changes. This is needed to prevent

// new properties from sticking around if the user adds one, then removes it.

- this.style.cssText = this.originalCSSText;

+ InspectorController.setStyleText(this.style.id, this.originalCSSText);

}

this.applyStyleText(this.listItemElement.textContent);

@@ -830,8 +1172,10 @@ WebInspector.StylePropertyTreeElement.prototype = {

editingCancelled: function(element, context)

{

- if (this.originalCSSText) {

- this.style.cssText = this.originalCSSText;

+ if (this._newProperty)

+ this.treeOutline.removeChild(this);

+ else if (this.originalCSSText) {

+ InspectorController.setStyleText(this.style.id, this.originalCSSText);

if (this.treeOutline.section && this.treeOutline.section.pane)

this.treeOutline.section.pane.dispatchEventToListeners("style edited");

@@ -843,84 +1187,114 @@ WebInspector.StylePropertyTreeElement.prototype = {

this.editingEnded(context);

- editingCommitted: function(element, userInput, previousContent, context)

+ editingCommitted: function(element, userInput, previousContent, context, moveDirection)

{

this.editingEnded(context);

- if (userInput === previousContent)

- return; // nothing changed, so do nothing else

+ // Determine where to move to before making changes

+ var newProperty, moveToPropertyName, moveToSelector;

+ var moveTo = (moveDirection === "forward" ? this.nextSibling : this.previousSibling);

+ if (moveTo)

+ moveToPropertyName = moveTo.name;

+ else if (moveDirection === "forward")

+ newProperty = true;

+ else if (moveDirection === "backward" && this.treeOutline.section.rule)

+ moveToSelector = true;

+ // Make the Changes and trigger the moveToNextCallback after updating

+ var blankInput = /^\s*$/.test(userInput);

+ if (userInput !== previousContent || (this._newProperty && blankInput)) { // only if something changed, or adding a new style and it was blank

+ this.treeOutline.section._afterUpdate = moveToNextCallback.bind(this, this._newProperty, !blankInput);

+ this.applyStyleText(userInput, true);

+ } else

+ moveToNextCallback(this._newProperty, false, this.treeOutline.section, false);

+ // The Callback to start editing the next property

+ function moveToNextCallback(alreadyNew, valueChanged, section) {

+ if (!moveDirection)

+ return;

+ // User just tabbed through without changes

+ if (moveTo && moveTo.parent) {

+ moveTo.startEditing(moveTo.valueElement);

+ return;

+ }

+ // User has made a change then tabbed, wiping all the original treeElements,

+ // recalculate the new treeElement for the same property we were going to edit next

+ if (moveTo && !moveTo.parent) {

+ var treeElement = section.findTreeElementWithName(moveToPropertyName);

+ if (treeElement)

+ treeElement.startEditing(treeElement.valueElement);

+ return;

+ }

+ // Create a new attribute in this section

+ if (newProperty) {

+ if (alreadyNew && !valueChanged)

+ return;

+ var item = section.addNewBlankProperty();

+ item.startEditing();

+ return;

+ }

- this.applyStyleText(userInput, true);

+ if (moveToSelector)

+ section.startEditingSelector();

+ }

applyStyleText: function(styleText, updateInterface)

{

+ var section = this.treeOutline.section;

+ var elementsPanel = WebInspector.panels.elements;

var styleTextLength = styleText.trimWhitespace().length;

- // Create a new element to parse the user input CSS.

- var parseElement = document.createElement("span");

- parseElement.setAttribute("style", styleText);

- var tempStyle = parseElement.style;

- if (tempStyle.length || !styleTextLength) {

- // The input was parsable or the user deleted everything, so remove the

- // original property from the real style declaration. If this represents

- // a shorthand remove all the longhand properties.

- if (this.shorthand) {

- var longhandProperties = getLonghandProperties(this.style, this.name);

- for (var i = 0; i < longhandProperties.length; ++i)

- this.style.removeProperty(longhandProperties[i]);

- } else

- this.style.removeProperty(this.name);

- }

if (!styleTextLength) {

if (updateInterface) {

- // The user deleted the everything, so remove the tree element and update.

- if (this.treeOutline.section && this.treeOutline.section.pane)

- this.treeOutline.section.pane.update();

+ // The user deleted everything, so remove the tree element and update.

+ if (!this._newProperty)

+ delete section._afterUpdate;

+ if (section && section.pane)

+ section.pane.update();

this.parent.removeChild(this);

+ elementsPanel.removeStyleChange(section.identifier, this.style, this.name);

}

return;

}

- if (!tempStyle.length) {

- // The user typed something, but it didn't parse. Just abort and restore

- // the original title for this property.

- if (updateInterface)

- this.updateTitle();

- return;

- }

- // Iterate of the properties on the test element's style declaration and

- // add them to the real style declaration. We take care to move shorthands.

- var foundShorthands = {};

- var uniqueProperties = getUniqueStyleProperties(tempStyle);

- for (var i = 0; i < uniqueProperties.length; ++i) {

- var name = uniqueProperties[i];

- var shorthand = tempStyle.getPropertyShorthand(name);

- if (shorthand && shorthand in foundShorthands)

- continue;

- if (shorthand) {

- var value = getShorthandValue(tempStyle, shorthand);

- var priority = getShorthandPriority(tempStyle, shorthand);

- foundShorthands[shorthand] = true;

- } else {

- var value = tempStyle.getPropertyValue(name);

- var priority = tempStyle.getPropertyPriority(name);

+ var self = this;

+ var callback = function(result) {

+ if (!result) {

+ // The user typed something, but it didn't parse. Just abort and restore

+ // the original title for this property. If this was a new attribute and

+ // we couldn't parse, then just remove it.

+ if (self._newProperty) {

+ self.parent.removeChild(self);

+ return;

+ }

+ if (updateInterface)

+ self.updateTitle();

+ return;

}

- // Set the property on the real style declaration.

- this.style.setProperty((shorthand || name), value, priority);

- }

+ var newPayload = result[0];

+ var changedProperties = result[1];

+ elementsPanel.removeStyleChange(section.identifier, self.style, self.name);

- if (this.treeOutline.section && this.treeOutline.section.pane)

- this.treeOutline.section.pane.dispatchEventToListeners("style edited");

+ self.style = WebInspector.CSSStyleDeclaration.parseStyle(newPayload);

+ for (var i = 0; i < changedProperties.length; ++i)

+ elementsPanel.addStyleChange(section.identifier, self.style, changedProperties[i]);

+ self._styleRule.style = self.style;

+ if (section && section.pane)

+ section.pane.dispatchEventToListeners("style edited");

- if (updateInterface)

- this.updateAll(true);

+ if (updateInterface)

+ self.updateAll(true);

+ if (!self.rule)

+ WebInspector.panels.elements.treeOutline.update();

+ };

+ InspectorController.applyStyleText(this.style.id, styleText.trimWhitespace(), this.name, callback);

}