Software: Apache/2.2.16 (Debian). PHP/5.3.3-7+squeeze19 uname -a: Linux mail.tri-specialutilitydistrict.com 2.6.32-5-amd64 #1 SMP Tue May 13 16:34:35 UTC uid=33(www-data) gid=33(www-data) groups=33(www-data) Safe-mode: OFF (not secure) /usr/share/webkit-1.0/webinspector/ drwxr-xr-x | |
| Viewing file: Select action/file-type: /*
* 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
* 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"));
this.settingsSelectElement = document.createElement("select");
var option = document.createElement("option");
option.value = "hex";
option.action = this._changeColorFormat.bind(this);
option.label = WebInspector.UIString("Hex Colors");
this.settingsSelectElement.appendChild(option);
option = document.createElement("option");
option.value = "rgb";
option.action = this._changeColorFormat.bind(this);
option.label = WebInspector.UIString("RGB Colors");
this.settingsSelectElement.appendChild(option);
option = document.createElement("option");
option.value = "hsl";
option.action = this._changeColorFormat.bind(this);
option.label = WebInspector.UIString("HSL Colors");
this.settingsSelectElement.appendChild(option);
this.settingsSelectElement.appendChild(document.createElement("hr"));
option = document.createElement("option");
option.action = this._createNewRule.bind(this);
option.label = WebInspector.UIString("New Style Rule");
this.settingsSelectElement.appendChild(option);
this.settingsSelectElement.addEventListener("click", function(event) { event.stopPropagation() }, false);
this.settingsSelectElement.addEventListener("change", this._changeSetting.bind(this), false);
WebInspector.settings.addEventListener("loaded", this._settingsLoaded, this);
this.titleElement.appendChild(this.settingsSelectElement);
}
WebInspector.StylesSidebarPane.prototype = {
_settingsLoaded: function()
{
var format = WebInspector.settings.colorFormat;
if (format === "hex")
this.settingsSelectElement[0].selected = true;
if (format === "rgb")
this.settingsSelectElement[1].selected = true;
if (format === "hsl")
this.settingsSelectElement[2].selected = true;
},
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 (!node) {
body.removeChildren();
this.sections = [];
return;
}
var self = this;
function callback(styles)
{
if (!styles)
return;
self._update(refresh, node, styles, editedSection, forceUpdate);
}
InspectorBackend.getStyles(WebInspector.Callback.wrap(callback), node.id, !WebInspector.settings.showUserAgentStyles);
},
_update: function(refresh, node, styles, editedSection, forceUpdate)
{
var nodeComputedStyle = new WebInspector.CSSStyleDeclaration(styles.computedStyle);
if (!refresh) {
this.bodyElement.removeChildren();
this.sections = [];
}
var styleRules = [];
if (refresh) {
for (var i = 0; i < this.sections.length; ++i) {
var section = this.sections[i];
if (section instanceof WebInspector.BlankStylePropertiesSection)
continue;
if (section.computedStyle)
section.styleRule.style = nodeComputedStyle;
var styleRule = { section: section, style: section.styleRule.style, computedStyle: section.computedStyle, rule: section.rule };
styleRules.push(styleRule);
}
} else {
styleRules.push({ computedStyle: true, selectorText: WebInspector.UIString("Computed Style"), style: nodeComputedStyle, editable: false });
var styleAttributes = {};
for (var name in styles.styleAttributes) {
var attrStyle = { style: new WebInspector.CSSStyleDeclaration(styles.styleAttributes[name]), editable: false };
attrStyle.subtitle = WebInspector.UIString("element’s “%s” attribute", name);
attrStyle.selectorText = node.nodeName + "[" + name;
if (node.getAttribute(name))
attrStyle.selectorText += "=" + node.getAttribute(name);
attrStyle.selectorText += "]";
styleRules.push(attrStyle);
}
// Always Show element's Style Attributes
if (styles.inlineStyle && node.nodeType === Node.ELEMENT_NODE) {
var inlineStyle = { selectorText: WebInspector.UIString("Style Attribute"), style: new WebInspector.CSSStyleDeclaration(styles.inlineStyle), isAttribute: true };
inlineStyle.subtitle = WebInspector.UIString("element’s “%s” attribute", "style");
styleRules.push(inlineStyle);
}
// Add rules in reverse order to match the cascade order.
for (var i = styles.matchedCSSRules.length - 1; i >= 0; --i) {
var rule = WebInspector.CSSStyleDeclaration.parseRule(styles.matchedCSSRules[i]);
styleRules.push({ style: rule.style, selectorText: rule.selectorText, parentStyleSheet: rule.parentStyleSheet, rule: rule });
}
}
function deleteDisabledProperty(style, name)
{
if (!style || !name)
return;
if (style.__disabledPropertyValues)
delete style.__disabledPropertyValues[name];
if (style.__disabledPropertyPriorities)
delete style.__disabledPropertyPriorities[name];
if (style.__disabledProperties)
delete style.__disabledProperties[name];
}
var usedProperties = {};
var disabledComputedProperties = {};
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;
if (styleRule.section && styleRule.section.noAffect)
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;
}
// Delete any disabled properties, since the property does exist.
// This prevents it from showing twice.
deleteDisabledProperty(style, name);
deleteDisabledProperty(style, style.getPropertyShorthand(name));
}
// 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;
// Remember all disabled properties so they show up in computed style.
if (style.__disabledProperties)
for (var name in style.__disabledProperties)
disabledComputedProperties[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 = style.uniqueStyleProperties;
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;
if (styleRule.computedStyle)
section.disabledComputedProperties = disabledComputedProperties;
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;
var isAttribute = styleRule.isAttribute;
delete styleRule.isAttribute;
// 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);
if (computedStyle)
section.disabledComputedProperties = disabledComputedProperties;
section.pane = this;
if (Preferences.styleRulesExpandedState && section.identifier in Preferences.styleRulesExpandedState)
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);
this.bodyElement.appendChild(section.element);
this.sections.push(section);
}
}
},
_changeSetting: function(event)
{
var options = this.settingsSelectElement.options;
var selectedOption = options[this.settingsSelectElement.selectedIndex];
selectedOption.action(event);
// Select the correct color format setting again, since it needs to be selected.
var selectedIndex = 0;
for (var i = 0; i < options.length; ++i) {
if (options[i].value === WebInspector.settings.colorFormat) {
selectedIndex = i;
break;
}
}
this.settingsSelectElement.selectedIndex = selectedIndex;
},
_changeColorFormat: function(event)
{
var selectedOption = this.settingsSelectElement[this.settingsSelectElement.selectedIndex];
WebInspector.settings.colorFormat = selectedOption.value;
for (var i = 0; i < this.sections.length; ++i)
this.sections[i].update(true);
},
_createNewRule: function(event)
{
this.addBlankSection().startEditingSelector();
},
addBlankSection: function()
{
var blankSection = new WebInspector.BlankStylePropertiesSection(appropriateSelectorForNode(this.node, true));
blankSection.pane = this;
var elementStyleSection = this.sections[1];
this.bodyElement.insertBefore(blankSection.element, elementStyleSection.element.nextSibling);
this.sections.splice(2, 0, blankSection);
return blankSection;
},
removeSection: function(section)
{
var index = this.sections.indexOf(section);
if (index === -1)
return;
this.sections.splice(index, 1);
if (section.element.parentNode)
section.element.parentNode.removeChild(section.element);
}
}
WebInspector.StylesSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.prototype;
WebInspector.StylePropertiesSection = function(styleRule, subtitle, computedStyle, usedProperties, editable)
{
WebInspector.PropertiesSection.call(this, styleRule.selectorText);
this.titleElement.addEventListener("click", this._clickSelector.bind(this), 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.rule && this.rule.isUserAgent;
var isUser = this.rule && this.rule.isUser;
var isViaInspector = this.rule && this.rule.isViaInspector;
if (isUserAgent || isUser)
this.editable = false;
this._usedProperties = usedProperties;
if (computedStyle) {
this.element.addStyleClass("computed-style");
if (WebInspector.settings.showInheritedComputedStyleProperties)
this.element.addStyleClass("show-inherited");
var computedStyleSection = this;
var showInheritedToggleFunction = function(event) {
WebInspector.settings.showInheritedComputedStyleProperties = computedStyleSection._showInheritedCheckbox.checked();
if (WebInspector.settings.showInheritedComputedStyleProperties)
computedStyleSection.element.addStyleClass("show-inherited");
else
computedStyleSection.element.removeStyleClass("show-inherited");
};
this._showInheritedCheckbox = new WebInspector.Checkbox(WebInspector.UIString("Show inherited"),
showInheritedToggleFunction,
WebInspector.settings.showInheritedComputedStyleProperties);
this.subtitleElement.appendChild(this._showInheritedCheckbox.element);
} else {
if (!subtitle) {
if (this.styleRule.parentStyleSheet && this.styleRule.parentStyleSheet.href) {
var url = this.styleRule.parentStyleSheet.href;
subtitle = WebInspector.linkifyURL(url, WebInspector.displayNameForURL(url));
this.subtitleElement.addStyleClass("file");
} else if (isUserAgent)
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");
}
this.subtitle = subtitle;
}
this.identifier = styleRule.selectorText;
if (this.subtitle)
this.identifier += ":" + this.subtitleElement.textContent;
}
WebInspector.StylePropertiesSection.prototype = {
get usedProperties()
{
return this._usedProperties || {};
},
set usedProperties(x)
{
this._usedProperties = x;
this.update();
},
expand: function(dontRememberState)
{
WebInspector.PropertiesSection.prototype.expand.call(this);
if (dontRememberState)
return;
if (!Preferences.styleRulesExpandedState)
Preferences.styleRulesExpandedState = {};
Preferences.styleRulesExpandedState[this.identifier] = true;
},
collapse: function(dontRememberState)
{
WebInspector.PropertiesSection.prototype.collapse.call(this);
if (dontRememberState)
return;
if (!Preferences.styleRulesExpandedState)
Preferences.styleRulesExpandedState = {};
Preferences.styleRulesExpandedState[this.identifier] = false;
},
isPropertyInherited: function(property)
{
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 };
return !(property in this.usedProperties) && !(property in alwaysShowComputedProperties) && !(property in this.disabledComputedProperties);
},
isPropertyOverloaded: function(property, shorthand)
{
if (this.computedStyle || !this._usedProperties || this.noAffect)
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 = this.styleRule.style.getLonghandProperties(property);
for (var j = 0; j < longhandProperties.length; ++j) {
var individualProperty = longhandProperties[j];
if (individualProperty in this.usedProperties)
return false;
}
return true;
},
isInspectorStylesheet: function()
{
return (this.styleRule.parentStyleSheet === WebInspector.panels.elements.stylesheet);
},
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);
}
}
this.afterUpdate();
},
afterUpdate: function()
{
if (this._afterUpdate) {
this._afterUpdate(this);
delete this._afterUpdate;
}
},
onpopulate: function()
{
var style = this.styleRule.style;
var foundShorthands = {};
var uniqueProperties = style.uniqueStyleProperties;
var disabledProperties = style.__disabledPropertyValues || {};
for (var name in disabledProperties)
uniqueProperties.push(name);
uniqueProperties.sort();
for (var i = 0; i < uniqueProperties.length; ++i) {
var name = uniqueProperties[i];
var disabled = name in disabledProperties;
if (!disabled && this.disabledComputedProperties && !(name in this.usedProperties) && name in this.disabledComputedProperties)
disabled = true;
var shorthand = !disabled ? style.getPropertyShorthand(name) : null;
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(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;
},
_clickSelector: function(event)
{
event.stopPropagation();
// Don't search "Computed Styles", "Style Attribute", or Mapped Attributes.
if (this.computedStyle || !this.rule || this.rule.isUser)
return;
var searchElement = document.getElementById("search");
searchElement.value = this.styleRule.selectorText;
WebInspector.performSearch({ target: searchElement });
},
_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;
WebInspector.startEditing(this.titleElement, this.editingSelectorCommitted.bind(this), this.editingSelectorCancelled.bind(this), null);
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;
function callback(newRulePayload, doesAffectSelectedNode)
{
if (!newRulePayload) {
// Invalid Syntax for a Selector
moveToNextIfNeeded.call(self);
return;
}
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();
WebInspector.panels.elements.renameSelector(oldIdentifier, this.identifier, oldContent, newContent);
moveToNextIfNeeded.call(self);
}
InspectorBackend.setRuleSelector(WebInspector.Callback.wrap(callback), this.rule.id, newContent, this.pane.node.id);
},
editingSelectorCancelled: function()
{
// Do nothing, this is overridden by BlankStylePropertiesSection.
}
}
WebInspector.StylePropertiesSection.prototype.__proto__ = WebInspector.PropertiesSection.prototype;
WebInspector.BlankStylePropertiesSection = function(defaultSelectorText)
{
WebInspector.StylePropertiesSection.call(this, {selectorText: defaultSelectorText, rule: {isViaInspector: true}}, "", false, {}, false);
this.element.addStyleClass("blank-section");
}
WebInspector.BlankStylePropertiesSection.prototype = {
expand: function()
{
// Do nothing, blank sections are not expandable.
},
editingSelectorCommitted: function(element, newContent, oldContent, context)
{
var self = this;
function callback(rule, doesSelectorAffectSelectedNode)
{
if (!rule) {
// Invalid Syntax for a Selector
self.editingSelectorCancelled();
return;
}
var styleRule = WebInspector.CSSStyleDeclaration.parseRule(rule);
styleRule.rule = rule;
self.makeNormal(styleRule);
if (!doesSelectorAffectSelectedNode) {
self.noAffect = true;
self.element.addStyleClass("no-affect");
}
self.subtitleElement.textContent = WebInspector.UIString("via inspector");
self.expand();
self.addNewBlankProperty().startEditing();
}
InspectorBackend.addRule(WebInspector.Callback.wrap(callback), newContent, this.pane.node.id);
},
editingSelectorCancelled: function()
{
this.pane.removeSection(this);
},
makeNormal: function(styleRule)
{
this.element.removeStyleClass("blank-section");
this.styleRule = styleRule;
this.rule = styleRule.rule;
this.computedStyle = false;
this.editable = true;
this.identifier = styleRule.selectorText + ":via inspector";
this.__proto__ = WebInspector.StylePropertiesSection.prototype;
}
}
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;
this._inherited = inherited;
this._overloaded = overloaded;
this._disabled = disabled;
// 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();
},
get disabled()
{
return this._disabled;
},
set disabled(x)
{
if (x === this._disabled)
return;
this._disabled = x;
this.updateState();
},
get priority()
{
if (this.disabled && this.style.__disabledPropertyPriorities && this.name in this.style.__disabledPropertyPriorities)
return this.style.__disabledPropertyPriorities[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 ? this.style.getShorthandValue(this.name) : this.style.getPropertyValue(this.name));
},
onattach: function()
{
this.updateTitle();
},
updateTitle: function()
{
var priority = this.priority;
var value = this.value;
if (priority && !priority.length)
delete priority;
if (priority)
priority = "!" + priority;
this.updateState();
var enabledCheckboxElement = document.createElement("input");
enabledCheckboxElement.className = "enabled-button";
enabledCheckboxElement.type = "checkbox";
enabledCheckboxElement.checked = !this.disabled;
enabledCheckboxElement.addEventListener("change", this.toggleEnabled.bind(this), false);
var nameElement = document.createElement("span");
nameElement.className = "name";
nameElement.textContent = this.name;
this.nameElement = nameElement;
var valueElement = document.createElement("span");
valueElement.className = "value";
this.valueElement = valueElement;
if (value) {
function processValue(regex, processor, nextProcessor, valueText)
{
var container = document.createDocumentFragment();
var items = valueText.replace(regex, "\0$1\0").split("\0");
for (var i = 0; i < items.length; ++i) {
if ((i % 2) === 0) {
if (nextProcessor)
container.appendChild(nextProcessor(items[i]));
else
container.appendChild(document.createTextNode(items[i]));
} else {
var processedNode = processor(items[i]);
if (processedNode)
container.appendChild(processedNode);
}
}
return container;
}
function linkifyURL(url)
{
var container = document.createDocumentFragment();
container.appendChild(document.createTextNode("url("));
container.appendChild(WebInspector.linkifyURLAsNode(url, url, null, (url in WebInspector.resourceURLMap)));
container.appendChild(document.createTextNode(")"));
return container;
}
function processColor(text)
{
try {
var color = new WebInspector.Color(text);
} catch (e) {
return document.createTextNode(text);
}
var swatchElement = document.createElement("span");
swatchElement.title = WebInspector.UIString("Click to change color format");
swatchElement.className = "swatch";
swatchElement.style.setProperty("background-color", text);
swatchElement.addEventListener("click", changeColorDisplay, false);
swatchElement.addEventListener("dblclick", function(event) { event.stopPropagation() }, false);
var format;
if (Preferences.showColorNicknames && color.nickname)
format = "nickname";
else if (WebInspector.settings.colorFormat === "rgb")
format = (color.simple ? "rgb" : "rgba");
else if (WebInspector.settings.colorFormat === "hsl")
format = (color.simple ? "hsl" : "hsla");
else if (color.simple)
format = (color.hasShortHex() ? "shorthex" : "hex");
else
format = "rgba";
var colorValueElement = document.createElement("span");
colorValueElement.textContent = color.toString(format);
function changeColorDisplay(event)
{
switch (format) {
case "rgb":
format = "hsl";
break;
case "shorthex":
format = "hex";
break;
case "hex":
format = "rgb";
break;
case "nickname":
if (color.simple) {
if (color.hasShortHex())
format = "shorthex";
else
format = "hex";
break;
}
format = "rgba";
break;
case "hsl":
if (color.nickname)
format = "nickname";
else if (color.hasShortHex())
format = "shorthex";
else
format = "hex";
break;
case "rgba":
format = "hsla";
break;
case "hsla":
if (color.nickname)
format = "nickname";
else
format = "rgba";
break;
}
colorValueElement.textContent = color.toString(format);
}
var container = document.createDocumentFragment();
container.appendChild(swatchElement);
container.appendChild(colorValueElement);
return container;
}
var colorRegex = /((?:rgb|hsl)a?\([^)]+\)|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3}|\b\w+\b(?!-))/g;
var colorProcessor = processValue.bind(window, colorRegex, processColor, null);
valueElement.appendChild(processValue(/url\(([^)]+)\)/g, linkifyURL, colorProcessor, value));
}
if (priority) {
var priorityElement = document.createElement("span");
priorityElement.className = "priority";
priorityElement.textContent = priority;
}
this.listItemElement.removeChildren();
// Append the checkbox for root elements of an editable section.
if (this.treeOutline.section && this.treeOutline.section.editable && this.parent.root)
this.listItemElement.appendChild(enabledCheckboxElement);
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(";"));
this.tooltip = this.name + ": " + valueElement.textContent + (priority ? " " + priority : "");
},
updateAll: function(updateAllRules)
{
if (updateAllRules && 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.
},
toggleEnabled: function(event)
{
var disabled = !event.target.checked;
var self = this;
function callback(newPayload)
{
if (!newPayload)
return;
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.
self.disabled = disabled;
if (self.treeOutline.section && self.treeOutline.section.pane)
self.treeOutline.section.pane.dispatchEventToListeners("style property toggled");
self.updateAll(true);
}
InspectorBackend.toggleStyleEnabled(WebInspector.Callback.wrap(callback), this.style.id, this.name, disabled);
},
updateState: function()
{
if (!this.listItemElement)
return;
if (this.style.isPropertyImplicit(this.name) || this.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");
if (this.disabled)
this.listItemElement.addStyleClass("disabled");
else
this.listItemElement.removeStyleClass("disabled");
},
onpopulate: function()
{
// Only populate once and if this property is a shorthand.
if (this.children.length || !this.shorthand)
return;
var longhandProperties = this.style.getLonghandProperties(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._styleRule, this.style, name, false, inherited, overloaded);
this.appendChild(item);
}
},
ondblclick: function(event)
{
this.startEditing(event.target);
event.stopPropagation();
},
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 context = { expanded: this.expanded, hasChildren: this.hasChildren };
// Lie about our children to prevent expanding on double click and to collapse shorthands.
this.hasChildren = false;
if (!selectElement)
selectElement = this.listItemElement;
this.listItemElement.handleKeyEvent = this.editingKeyDown.bind(this);
WebInspector.startEditing(this.listItemElement, this.editingCommitted.bind(this), this.editingCancelled.bind(this), context);
window.getSelection().setBaseAndExtent(selectElement, 0, selectElement, 1);
},
editingKeyDown: function(event)
{
var arrowKeyPressed = (event.keyIdentifier === "Up" || event.keyIdentifier === "Down");
var pageKeyPressed = (event.keyIdentifier === "PageUp" || event.keyIdentifier === "PageDown");
if (!arrowKeyPressed && !pageKeyPressed)
return;
var selection = window.getSelection();
if (!selection.rangeCount)
return;
var selectionRange = selection.getRangeAt(0);
if (selectionRange.commonAncestorContainer !== this.listItemElement && !selectionRange.commonAncestorContainer.isDescendant(this.listItemElement))
return;
const styleValueDelimeters = " \t\n\"':;,/()";
var wordRange = selectionRange.startContainer.rangeOfWord(selectionRange.startOffset, styleValueDelimeters, this.listItemElement);
var wordString = wordRange.toString();
var replacementString = wordString;
var matches = /(.*?)(-?\d+(?:\.\d+)?)(.*)/.exec(wordString);
if (matches && matches.length) {
var prefix = matches[1];
var number = parseFloat(matches[2]);
var suffix = matches[3];
// If the number is near zero or the number is one and the direction will take it near zero.
var numberNearZero = (number < 1 && number > -1);
if (number === 1 && event.keyIdentifier === "Down")
numberNearZero = true;
else if (number === -1 && event.keyIdentifier === "Up")
numberNearZero = true;
if (numberNearZero && event.altKey && arrowKeyPressed) {
if (event.keyIdentifier === "Down")
number = Math.ceil(number - 1);
else
number = Math.floor(number + 1);
} else {
// Jump by 10 when shift is down or jump by 0.1 when near zero or Alt/Option is down.
// Also jump by 10 for page up and down, or by 100 if shift is held with a page key.
var changeAmount = 1;
if (event.shiftKey && pageKeyPressed)
changeAmount = 100;
else if (event.shiftKey || pageKeyPressed)
changeAmount = 10;
else if (event.altKey || numberNearZero)
changeAmount = 0.1;
if (event.keyIdentifier === "Down" || event.keyIdentifier === "PageDown")
changeAmount *= -1;
// Make the new number and constrain it to a precision of 6, this matches numbers the engine returns.
// Use the Number constructor to forget the fixed precision, so 1.100000 will print as 1.1.
number = Number((number + changeAmount).toFixed(6));
}
replacementString = prefix + number + suffix;
} else {
// FIXME: this should cycle through known keywords for the current property name.
return;
}
var replacementTextNode = document.createTextNode(replacementString);
wordRange.deleteContents();
wordRange.insertNode(replacementTextNode);
var finalSelectionRange = document.createRange();
finalSelectionRange.setStart(replacementTextNode, 0);
finalSelectionRange.setEnd(replacementTextNode, replacementString.length);
selection.removeAllRanges();
selection.addRange(finalSelectionRange);
event.handled = true;
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 = 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.
InspectorBackend.setStyleText(WebInspector.Callback.wrap(null), this.style.id, this.originalCSSText);
}
this.applyStyleText(this.listItemElement.textContent);
},
editingEnded: function(context)
{
this.hasChildren = context.hasChildren;
if (context.expanded)
this.expand();
delete this.listItemElement.handleKeyEvent;
delete this.originalCSSText;
},
editingCancelled: function(element, context)
{
if (this._newProperty)
this.treeOutline.removeChild(this);
else if (this.originalCSSText) {
InspectorBackend.setStyleText(WebInspector.Callback.wrap(null), this.style.id, this.originalCSSText);
if (this.treeOutline.section && this.treeOutline.section.pane)
this.treeOutline.section.pane.dispatchEventToListeners("style edited");
this.updateAll();
} else
this.updateTitle();
this.editingEnded(context);
},
editingCommitted: function(element, userInput, previousContent, context, moveDirection)
{
this.editingEnded(context);
// 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;
section.addNewBlankProperty().startEditing();
return;
}
if (moveToSelector)
section.startEditingSelector();
}
},
applyStyleText: function(styleText, updateInterface)
{
var section = this.treeOutline.section;
var elementsPanel = WebInspector.panels.elements;
var styleTextLength = styleText.trim().length;
if (!styleTextLength && updateInterface) {
if (this._newProperty) {
// The user deleted everything, so remove the tree element and update.
this.parent.removeChild(this);
section.afterUpdate();
return;
} else {
delete section._afterUpdate;
}
}
var self = this;
function callback(success, newPayload, changedProperties)
{
if (!success) {
// 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;
}
elementsPanel.removeStyleChange(section.identifier, self.style, self.name);
if (!styleTextLength) {
// Do remove ourselves from UI when the property removal is confirmed.
self.parent.removeChild(self);
} else {
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)
self.updateAll(true);
}
InspectorBackend.applyStyleText(WebInspector.Callback.wrap(callback), this.style.id, styleText.trim(), this.name);
}
}
WebInspector.StylePropertyTreeElement.prototype.__proto__ = TreeElement.prototype;
|
:: Command execute :: | |
--[ c99shell v. 2.0 [PHP 7 Update] [25.02.2019] maintained by KaizenLouie | C99Shell Github | Generation time: 0.009 ]-- |