diff options
Diffstat (limited to 'webkit/port/page/inspector/StylesSidebarPane.js')
| -rw-r--r-- | webkit/port/page/inspector/StylesSidebarPane.js | 652 |
1 files changed, 0 insertions, 652 deletions
diff --git a/webkit/port/page/inspector/StylesSidebarPane.js b/webkit/port/page/inspector/StylesSidebarPane.js index d68d604..e69de29 100644 --- a/webkit/port/page/inspector/StylesSidebarPane.js +++ b/webkit/port/page/inspector/StylesSidebarPane.js @@ -1,652 +0,0 @@ -/* - * Copyright (C) 2007 Apple Inc. All rights reserved. - * - * Redistribution and use in source and binary forms, with or without - * modification, are permitted provided that the following conditions - * are met: - * - * 1. Redistributions of source code must retain the above copyright - * notice, this list of conditions and the following disclaimer. - * 2. Redistributions in binary form must reproduce the above copyright - * notice, this list of conditions and the following disclaimer in the - * documentation and/or other materials provided with the distribution. - * 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of - * its contributors may be used to endorse or promote products derived - * from this software without specific prior written permission. - * - * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY - * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED - * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE - * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY - * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES - * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; - * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND - * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT - * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF - * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. - */ - -WebInspector.StylesSidebarPane = function() -{ - WebInspector.SidebarPane.call(this, WebInspector.UIString("Styles")); -} - -WebInspector.StylesSidebarPane.prototype = { - update: function(node, editedSection, forceUpdate) - { - var refresh = false; - - if (forceUpdate) - delete this.node; - - if (!forceUpdate && (!node || node === this.node)) - refresh = true; - - if (node && node.nodeType === Node.TEXT_NODE && node.parentNode) - node = node.parentNode; - - if (node && node.nodeType !== Node.ELEMENT_NODE) - node = null; - - if (node) - this.node = node; - else - node = this.node; - - var body = this.bodyElement; - if (!refresh || !node) { - body.removeChildren(); - this.sections = []; - } - - if (!node) - return; - - var styleRules = []; - - if (refresh) { - for (var i = 0; i < this.sections.length; ++i) { - var section = this.sections[i]; - if (section.computedStyle) - section.styleRule.style = node.ownerDocument.defaultView.getComputedStyle(node); - var styleRule = { section: section, style: section.styleRule.style, computedStyle: section.computedStyle }; - styleRules.push(styleRule); - } - } else { - var computedStyle = node.ownerDocument.defaultView.getComputedStyle(node); - styleRules.push({ computedStyle: true, selectorText: WebInspector.UIString("Computed Style"), style: computedStyle, editable: false }); - - var nodeName = node.nodeName.toLowerCase(); - for (var i = 0; i < node.attributes.length; ++i) { - var attr = node.attributes[i]; - if (attr.style) { - var attrStyle = { style: attr.style, editable: false }; - attrStyle.subtitle = WebInspector.UIString("element’s “%s” attribute", attr.name); - attrStyle.selectorText = nodeName + "[" + attr.name; - if (attr.value.length) - attrStyle.selectorText += "=" + attr.value; - attrStyle.selectorText += "]"; - styleRules.push(attrStyle); - } - } - - if (node.style && node.style.length) { - var inlineStyle = { selectorText: WebInspector.UIString("Inline Style Attribute"), style: node.style }; - inlineStyle.subtitle = WebInspector.UIString("element’s “%s” attribute", "style"); - styleRules.push(inlineStyle); - } - - var matchedStyleRules = node.ownerDocument.defaultView.getMatchedCSSRules(node, "", !Preferences.showUserAgentStyles); - if (matchedStyleRules) { - // 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 }); - } - } - } - - var usedProperties = {}; - var priorityUsed = false; - - // Walk the style rules and make a list of all used and overloaded properties. - for (var i = 0; i < styleRules.length; ++i) { - var styleRule = styleRules[i]; - if (styleRule.computedStyle) - continue; - - styleRule.usedProperties = {}; - - var style = styleRule.style; - for (var j = 0; j < style.length; ++j) { - var name = style[j]; - - if (!priorityUsed && style.getPropertyPriority(name).length) - priorityUsed = true; - - // If the property name is already used by another rule then this rule's - // property is overloaded, so don't add it to the rule's usedProperties. - if (!(name in usedProperties)) - styleRule.usedProperties[name] = true; - - if (name === "font") { - // The font property is not reported as a shorthand. Report finding the individual - // properties so they are visible in computed style. - // FIXME: remove this when http://bugs.webkit.org/show_bug.cgi?id=15598 is fixed. - styleRule.usedProperties["font-family"] = true; - styleRule.usedProperties["font-size"] = true; - styleRule.usedProperties["font-style"] = true; - styleRule.usedProperties["font-variant"] = true; - styleRule.usedProperties["font-weight"] = true; - styleRule.usedProperties["line-height"] = true; - } - } - - // Add all the properties found in this style to the used properties list. - // Do this here so only future rules are affect by properties used in this rule. - for (var name in styleRules[i].usedProperties) - usedProperties[name] = true; - } - - if (priorityUsed) { - // Walk the properties again and account for !important. - var foundPriorityProperties = []; - - // Walk in reverse to match the order !important overrides. - for (var i = (styleRules.length - 1); i >= 0; --i) { - if (styleRules[i].computedStyle) - continue; - - var style = styleRules[i].style; - var uniqueProperties = getUniqueStyleProperties(style); - for (var j = 0; j < uniqueProperties.length; ++j) { - var name = uniqueProperties[j]; - if (style.getPropertyPriority(name).length) { - if (!(name in foundPriorityProperties)) - styleRules[i].usedProperties[name] = true; - else - delete styleRules[i].usedProperties[name]; - foundPriorityProperties[name] = true; - } else if (name in foundPriorityProperties) - delete styleRules[i].usedProperties[name]; - } - } - } - - if (refresh) { - // Walk the style rules and update the sections with new overloaded and used properties. - for (var i = 0; i < styleRules.length; ++i) { - var styleRule = styleRules[i]; - var section = styleRule.section; - section._usedProperties = (styleRule.usedProperties || usedProperties); - section.update((section === editedSection) || styleRule.computedStyle); - } - } else { - // Make a property section for each style rule. - for (var i = 0; i < styleRules.length; ++i) { - var styleRule = styleRules[i]; - var subtitle = styleRule.subtitle; - delete styleRule.subtitle; - - var computedStyle = styleRule.computedStyle; - delete styleRule.computedStyle; - - var ruleUsedProperties = styleRule.usedProperties; - delete styleRule.usedProperties; - - var editable = styleRule.editable; - delete styleRule.editable; - - // Default editable to true if it was omitted. - if (typeof editable === "undefined") - editable = true; - - var section = new WebInspector.StylePropertiesSection(styleRule, subtitle, computedStyle, (ruleUsedProperties || usedProperties), editable); - section.expanded = true; - section.pane = this; - - body.appendChild(section.element); - this.sections.push(section); - } - } - } -} - -WebInspector.StylesSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.prototype; - -WebInspector.StylePropertiesSection = function(styleRule, subtitle, computedStyle, usedProperties, editable) -{ - WebInspector.PropertiesSection.call(this, styleRule.selectorText); - - this.styleRule = styleRule; - this.computedStyle = computedStyle; - this.editable = (editable && !computedStyle); - - // Prevent editing the user agent rules. - if (this.styleRule.parentStyleSheet && !this.styleRule.parentStyleSheet.ownerNode && !this.styleRule.parentStyleSheet.href) - this.editable = false; - - this._usedProperties = usedProperties; - - if (computedStyle) { - if (Preferences.showInheritedComputedStyleProperties) - this.element.addStyleClass("show-inherited"); - - var showInheritedLabel = document.createElement("label"); - var showInheritedInput = document.createElement("input"); - showInheritedInput.type = "checkbox"; - showInheritedInput.checked = Preferences.showInheritedComputedStyleProperties; - - var computedStyleSection = this; - var showInheritedToggleFunction = function(event) { - Preferences.showInheritedComputedStyleProperties = showInheritedInput.checked; - if (Preferences.showInheritedComputedStyleProperties) - computedStyleSection.element.addStyleClass("show-inherited"); - else - computedStyleSection.element.removeStyleClass("show-inherited"); - event.stopPropagation(); - }; - - showInheritedLabel.addEventListener("click", showInheritedToggleFunction, false); - - showInheritedLabel.appendChild(showInheritedInput); - showInheritedLabel.appendChild(document.createTextNode(WebInspector.UIString("Show inherited"))); - this.subtitleElement.appendChild(showInheritedLabel); - } else { - if (!subtitle) { - if (this.styleRule.parentStyleSheet && this.styleRule.parentStyleSheet.href) { - var url = this.styleRule.parentStyleSheet.href; - subtitle = WebInspector.linkifyURL(url, url.trimURL(WebInspector.mainResource ? WebInspector.mainResource.domain : "").escapeHTML()); - this.subtitleElement.addStyleClass("file"); - } else if (this.styleRule.parentStyleSheet && !this.styleRule.parentStyleSheet.ownerNode) - subtitle = WebInspector.UIString("user agent stylesheet"); - else - subtitle = WebInspector.UIString("inline stylesheet"); - } - - this.subtitle = subtitle; - } -} - -WebInspector.StylePropertiesSection.prototype = { - get usedProperties() - { - return this._usedProperties || {}; - }, - - set usedProperties(x) - { - this._usedProperties = x; - this.update(); - }, - - isPropertyInherited: function(property) - { - if (!this.computedStyle || !this._usedProperties) - return false; - // These properties should always show for Computed Style. - var alwaysShowComputedProperties = { "display": true, "height": true, "width": true }; - return !(property in this.usedProperties) && !(property in alwaysShowComputedProperties); - }, - - isPropertyOverloaded: function(property, shorthand) - { - if (this.computedStyle || !this._usedProperties) - return false; - - var used = (property in this.usedProperties); - if (used || !shorthand) - return !used; - - // 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); - for (var j = 0; j < longhandProperties.length; ++j) { - var individualProperty = longhandProperties[j]; - if (individualProperty in this.usedProperties) - return false; - } - - return true; - }, - - update: function(full) - { - if (full || this.computedStyle) { - this.propertiesTreeOutline.removeChildren(); - this.populated = false; - } else { - var child = this.propertiesTreeOutline.children[0]; - while (child) { - child.overloaded = this.isPropertyOverloaded(child.name, child.shorthand); - child = child.traverseNextTreeElement(false, null, true); - } - } - }, - - onpopulate: function() - { - var style = this.styleRule.style; - if (!style.length) - return; - - var foundShorthands = {}; - var uniqueProperties = getUniqueStyleProperties(style); - uniqueProperties.sort(); - - for (var i = 0; i < uniqueProperties.length; ++i) { - var name = uniqueProperties[i]; - var shorthand = style.getPropertyShorthand(name); - - if (shorthand && shorthand in foundShorthands) - continue; - - if (shorthand) { - foundShorthands[shorthand] = true; - name = shorthand; - } - - var isShorthand = (shorthand ? true : false); - var inherited = this.isPropertyInherited(name); - var overloaded = this.isPropertyOverloaded(name, isShorthand); - - var item = new WebInspector.StylePropertyTreeElement(style, name, isShorthand, inherited, overloaded); - this.propertiesTreeOutline.appendChild(item); - } - } -} - -WebInspector.StylePropertiesSection.prototype.__proto__ = WebInspector.PropertiesSection.prototype; - -WebInspector.StylePropertyTreeElement = function(style, name, shorthand, inherited, overloaded) -{ - this.style = style; - this.name = name; - this.shorthand = shorthand; - this._inherited = inherited; - this._overloaded = overloaded; - - // Pass an empty title, the title gets made later in onattach. - TreeElement.call(this, "", null, shorthand); -} - -WebInspector.StylePropertyTreeElement.prototype = { - get inherited() - { - return this._inherited; - }, - - set inherited(x) - { - if (x === this._inherited) - return; - this._inherited = x; - this.updateState(); - }, - - get overloaded() - { - return this._overloaded; - }, - - set overloaded(x) - { - if (x === this._overloaded) - return; - this._overloaded = x; - this.updateState(); - }, - - onattach: function() - { - this.updateTitle(); - }, - - updateTitle: function() - { - // "Nicknames" for some common values that are easier to read. - var valueNicknames = { - "rgb(0, 0, 0)": "black", - "#000": "black", - "#000000": "black", - "rgb(255, 255, 255)": "white", - "#fff": "white", - "#ffffff": "white", - "#FFF": "white", - "#FFFFFF": "white", - "rgba(0, 0, 0, 0)": "transparent", - "rgb(255, 0, 0)": "red", - "rgb(0, 255, 0)": "lime", - "rgb(0, 0, 255)": "blue", - "rgb(255, 255, 0)": "yellow", - "rgb(255, 0, 255)": "magenta", - "rgb(0, 255, 255)": "cyan" - }; - - var priority = (this.shorthand ? getShorthandPriority(this.style, this.name) : this.style.getPropertyPriority(this.name)); - var value = (this.shorthand ? getShorthandValue(this.style, this.name) : this.style.getPropertyValue(this.name)); - var htmlValue = value; - - if (priority && !priority.length) - delete priority; - if (priority) - priority = "!" + priority; - - if (value) { - var urls = value.match(/url\([^)]+\)/); - if (urls) { - for (var i = 0; i < urls.length; ++i) { - var url = urls[i].substring(4, urls[i].length - 1); - htmlValue = htmlValue.replace(urls[i], "url(" + WebInspector.linkifyURL(url) + ")"); - } - } else { - if (value in valueNicknames) - htmlValue = valueNicknames[value]; - htmlValue = htmlValue.escapeHTML(); - } - } else - htmlValue = value = ""; - - this.updateState(); - - var nameElement = document.createElement("span"); - nameElement.className = "name"; - nameElement.textContent = this.name; - - var valueElement = document.createElement("span"); - valueElement.className = "value"; - valueElement.innerHTML = htmlValue; - - if (priority) { - var priorityElement = document.createElement("span"); - priorityElement.className = "priority"; - priorityElement.textContent = priority; - } - - this.listItemElement.removeChildren(); - - this.listItemElement.appendChild(nameElement); - this.listItemElement.appendChild(document.createTextNode(": ")); - this.listItemElement.appendChild(valueElement); - - if (priorityElement) { - this.listItemElement.appendChild(document.createTextNode(" ")); - this.listItemElement.appendChild(priorityElement); - } - - this.listItemElement.appendChild(document.createTextNode(";")); - - if (value) { - // FIXME: this dosen't catch keyword based colors like black and white - var colors = value.match(/((rgb|hsl)a?\([^)]+\))|(#[0-9a-fA-F]{6})|(#[0-9a-fA-F]{3})/g); - if (colors) { - var colorsLength = colors.length; - for (var i = 0; i < colorsLength; ++i) { - var swatchElement = document.createElement("span"); - swatchElement.className = "swatch"; - swatchElement.style.setProperty("background-color", colors[i]); - this.listItemElement.appendChild(swatchElement); - } - } - } - - this.tooltip = this.name + ": " + (valueNicknames[value] || value) + (priority ? " " + priority : ""); - }, - - updateState: function() - { - if (!this.listItemElement) - return; - - var value = (this.shorthand ? getShorthandValue(this.style, this.name) : this.style.getPropertyValue(this.name)); - if (this.style.isPropertyImplicit(this.name) || 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"); - }, - - onpopulate: function() - { - // Only populate once and if this property is a shorthand. - if (this.children.length || !this.shorthand) - return; - - var longhandProperties = getLonghandProperties(this.style, this.name); - for (var i = 0; i < longhandProperties.length; ++i) { - var name = longhandProperties[i]; - - if (this.treeOutline.section) { - var inherited = this.treeOutline.section.isPropertyInherited(name); - var overloaded = this.treeOutline.section.isPropertyOverloaded(name); - } - - var item = new WebInspector.StylePropertyTreeElement(this.style, name, false, inherited, overloaded); - this.appendChild(item); - } - }, - - ondblclick: function(element, event) - { - this.startEditing(event.target); - }, - - startEditing: function(selectElement) - { - // FIXME: we don't allow editing of longhand properties under a shorthand right now. - if (this.parent.shorthand) - return; - - if (WebInspector.isBeingEdited(this.listItemElement) || (this.treeOutline.section && !this.treeOutline.section.editable)) - return; - - var wasExpanded = this.expanded; - this.collapse(); - // Lie about out children to prevent toggling on click. - this.hasChildren = false; - - if (!selectElement) - selectElement = this.listItemElement; - - window.getSelection().setBaseAndExtent(selectElement, 0, selectElement, 1); - - WebInspector.startEditing(this.listItemElement, this.editingCommitted.bind(this), this.editingCancelled.bind(this), wasExpanded); - }, - - editingEnded: function(wasExpanded) - { - this.hasChildren = (this.children.length ? true : false); - if (wasExpanded) - this.expand(); - }, - - editingCancelled: function(e, wasExpanded) - { - this.editingEnded(wasExpanded); - this.updateTitle(); - }, - - editingCommitted: function(e, userInput, previousContent, wasExpanded) - { - this.editingEnded(); - - if (userInput === previousContent) - return; // nothing changed, so do nothing else - - var userInputLength = userInput.trimWhitespace().length; - - // Create a new element to parse the user input CSS. - var parseElement = document.createElement("span"); - parseElement.setAttribute("style", userInput); - - var userInputStyle = parseElement.style; - if (userInputStyle.length || !userInputLength) { - // 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 (!userInputLength) { - // 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(); - this.parent.removeChild(this); - return; - } - - if (!userInputStyle.length) { - // The user typed something, but it didn't parse. Just abort and restore - // the original title for this property. - 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(userInputStyle); - for (var i = 0; i < uniqueProperties.length; ++i) { - var name = uniqueProperties[i]; - var shorthand = userInputStyle.getPropertyShorthand(name); - - if (shorthand && shorthand in foundShorthands) - continue; - - if (shorthand) { - var value = getShorthandValue(userInputStyle, shorthand); - var priority = getShorthandPriority(userInputStyle, shorthand); - foundShorthands[shorthand] = true; - } else { - var value = userInputStyle.getPropertyValue(name); - var priority = userInputStyle.getPropertyPriority(name); - } - - // Set the property on the real style declaration. - this.style.setProperty((shorthand || name), value, priority); - } - - if (this.treeOutline.section && this.treeOutline.section.pane) - this.treeOutline.section.pane.update(null, this.treeOutline.section); - else if (this.treeOutline.section) - this.treeOutline.section.update(true); - else - this.updateTitle(); // FIXME: this will not show new properties. But we don't hit his case yet. - } -} - -WebInspector.StylePropertyTreeElement.prototype.__proto__ = TreeElement.prototype; |