diff options
Diffstat (limited to 'WebCore/inspector/front-end/CSSStyleModel.js')
| -rw-r--r-- | WebCore/inspector/front-end/CSSStyleModel.js | 411 |
1 files changed, 394 insertions, 17 deletions
diff --git a/WebCore/inspector/front-end/CSSStyleModel.js b/WebCore/inspector/front-end/CSSStyleModel.js index 542a3b3..c3429fd 100644 --- a/WebCore/inspector/front-end/CSSStyleModel.js +++ b/WebCore/inspector/front-end/CSSStyleModel.js @@ -83,7 +83,7 @@ WebInspector.CSSStyleModel.prototype = { userCallback(result); } - InspectorBackend.getStyles(nodeId, false, callback.bind(null, userCallback)); + InspectorBackend.getStylesForNode2(nodeId, callback.bind(null, userCallback)); }, getComputedStyleAsync: function(nodeId, userCallback) @@ -96,7 +96,7 @@ WebInspector.CSSStyleModel.prototype = { userCallback(WebInspector.CSSStyleDeclaration.parsePayload(stylePayload)); } - InspectorBackend.getComputedStyle(nodeId, callback.bind(null, userCallback)); + InspectorBackend.getComputedStyleForNode2(nodeId, callback.bind(null, userCallback)); }, getInlineStyleAsync: function(nodeId, userCallback) @@ -109,41 +109,418 @@ WebInspector.CSSStyleModel.prototype = { userCallback(WebInspector.CSSStyleDeclaration.parsePayload(stylePayload)); } - InspectorBackend.getInlineStyle(nodeId, callback.bind(null, userCallback)); + InspectorBackend.getInlineStyleForNode2(nodeId, callback.bind(null, userCallback)); }, - setRuleSelector: function(ruleId, newContent, nodeId, successCallback, failureCallback) + setRuleSelector: function(ruleId, nodeId, newSelector, successCallback, failureCallback) { - function callback(newRulePayload, doesAffectSelectedNode) + function checkAffectsCallback(nodeId, successCallback, rulePayload, selectedNodeIds) { - if (!newRulePayload) + var doesAffectSelectedNode = (selectedNodeIds.indexOf(nodeId) >= 0); + successCallback(WebInspector.CSSRule.parsePayload(rulePayload), doesAffectSelectedNode); + } + + function callback(nodeId, successCallback, failureCallback, newSelector, rulePayload) + { + if (!rulePayload) failureCallback(); else - successCallback(WebInspector.CSSRule.parsePayload(newRulePayload), doesAffectSelectedNode); + InspectorBackend.querySelectorAll(nodeId, newSelector, checkAffectsCallback.bind(null, nodeId, successCallback, rulePayload)); } - InspectorBackend.setRuleSelector(ruleId, newContent, nodeId, callback); + InspectorBackend.setRuleSelector2(ruleId, newSelector, callback.bind(null, nodeId, successCallback, failureCallback)); }, - addRule: function(nodeId, newContent, successCallback, failureCallback) + addRule: function(nodeId, selector, successCallback, failureCallback) { - function callback(rule, doesAffectSelectedNode) + function checkAffectsCallback(nodeId, successCallback, rulePayload, selectedNodeIds) + { + var doesAffectSelectedNode = (selectedNodeIds.indexOf(nodeId) >= 0); + successCallback(WebInspector.CSSRule.parsePayload(rulePayload), doesAffectSelectedNode); + } + + function callback(successCallback, failureCallback, selector, rulePayload) { - if (!rule) { + if (!rulePayload) { // Invalid syntax for a selector failureCallback(); + } else + InspectorBackend.querySelectorAll(nodeId, selector, checkAffectsCallback.bind(null, nodeId, successCallback, rulePayload)); + } + + InspectorBackend.addRule2(nodeId, selector, callback.bind(null, successCallback, failureCallback, selector)); + } +} + +WebInspector.CSSStyleDeclaration = function(payload) +{ + this.id = payload.styleId; + this.properties = payload.properties; + this._shorthandValues = payload.shorthandValues; + this._livePropertyMap = {}; // LIVE properties (source-based or style-based) : { name -> CSSProperty } + this._allProperties = []; // ALL properties: [ CSSProperty ] + this._longhandProperties = {}; // shorthandName -> [ CSSProperty ] + this.__disabledProperties = {}; // DISABLED properties: { index -> CSSProperty } + var payloadPropertyCount = payload.cssProperties.length; + + var propertyIndex = 0; + for (var i = 0; i < payloadPropertyCount; ++i) { + var property = new WebInspector.CSSProperty.parsePayload(this, i, payload.cssProperties[i]); + this._allProperties.push(property); + if (property.disabled) + this.__disabledProperties[i] = property; + if (!property.active && !property.styleBased) + continue; + var name = property.name; + this[propertyIndex] = name; + this._livePropertyMap[name] = property; + + // Index longhand properties. + if (property.shorthand) { // only for parsed + var longhands = this._longhandProperties[property.shorthand]; + if (!longhands) { + longhands = []; + this._longhandProperties[property.shorthand] = longhands; + } + longhands.push(property); + } + ++propertyIndex; + } + this.length = propertyIndex; + if ("cssText" in payload) + this.cssText = payload.cssText; +} + +WebInspector.CSSStyleDeclaration.parsePayload = function(payload) +{ + return new WebInspector.CSSStyleDeclaration(payload); +} + +WebInspector.CSSStyleDeclaration.prototype = { + get allProperties() + { + return this._allProperties; + }, + + getLiveProperty: function(name) + { + return this._livePropertyMap[name]; + }, + + getPropertyValue: function(name) + { + var property = this._livePropertyMap[name]; + return property ? property.value : ""; + }, + + getPropertyPriority: function(name) + { + var property = this._livePropertyMap[name]; + return property ? property.priority : ""; + }, + + getPropertyShorthand: function(name) + { + var property = this._livePropertyMap[name]; + return property ? property.shorthand : ""; + }, + + isPropertyImplicit: function(name) + { + var property = this._livePropertyMap[name]; + return property ? property.implicit : ""; + }, + + styleTextWithShorthands: function() + { + var cssText = ""; + var foundProperties = {}; + for (var i = 0; i < this.length; ++i) { + var individualProperty = this[i]; + var shorthandProperty = this.getPropertyShorthand(individualProperty); + var propertyName = (shorthandProperty || individualProperty); + + if (propertyName in foundProperties) + continue; + + if (shorthandProperty) { + var value = this.getShorthandValue(shorthandProperty); + var priority = this.getShorthandPriority(shorthandProperty); } else { - var styleRule = WebInspector.CSSRule.parsePayload(rule); - styleRule.rule = rule; - successCallback(styleRule, doesAffectSelectedNode); + var value = this.getPropertyValue(individualProperty); + var priority = this.getPropertyPriority(individualProperty); } + + foundProperties[propertyName] = true; + + cssText += propertyName + ": " + value; + if (priority) + cssText += " !" + priority; + cssText += "; "; + } + + return cssText; + }, + + getLonghandProperties: function(name) + { + return this._longhandProperties[name] || []; + }, + + getShorthandValue: function(shorthandProperty) + { + var property = this.getLiveProperty(shorthandProperty); + return property ? property.value : this._shorthandValues[shorthandProperty]; + }, + + getShorthandPriority: function(shorthandProperty) + { + var priority = this.getPropertyPriority(shorthandProperty); + if (priority) + return priority; + + var longhands = this._longhandProperties[shorthandProperty]; + return longhands ? this.getPropertyPriority(longhands[0]) : null; + }, + + propertyAt: function(index) + { + return (index < this.allProperties.length) ? this.allProperties[index] : null; + }, + + pastLastSourcePropertyIndex: function() + { + for (var i = this.allProperties.length - 1; i >= 0; --i) { + var property = this.allProperties[i]; + if (property.active || property.disabled) + return i + 1; } + return 0; + }, - InspectorBackend.addRule(newContent, nodeId, callback); + newBlankProperty: function() + { + return new WebInspector.CSSProperty(this, this.pastLastSourcePropertyIndex(), "", "", "", "active", true, false, false, ""); }, - setCSSText: function(styleId, cssText) + insertPropertyAt: function(index, name, value, userCallback) + { + function callback(userCallback, payload) + { + if (!userCallback) + return; + + if (!payload) + userCallback(null); + else + userCallback(WebInspector.CSSStyleDeclaration.parsePayload(payload)); + } + + InspectorBackend.setPropertyText2(this.id, index, name + ": " + value + ";", false, callback.bind(null, userCallback)); + }, + + appendProperty: function(name, value, userCallback) + { + this.insertPropertyAt(this.allProperties.length, name, value, userCallback); + } +} + +WebInspector.CSSRule = function(payload) +{ + this.id = payload.ruleId; + this.selectorText = payload.selectorText; + this.sourceLine = payload.sourceLine; + this.sourceURL = payload.sourceURL; + this.origin = payload.origin; + this.style = WebInspector.CSSStyleDeclaration.parsePayload(payload.style); + this.style.parentRule = this; + this.selectorRange = payload.selectorRange; +} + +WebInspector.CSSRule.parsePayload = function(payload) +{ + return new WebInspector.CSSRule(payload); +} + +WebInspector.CSSRule.prototype = { + get isUserAgent() { - InspectorBackend.setStyleText(styleId, cssText); + return this.origin === "user-agent"; + }, + + get isUser() + { + return this.origin === "user"; + }, + + get isViaInspector() + { + return this.origin === "inspector"; + }, + + get isRegular() + { + return this.origin === ""; + } +} + +WebInspector.CSSProperty = function(ownerStyle, index, name, value, priority, status, parsedOk, implicit, shorthand, text) +{ + this.ownerStyle = ownerStyle; + this.index = index; + this.name = name; + this.value = value; + this.priority = priority; + this.status = status; + this.parsedOk = parsedOk; + this.implicit = implicit; + this.shorthand = shorthand; + this.text = text; +} + +WebInspector.CSSProperty.parsePayload = function(ownerStyle, index, payload) +{ + var result = new WebInspector.CSSProperty( + ownerStyle, index, payload.name, payload.value, payload.priority, payload.status, payload.parsedOk, payload.implicit, payload.shorthandName, payload.text); + return result; +} + +WebInspector.CSSProperty.prototype = { + get propertyText() + { + if (this.text !== undefined) + return this.text; + + if (this.name === "") + return ""; + return this.name + ": " + this.value + (this.priority ? " !" + this.priority : "") + ";"; + }, + + get isLive() + { + return this.active || this.styleBased; + }, + + get active() + { + return this.status === "active"; + }, + + get styleBased() + { + return this.status === "style"; + }, + + get inactive() + { + return this.status === "inactive"; + }, + + get disabled() + { + return this.status === "disabled"; + }, + + // Replaces "propertyName: propertyValue [!important];" in the stylesheet by an arbitrary propertyText. + setText: function(propertyText, userCallback) + { + function callback(userCallback, stylePayload) + { + if (stylePayload) + this.text = propertyText; + + if (!userCallback) + return; + if (!stylePayload) + userCallback(null); + else { + var style = WebInspector.CSSStyleDeclaration.parsePayload(stylePayload); + userCallback(style); + } + } + + if (!this.ownerStyle) + throw "No ownerStyle for property"; + + // An index past all the properties adds a new property to the style. + InspectorBackend.setPropertyText2(this.ownerStyle.id, this.index, propertyText, this.index < this.ownerStyle.pastLastSourcePropertyIndex(), callback.bind(this, userCallback)); + }, + + setValue: function(newValue, userCallback) + { + var text = this.name + ": " + newValue + (this.priority ? " !" + this.priority : "") + ";" + this.setText(text, userCallback); + }, + + setDisabled: function(disabled, userCallback) + { + if (!this.ownerStyle && userCallback) + userCallback(null); + if (disabled === this.disabled && userCallback) + userCallback(this.ownerStyle); + + function callback(userCallback, stylePayload) + { + if (!userCallback) + return; + if (!stylePayload) + userCallback(null); + else { + var style = WebInspector.CSSStyleDeclaration.parsePayload(stylePayload); + userCallback(style); + } + } + + InspectorBackend.toggleProperty2(this.ownerStyle.id, this.index, disabled, callback.bind(this, userCallback)); + } +} + +WebInspector.CSSStyleSheet = function(payload) +{ + this.id = payload.styleSheetId; + this.sourceURL = payload.sourceURL; + this.title = payload.title; + this.disabled = payload.disabled; + this.rules = []; + this.styles = {}; + for (var i = 0; i < payload.rules.length; ++i) { + var rule = WebInspector.CSSRule.parsePayload(payload.rules[i]); + this.rules.push(rule); + if (rule.style) + this.styles[rule.style.id] = rule.style; + } + if ("text" in payload) + this._text = payload.text; +} + +WebInspector.CSSStyleSheet.createForId = function(styleSheetId, userCallback) +{ + function callback(userCallback, styleSheetPayload) + { + if (!styleSheetPayload) + userCallback(null); + else + userCallback(new WebInspector.CSSStyleSheet(styleSheetPayload)); + } + InspectorBackend.getStyleSheet2(styleSheetId, callback.bind(this, userCallback)); +} + +WebInspector.CSSStyleSheet.prototype = { + getText: function() + { + return this._text; + }, + + setText: function(newText, userCallback) + { + function callback(userCallback, styleSheetPayload) + { + if (!styleSheetPayload) + userCallback(null); + else + userCallback(new WebInspector.CSSStyleSheet(styleSheetPayload)); + } + + InspectorBackend.setStyleSheetText2(this.id, newText, callback.bind(this, userCallback)); } } |