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 @@ |
/* |
* Copyright (C) 2007 Apple Inc. All rights reserved. |
+ * Copyright (C) 2009 Joseph Pecoraro |
* |
* 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); |
} |
} |