diff options
Diffstat (limited to 'webkit/glue/devtools/js/inject.js')
-rw-r--r-- | webkit/glue/devtools/js/inject.js | 204 |
1 files changed, 179 insertions, 25 deletions
diff --git a/webkit/glue/devtools/js/inject.js b/webkit/glue/devtools/js/inject.js index 1ef97b0..a6d7d0b 100644 --- a/webkit/glue/devtools/js/inject.js +++ b/webkit/glue/devtools/js/inject.js @@ -111,28 +111,28 @@ devtools.Injected.prototype.getStyles = function(node, authorOnly) { if (!node.nodeType == Node.ELEMENT_NODE) { return {}; } - var matchedRules = window.getMatchedCSSRules(node, '', authorOnly); + var matchedRules = window.getMatchedCSSRules(node, '', false); var matchedCSSRulesObj = []; for (var i = 0; matchedRules && i < matchedRules.length; ++i) { - var rule = matchedRules[i]; - var style = this.serializeStyle_(rule.style); + var rule = matchedRules[i]; + var parentStyleSheet = rule.parentStyleSheet; + var isUserAgent = parentStyleSheet && !parentStyleSheet.ownerNode && + !parentStyleSheet.href; + var isUser = parentStyleSheet && parentStyleSheet.ownerNode && + parentStyleSheet.ownerNode.nodeName == '#document'; + + var style = this.serializeStyle_(rule.style, !isUserAgent && !isUser); var ruleValue = { 'selector' : rule.selectorText, 'style' : style }; - if (rule.parentStyleSheet) { + if (parentStyleSheet) { ruleValue['parentStyleSheet'] = { - 'href' : rule.parentStyleSheet.href, - 'ownerNodeName' : rule.parentStyleSheet.ownerNode ? - rule.parentStyleSheet.ownerNode.name : null + 'href' : parentStyleSheet.href, + 'ownerNodeName' : parentStyleSheet.ownerNode ? + parentStyleSheet.ownerNode.name : null }; } - var parentStyleSheetHref = (rule.parentStyleSheet ? - rule.parentStyleSheet.href : undefined); - var parentStyleSheetOwnerNodeName; - if (rule.parentStyleSheet && rule.parentStyleSheet.ownerNode) { - parentStyleSheetOwnerNodeName = rule.parentStyleSheet.ownerNode.name; - } matchedCSSRulesObj.push(ruleValue); } @@ -141,12 +141,11 @@ devtools.Injected.prototype.getStyles = function(node, authorOnly) { for (var i = 0; attributes && i < attributes.length; ++i) { if (attributes[i].style) { attributeStyles[attributes[i].name] = - this.serializeStyle_(attributes[i].style); + this.serializeStyle_(attributes[i].style, true); } } - var result = { - 'inlineStyle' : this.serializeStyle_(node.style), + 'inlineStyle' : this.serializeStyle_(node.style, true), 'computedStyle' : this.serializeStyle_( window.getComputedStyle(node, '')), 'matchedCSSRules' : matchedCSSRulesObj, @@ -189,19 +188,21 @@ devtools.Injected.prototype.getStyleForId_ = function(node, id) { /** * Converts given style into serializable object. * @param {CSSStyleDeclaration} style Style to serialize. + * @param {boolean} opt_bind Determins whether this style should be bound. * @return {Array<Object>} Serializable object. * @private */ -devtools.Injected.prototype.serializeStyle_ = function(style) { +devtools.Injected.prototype.serializeStyle_ = function(style, opt_bind) { if (!style) { return []; } - if (!style.__id) { - style.__id = this.lastStyleId_++; + var id = style.__id; + if (opt_bind && !id) { + id = style.__id = this.lastStyleId_++; this.styles_.push(style); } var result = [ - style.__id, + id, style.__disabledProperties, style.__disabledPropertyValues, style.__disabledPropertyPriorities @@ -270,11 +271,75 @@ devtools.Injected.prototype.toggleNodeStyle = function(node, styleId, enabled, /** - * Returns longhand proeprties for a given shorthand one. - * @param {CSSStyleDeclaration} style Style declaration to use for lookup. - * @param {string} shorthandProperty Shorthand property to get longhands for. - * @return {Array.<string>} Array with longhand properties. - * @private + * Applies given text to a style. + * @param {Node} node Node to get prorotypes for. + * @param {number} styleId Id of style to toggle. + * @param {string} name Style element name. + * @param {string} styleText New style text. + * @return {boolean} True iff style has been edited successfully. + */ +devtools.Injected.prototype.applyStyleText = function(node, styleId, + name, styleText) { + var style = this.getStyleForId_(node, styleId); + if (!style) { + return false; + } + + var styleTextLength = this.trimWhitespace_(styleText).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 (style.getPropertyShorthand(name)) { + var longhandProperties = this.getLonghandProperties_(style, name); + for (var i = 0; i < longhandProperties.length; ++i) { + style.removeProperty(longhandProperties[i]); + } + } else { + style.removeProperty(name); + } + } + if (!tempStyle.length) { + // The user typed something, but it didn't parse. Just abort and restore + // the original title for this property. + return false; + } + + // 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 = this.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 = this.getShorthandValue_(tempStyle, shorthand); + var priority = this.getShorthandPriority_(tempStyle, shorthand); + foundShorthands[shorthand] = true; + } else { + var value = tempStyle.getPropertyValue(name); + var priority = tempStyle.getPropertyPriority(name); + } + // Set the property on the real style declaration. + style.setProperty((shorthand || name), value, priority); + } + return true; +}; + + +/** + * Taken from utilities.js as is for injected evaluation. */ devtools.Injected.prototype.getLonghandProperties_ = function(style, shorthandProperty) { @@ -292,3 +357,92 @@ devtools.Injected.prototype.getLonghandProperties_ = function(style, } return properties; }; + + +/** + * Taken from utilities.js as is for injected evaluation. + */ +devtools.Injected.prototype.getShorthandValue_ = function(style, + shorthandProperty) { + var value = style.getPropertyValue(shorthandProperty); + if (!value) { + // Some shorthands (like border) return a null value, so compute a + // shorthand value. + // FIXME: remove this when http://bugs.webkit.org/show_bug.cgi?id=15823 + // is fixed. + + var foundProperties = {}; + for (var i = 0; i < style.length; ++i) { + var individualProperty = style[i]; + if (individualProperty in foundProperties || + style.getPropertyShorthand(individualProperty) !== + shorthandProperty) { + continue; + } + + var individualValue = style.getPropertyValue(individualProperty); + if (style.isPropertyImplicit(individualProperty) || + individualValue === "initial") { + continue; + } + + foundProperties[individualProperty] = true; + + if (!value) { + value = ""; + } else if (value.length) { + value += " "; + } + value += individualValue; + } + } + return value; +}; + + +/** + * Taken from utilities.js as is for injected evaluation. + */ +devtools.Injected.prototype.getShorthandPriority_ = function(style, + shorthandProperty) { + var priority = style.getPropertyPriority(shorthandProperty); + if (!priority) { + for (var i = 0; i < style.length; ++i) { + var individualProperty = style[i]; + if (style.getPropertyShorthand(individualProperty) !== + shorthandProperty) { + continue; + } + priority = style.getPropertyPriority(individualProperty); + break; + } + } + return priority; +}; + + +/** + * Taken from utilities.js as is for injected evaluation. + */ +devtools.Injected.prototype.trimWhitespace_ = function(str) { + return str.replace(/^[\s\xA0]+|[\s\xA0]+$/g, ''); +}; + + +/** + * Taken from utilities.js as is for injected evaluation. + */ +devtools.Injected.prototype.getUniqueStyleProperties_ = function(style) { + var properties = []; + var foundProperties = {}; + + for (var i = 0; i < style.length; ++i) { + var property = style[i]; + if (property in foundProperties) { + continue; + } + foundProperties[property] = true; + properties.push(property); + } + return properties; +}; |