9fcf981b754bc9b8180f27349a6d89b81d003bc5
[WebKit-https.git] / WebCore / page / inspector / StylesSidebarPane.js
1 /*
2  * Copyright (C) 2007 Apple Inc.  All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  *
8  * 1.  Redistributions of source code must retain the above copyright
9  *     notice, this list of conditions and the following disclaimer.
10  * 2.  Redistributions in binary form must reproduce the above copyright
11  *     notice, this list of conditions and the following disclaimer in the
12  *     documentation and/or other materials provided with the distribution.
13  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
14  *     its contributors may be used to endorse or promote products derived
15  *     from this software without specific prior written permission.
16  *
17  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
18  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
19  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
20  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
21  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
22  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
23  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
24  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
25  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
26  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
27  */
28
29 WebInspector.StylesSidebarPane = function()
30 {
31     WebInspector.SidebarPane.call(this, WebInspector.UIString("Styles"));
32 }
33
34 WebInspector.StylesSidebarPane.prototype = {
35     update: function(node, editedSection, forceUpdate)
36     {
37         var refresh = false;
38
39         if (forceUpdate)
40             delete this.node;
41
42         if (!forceUpdate && (!node || node === this.node))
43             refresh = true;
44
45         if (node && node.nodeType === Node.TEXT_NODE && node.parentNode)
46             node = node.parentNode;
47
48         if (node && node.nodeType !== Node.ELEMENT_NODE)
49             node = null;
50
51         if (node)
52             this.node = node;
53         else
54             node = this.node;
55
56         var body = this.bodyElement;
57         if (!refresh || !node) {
58             body.removeChildren();
59             this.sections = [];
60         }
61
62         if (!node)
63             return;
64
65         var styleRules = [];
66
67         if (refresh) {
68             for (var i = 0; i < this.sections.length; ++i) {
69                 var section = this.sections[i];
70                 if (section.computedStyle)
71                     section.styleRule.style = node.ownerDocument.defaultView.getComputedStyle(node);
72                 var styleRule = { section: section, style: section.styleRule.style, computedStyle: section.computedStyle };
73                 styleRules.push(styleRule);
74             }
75         } else {
76             var computedStyle = node.ownerDocument.defaultView.getComputedStyle(node);
77             styleRules.push({ computedStyle: true, selectorText: WebInspector.UIString("Computed Style"), style: computedStyle, editable: false });
78
79             var nodeName = node.nodeName.toLowerCase();
80             for (var i = 0; i < node.attributes.length; ++i) {
81                 var attr = node.attributes[i];
82                 if (attr.style) {
83                     var attrStyle = { style: attr.style, editable: false };
84                     attrStyle.subtitle = WebInspector.UIString("element’s “%s” attribute", attr.name);
85                     attrStyle.selectorText = nodeName + "[" + attr.name;
86                     if (attr.value.length)
87                         attrStyle.selectorText += "=" + attr.value;
88                     attrStyle.selectorText += "]";
89                     styleRules.push(attrStyle);
90                 }
91             }
92
93             if (node.style && (node.style.length || Object.hasProperties(node.style.__disabledProperties))) {
94                 var inlineStyle = { selectorText: WebInspector.UIString("Inline Style Attribute"), style: node.style };
95                 inlineStyle.subtitle = WebInspector.UIString("element’s “%s” attribute", "style");
96                 styleRules.push(inlineStyle);
97             }
98
99             var matchedStyleRules = node.ownerDocument.defaultView.getMatchedCSSRules(node, "", !Preferences.showUserAgentStyles);
100             if (matchedStyleRules) {
101                 // Add rules in reverse order to match the cascade order.
102                 for (var i = (matchedStyleRules.length - 1); i >= 0; --i) {
103                     var rule = matchedStyleRules[i];
104                     styleRules.push({ style: rule.style, selectorText: rule.selectorText, parentStyleSheet: rule.parentStyleSheet });
105                 }
106             }
107         }
108
109         function deleteDisabledProperty(style, name)
110         {
111             if (!style || !name)
112                 return;
113             if (style.__disabledPropertyValues)
114                 delete style.__disabledPropertyValues[name];
115             if (style.__disabledPropertyPriorities)
116                 delete style.__disabledPropertyPriorities[name];
117             if (style.__disabledProperties)
118                 delete style.__disabledProperties[name];
119         }
120
121         var usedProperties = {};
122         var disabledComputedProperties = {};
123         var priorityUsed = false;
124
125         // Walk the style rules and make a list of all used and overloaded properties.
126         for (var i = 0; i < styleRules.length; ++i) {
127             var styleRule = styleRules[i];
128             if (styleRule.computedStyle)
129                 continue;
130
131             styleRule.usedProperties = {};
132
133             var style = styleRule.style;
134             for (var j = 0; j < style.length; ++j) {
135                 var name = style[j];
136
137                 if (!priorityUsed && style.getPropertyPriority(name).length)
138                     priorityUsed = true;
139
140                 // If the property name is already used by another rule then this rule's
141                 // property is overloaded, so don't add it to the rule's usedProperties.
142                 if (!(name in usedProperties))
143                     styleRule.usedProperties[name] = true;
144
145                 if (name === "font") {
146                     // The font property is not reported as a shorthand. Report finding the individual
147                     // properties so they are visible in computed style.
148                     // FIXME: remove this when http://bugs.webkit.org/show_bug.cgi?id=15598 is fixed.
149                     styleRule.usedProperties["font-family"] = true;
150                     styleRule.usedProperties["font-size"] = true;
151                     styleRule.usedProperties["font-style"] = true;
152                     styleRule.usedProperties["font-variant"] = true;
153                     styleRule.usedProperties["font-weight"] = true;
154                     styleRule.usedProperties["line-height"] = true;
155                 }
156
157                 // Delete any disabled properties, since the property does exist.
158                 // This prevents it from showing twice.
159                 deleteDisabledProperty(style, name);
160                 deleteDisabledProperty(style, style.getPropertyShorthand(name));
161             }
162
163             // Add all the properties found in this style to the used properties list.
164             // Do this here so only future rules are affect by properties used in this rule.
165             for (var name in styleRules[i].usedProperties)
166                 usedProperties[name] = true;
167
168             // Remember all disabled properties so they show up in computed style.
169             if (style.__disabledProperties)
170                 for (var name in style.__disabledProperties)
171                     disabledComputedProperties[name] = true;
172         }
173
174         if (priorityUsed) {
175             // Walk the properties again and account for !important.
176             var foundPriorityProperties = [];
177
178             // Walk in reverse to match the order !important overrides.
179             for (var i = (styleRules.length - 1); i >= 0; --i) {
180                 if (styleRules[i].computedStyle)
181                     continue;
182
183                 var style = styleRules[i].style;
184                 var uniqueProperties = getUniqueStyleProperties(style);
185                 for (var j = 0; j < uniqueProperties.length; ++j) {
186                     var name = uniqueProperties[j];
187                     if (style.getPropertyPriority(name).length) {
188                         if (!(name in foundPriorityProperties))
189                             styleRules[i].usedProperties[name] = true;
190                         else
191                             delete styleRules[i].usedProperties[name];
192                         foundPriorityProperties[name] = true;
193                     } else if (name in foundPriorityProperties)
194                         delete styleRules[i].usedProperties[name];
195                 }
196             }
197         }
198
199         if (refresh) {
200             // Walk the style rules and update the sections with new overloaded and used properties.
201             for (var i = 0; i < styleRules.length; ++i) {
202                 var styleRule = styleRules[i];
203                 var section = styleRule.section;
204                 if (styleRule.computedStyle)
205                     section.disabledComputedProperties = disabledComputedProperties;
206                 section._usedProperties = (styleRule.usedProperties || usedProperties);
207                 section.update((section === editedSection) || styleRule.computedStyle);
208             }
209         } else {
210             // Make a property section for each style rule.
211             for (var i = 0; i < styleRules.length; ++i) {
212                 var styleRule = styleRules[i];
213                 var subtitle = styleRule.subtitle;
214                 delete styleRule.subtitle;
215
216                 var computedStyle = styleRule.computedStyle;
217                 delete styleRule.computedStyle;
218
219                 var ruleUsedProperties = styleRule.usedProperties;
220                 delete styleRule.usedProperties;
221
222                 var editable = styleRule.editable;
223                 delete styleRule.editable;
224
225                 // Default editable to true if it was omitted.
226                 if (typeof editable === "undefined")
227                     editable = true;
228
229                 var section = new WebInspector.StylePropertiesSection(styleRule, subtitle, computedStyle, (ruleUsedProperties || usedProperties), editable);
230                 if (computedStyle)
231                     section.disabledComputedProperties = disabledComputedProperties;
232                 section.expanded = true;
233                 section.pane = this;
234
235                 body.appendChild(section.element);
236                 this.sections.push(section);
237             }
238         }
239     }
240 }
241
242 WebInspector.StylesSidebarPane.prototype.__proto__ = WebInspector.SidebarPane.prototype;
243
244 WebInspector.StylePropertiesSection = function(styleRule, subtitle, computedStyle, usedProperties, editable)
245 {
246     WebInspector.PropertiesSection.call(this, styleRule.selectorText);
247
248     this.styleRule = styleRule;
249     this.computedStyle = computedStyle;
250     this.editable = (editable && !computedStyle);
251
252     // Prevent editing the user agent and user rules.
253     var isUserAgent = this.styleRule.parentStyleSheet && !this.styleRule.parentStyleSheet.ownerNode && !this.styleRule.parentStyleSheet.href;
254     var isUser = this.styleRule.parentStyleSheet && this.styleRule.parentStyleSheet.ownerNode && this.styleRule.parentStyleSheet.ownerNode.nodeName == '#document';
255     if (isUserAgent || isUser)
256         this.editable = false;
257
258     this._usedProperties = usedProperties;
259
260     if (computedStyle) {
261         this.element.addStyleClass("computed-style");
262
263         if (Preferences.showInheritedComputedStyleProperties)
264             this.element.addStyleClass("show-inherited");
265
266         var showInheritedLabel = document.createElement("label");
267         var showInheritedInput = document.createElement("input");
268         showInheritedInput.type = "checkbox";
269         showInheritedInput.checked = Preferences.showInheritedComputedStyleProperties;
270
271         var computedStyleSection = this;
272         var showInheritedToggleFunction = function(event) {
273             Preferences.showInheritedComputedStyleProperties = showInheritedInput.checked;
274             if (Preferences.showInheritedComputedStyleProperties)
275                 computedStyleSection.element.addStyleClass("show-inherited");
276             else
277                 computedStyleSection.element.removeStyleClass("show-inherited");
278             event.stopPropagation();
279         };
280
281         showInheritedLabel.addEventListener("click", showInheritedToggleFunction, false);
282
283         showInheritedLabel.appendChild(showInheritedInput);
284         showInheritedLabel.appendChild(document.createTextNode(WebInspector.UIString("Show inherited")));
285         this.subtitleElement.appendChild(showInheritedLabel);
286     } else {
287         if (!subtitle) {
288             if (this.styleRule.parentStyleSheet && this.styleRule.parentStyleSheet.href) {
289                 var url = this.styleRule.parentStyleSheet.href;
290                 subtitle = WebInspector.linkifyURL(url, WebInspector.displayNameForURL(url).escapeHTML());
291                 this.subtitleElement.addStyleClass("file");
292             } else if (isUserAgent)
293                 subtitle = WebInspector.UIString("user agent stylesheet");
294             else if (isUser)
295                 subtitle = WebInspector.UIString("user stylesheet");
296             else
297                 subtitle = WebInspector.UIString("inline stylesheet");
298         }
299
300         this.subtitle = subtitle;
301     }
302 }
303
304 WebInspector.StylePropertiesSection.prototype = {
305     get usedProperties()
306     {
307         return this._usedProperties || {};
308     },
309
310     set usedProperties(x)
311     {
312         this._usedProperties = x;
313         this.update();
314     },
315
316     isPropertyInherited: function(property)
317     {
318         if (!this.computedStyle || !this._usedProperties)
319             return false;
320         // These properties should always show for Computed Style.
321         var alwaysShowComputedProperties = { "display": true, "height": true, "width": true };
322         return !(property in this.usedProperties) && !(property in alwaysShowComputedProperties) && !(property in this.disabledComputedProperties);
323     },
324
325     isPropertyOverloaded: function(property, shorthand)
326     {
327         if (this.computedStyle || !this._usedProperties)
328             return false;
329
330         var used = (property in this.usedProperties);
331         if (used || !shorthand)
332             return !used;
333
334         // Find out if any of the individual longhand properties of the shorthand
335         // are used, if none are then the shorthand is overloaded too.
336         var longhandProperties = getLonghandProperties(this.styleRule.style, property);
337         for (var j = 0; j < longhandProperties.length; ++j) {
338             var individualProperty = longhandProperties[j];
339             if (individualProperty in this.usedProperties)
340                 return false;
341         }
342
343         return true;
344     },
345
346     update: function(full)
347     {
348         if (full || this.computedStyle) {
349             this.propertiesTreeOutline.removeChildren();
350             this.populated = false;
351         } else {
352             var child = this.propertiesTreeOutline.children[0];
353             while (child) {
354                 child.overloaded = this.isPropertyOverloaded(child.name, child.shorthand);
355                 child = child.traverseNextTreeElement(false, null, true);
356             }
357         }
358     },
359
360     onpopulate: function()
361     {
362         var style = this.styleRule.style;
363
364         var foundShorthands = {};
365         var uniqueProperties = getUniqueStyleProperties(style);
366         var disabledProperties = style.__disabledPropertyValues || {};
367
368         for (var name in disabledProperties)
369             uniqueProperties.push(name);
370
371         uniqueProperties.sort();
372
373         for (var i = 0; i < uniqueProperties.length; ++i) {
374             var name = uniqueProperties[i];
375             var disabled = name in disabledProperties;
376             if (!disabled && this.disabledComputedProperties && !(name in this.usedProperties) && name in this.disabledComputedProperties)
377                 disabled = true;
378
379             var shorthand = !disabled ? style.getPropertyShorthand(name) : null;
380
381             if (shorthand && shorthand in foundShorthands)
382                 continue;
383
384             if (shorthand) {
385                 foundShorthands[shorthand] = true;
386                 name = shorthand;
387             }
388
389             var isShorthand = (shorthand ? true : false);
390             var inherited = this.isPropertyInherited(name);
391             var overloaded = this.isPropertyOverloaded(name, isShorthand);
392
393             var item = new WebInspector.StylePropertyTreeElement(style, name, isShorthand, inherited, overloaded, disabled);
394             this.propertiesTreeOutline.appendChild(item);
395         }
396     }
397 }
398
399 WebInspector.StylePropertiesSection.prototype.__proto__ = WebInspector.PropertiesSection.prototype;
400
401 WebInspector.StylePropertyTreeElement = function(style, name, shorthand, inherited, overloaded, disabled)
402 {
403     this.style = style;
404     this.name = name;
405     this.shorthand = shorthand;
406     this._inherited = inherited;
407     this._overloaded = overloaded;
408     this._disabled = disabled;
409
410     // Pass an empty title, the title gets made later in onattach.
411     TreeElement.call(this, "", null, shorthand);
412 }
413
414 WebInspector.StylePropertyTreeElement.prototype = {
415     get inherited()
416     {
417         return this._inherited;
418     },
419
420     set inherited(x)
421     {
422         if (x === this._inherited)
423             return;
424         this._inherited = x;
425         this.updateState();
426     },
427
428     get overloaded()
429     {
430         return this._overloaded;
431     },
432
433     set overloaded(x)
434     {
435         if (x === this._overloaded)
436             return;
437         this._overloaded = x;
438         this.updateState();
439     },
440
441     get disabled()
442     {
443         return this._disabled;
444     },
445
446     set disabled(x)
447     {
448         if (x === this._disabled)
449             return;
450         this._disabled = x;
451         this.updateState();
452     },
453
454     get priority()
455     {
456         if (this.disabled && this.style.__disabledPropertyPriorities && this.name in this.style.__disabledPropertyPriorities)
457             return this.style.__disabledPropertyPriorities[this.name];
458         return (this.shorthand ? getShorthandPriority(this.style, this.name) : this.style.getPropertyPriority(this.name));
459     },
460
461     get value()
462     {
463         if (this.disabled && this.style.__disabledPropertyValues && this.name in this.style.__disabledPropertyValues)
464             return this.style.__disabledPropertyValues[this.name];
465         return (this.shorthand ? getShorthandValue(this.style, this.name) : this.style.getPropertyValue(this.name));
466     },
467
468     onattach: function()
469     {
470         this.updateTitle();
471     },
472
473     updateTitle: function()
474     {
475         // "Nicknames" for some common values that are easier to read.
476         var valueNicknames = {
477             "rgb(0, 0, 0)": "black",
478             "#000": "black",
479             "#000000": "black",
480             "rgb(255, 255, 255)": "white",
481             "#fff": "white",
482             "#ffffff": "white",
483             "#FFF": "white",
484             "#FFFFFF": "white",
485             "rgba(0, 0, 0, 0)": "transparent",
486             "rgb(255, 0, 0)": "red",
487             "rgb(0, 255, 0)": "lime",
488             "rgb(0, 0, 255)": "blue",
489             "rgb(255, 255, 0)": "yellow",
490             "rgb(255, 0, 255)": "magenta",
491             "rgb(0, 255, 255)": "cyan"
492         };
493
494         var priority = this.priority;
495         var value = this.value;
496         var htmlValue = value;
497
498         if (priority && !priority.length)
499             delete priority;
500         if (priority)
501             priority = "!" + priority;
502
503         if (value) {
504             var urls = value.match(/url\([^)]+\)/);
505             if (urls) {
506                 for (var i = 0; i < urls.length; ++i) {
507                     var url = urls[i].substring(4, urls[i].length - 1);
508                     htmlValue = htmlValue.replace(urls[i], "url(" + WebInspector.linkifyURL(url) + ")");
509                 }
510             } else {
511                 if (value in valueNicknames)
512                     htmlValue = valueNicknames[value];
513                 htmlValue = htmlValue.escapeHTML();
514             }
515         } else
516             htmlValue = value = "";
517
518         this.updateState();
519
520         var enabledCheckboxElement = document.createElement("input");
521         enabledCheckboxElement.className = "enabled-button";
522         enabledCheckboxElement.type = "checkbox";
523         enabledCheckboxElement.checked = !this.disabled;
524         enabledCheckboxElement.addEventListener("change", this.toggleEnabled.bind(this), false);
525
526         var nameElement = document.createElement("span");
527         nameElement.className = "name";
528         nameElement.textContent = this.name;
529
530         var valueElement = document.createElement("span");
531         valueElement.className = "value";
532         valueElement.innerHTML = htmlValue;
533
534         if (priority) {
535             var priorityElement = document.createElement("span");
536             priorityElement.className = "priority";
537             priorityElement.textContent = priority;
538         }
539
540         this.listItemElement.removeChildren();
541
542         // Append the checkbox for root elements of an editable section.
543         if (this.treeOutline.section && this.treeOutline.section.editable && this.parent.root)
544             this.listItemElement.appendChild(enabledCheckboxElement);
545         this.listItemElement.appendChild(nameElement);
546         this.listItemElement.appendChild(document.createTextNode(": "));
547         this.listItemElement.appendChild(valueElement);
548
549         if (priorityElement) {
550             this.listItemElement.appendChild(document.createTextNode(" "));
551             this.listItemElement.appendChild(priorityElement);
552         }
553
554         this.listItemElement.appendChild(document.createTextNode(";"));
555
556         if (value) {
557             // FIXME: this dosen't catch keyword based colors like black and white
558             var colors = value.match(/((rgb|hsl)a?\([^)]+\))|(#[0-9a-fA-F]{6})|(#[0-9a-fA-F]{3})/g);
559             if (colors) {
560                 var colorsLength = colors.length;
561                 for (var i = 0; i < colorsLength; ++i) {
562                     var swatchElement = document.createElement("span");
563                     swatchElement.className = "swatch";
564                     swatchElement.style.setProperty("background-color", colors[i]);
565                     this.listItemElement.appendChild(swatchElement);
566                 }
567             }
568         }
569
570         this.tooltip = this.name + ": " + (valueNicknames[value] || value) + (priority ? " " + priority : "");
571     },
572
573     updateAll: function(updateAllRules)
574     {
575         if (updateAllRules && this.treeOutline.section && this.treeOutline.section.pane)
576             this.treeOutline.section.pane.update(null, this.treeOutline.section);
577         else if (this.treeOutline.section)
578             this.treeOutline.section.update(true);
579         else
580             this.updateTitle(); // FIXME: this will not show new properties. But we don't hit his case yet.
581     },
582
583     toggleEnabled: function(event)
584     {
585         var disabled = !event.target.checked;
586
587         if (disabled) {
588             if (!this.style.__disabledPropertyValues || !this.style.__disabledPropertyPriorities) {
589                 var inspectedWindow = InspectorController.inspectedWindow();
590                 this.style.__disabledProperties = new inspectedWindow.Object;
591                 this.style.__disabledPropertyValues = new inspectedWindow.Object;
592                 this.style.__disabledPropertyPriorities = new inspectedWindow.Object;
593             }
594
595             this.style.__disabledPropertyValues[this.name] = this.value;
596             this.style.__disabledPropertyPriorities[this.name] = this.priority;
597
598             if (this.shorthand) {
599                 var longhandProperties = getLonghandProperties(this.style, this.name);
600                 for (var i = 0; i < longhandProperties.length; ++i) {
601                     this.style.__disabledProperties[longhandProperties[i]] = true;
602                     this.style.removeProperty(longhandProperties[i]);
603                 }
604             } else {
605                 this.style.__disabledProperties[this.name] = true;
606                 this.style.removeProperty(this.name);
607             }
608         } else {
609             this.style.setProperty(this.name, this.value, this.priority);
610             delete this.style.__disabledProperties[this.name];
611             delete this.style.__disabledPropertyValues[this.name];
612             delete this.style.__disabledPropertyPriorities[this.name];
613         }
614
615         // Set the disabled property here, since the code above replies on it not changing
616         // until after the value and priority are retrieved.
617         this.disabled = disabled;
618
619         this.updateAll(true);
620     },
621
622     updateState: function()
623     {
624         if (!this.listItemElement)
625             return;
626
627         if (this.style.isPropertyImplicit(this.name) || this.value === "initial")
628             this.listItemElement.addStyleClass("implicit");
629         else
630             this.listItemElement.removeStyleClass("implicit");
631
632         if (this.inherited)
633             this.listItemElement.addStyleClass("inherited");
634         else
635             this.listItemElement.removeStyleClass("inherited");
636
637         if (this.overloaded)
638             this.listItemElement.addStyleClass("overloaded");
639         else
640             this.listItemElement.removeStyleClass("overloaded");
641
642         if (this.disabled)
643             this.listItemElement.addStyleClass("disabled");
644         else
645             this.listItemElement.removeStyleClass("disabled");
646     },
647
648     onpopulate: function()
649     {
650         // Only populate once and if this property is a shorthand.
651         if (this.children.length || !this.shorthand)
652             return;
653
654         var longhandProperties = getLonghandProperties(this.style, this.name);
655         for (var i = 0; i < longhandProperties.length; ++i) {
656             var name = longhandProperties[i];
657
658             if (this.treeOutline.section) {
659                 var inherited = this.treeOutline.section.isPropertyInherited(name);
660                 var overloaded = this.treeOutline.section.isPropertyOverloaded(name);
661             }
662
663             var item = new WebInspector.StylePropertyTreeElement(this.style, name, false, inherited, overloaded);
664             this.appendChild(item);
665         }
666     },
667
668     ondblclick: function(element, event)
669     {
670         this.startEditing(event.target);
671     },
672
673     startEditing: function(selectElement)
674     {
675         // FIXME: we don't allow editing of longhand properties under a shorthand right now.
676         if (this.parent.shorthand)
677             return;
678
679         if (WebInspector.isBeingEdited(this.listItemElement) || (this.treeOutline.section && !this.treeOutline.section.editable))
680             return;
681
682         var context = { expanded: this.expanded, hasChildren: this.hasChildren };
683
684         // Lie about our children to prevent expanding on double click and to collapse shorthands.
685         this.hasChildren = false;
686
687         if (!selectElement)
688             selectElement = this.listItemElement;
689
690         window.getSelection().setBaseAndExtent(selectElement, 0, selectElement, 1);
691
692         this.listItemElement.handleKeyEvent = this.editingKeyDown.bind(this);
693
694         WebInspector.startEditing(this.listItemElement, this.editingCommitted.bind(this), this.editingCancelled.bind(this), context);
695     },
696
697     editingKeyDown: function(event)
698     {
699         var arrowKeyPressed = (event.keyIdentifier === "Up" || event.keyIdentifier === "Down");
700         var pageKeyPressed = (event.keyIdentifier === "PageUp" || event.keyIdentifier === "PageDown");
701         if (!arrowKeyPressed && !pageKeyPressed)
702             return;
703
704         var selection = window.getSelection();
705         if (!selection.rangeCount)
706             return;
707
708         var selectionRange = selection.getRangeAt(0);
709         if (selectionRange.commonAncestorContainer !== this.listItemElement && !selectionRange.commonAncestorContainer.isDescendant(this.listItemElement))
710             return;
711
712         const styleValueDelimeters = " \t\n\"':;,/()";
713         var wordRange = selectionRange.startContainer.rangeOfWord(selectionRange.startOffset, styleValueDelimeters, this.listItemElement);
714         var wordString = wordRange.toString();
715         var replacementString = wordString;
716
717         var matches = /(.*?)(-?\d+(?:\.\d+)?)(.*)/.exec(wordString);
718         if (matches && matches.length) {
719             var prefix = matches[1];
720             var number = parseFloat(matches[2]);
721             var suffix = matches[3];
722
723             // If the number is near zero or the number is one and the direction will take it near zero.
724             var numberNearZero = (number < 1 && number > -1);
725             if (number === 1 && event.keyIdentifier === "Down")
726                 numberNearZero = true;
727             else if (number === -1 && event.keyIdentifier === "Up")
728                 numberNearZero = true;
729
730             // Jump by 10 when shift is down or jump by 0.1 when near zero or Alt/Option is down.
731             // Also jump by 10 for page up and down, or by 100 if shift is held with a page key.
732             var changeAmount = 1;
733             if (event.shiftKey && pageKeyPressed)
734                 changeAmount = 100;
735             else if (event.shiftKey || pageKeyPressed)
736                 changeAmount = 10;
737             else if (event.altKey || numberNearZero)
738                 changeAmount = 0.1;
739
740             if (event.keyIdentifier === "Down" || event.keyIdentifier === "PageDown")
741                 changeAmount *= -1;
742
743             // Make the new number and constrain it to a precision of 6, this matches numbers the engine returns.
744             // Use the Number constructor to forget the fixed precision, so 1.100000 will print as 1.1.
745             number = Number((number + changeAmount).toFixed(6));
746
747             replacementString = prefix + number + suffix;
748         } else {
749             // FIXME: this should cycle through known keywords for the current property name.
750             return;
751         }
752
753         var replacementTextNode = document.createTextNode(replacementString);
754
755         wordRange.deleteContents();
756         wordRange.insertNode(replacementTextNode);
757
758         var finalSelectionRange = document.createRange();
759         finalSelectionRange.setStart(replacementTextNode, 0);
760         finalSelectionRange.setEnd(replacementTextNode, replacementString.length);
761
762         selection.removeAllRanges();
763         selection.addRange(finalSelectionRange);
764
765         event.preventDefault();
766         event.handled = true;
767
768         if (!this.originalCSSText) {
769             // Remember the rule's original CSS text, so it can be restored
770             // if the editing is canceled and before each apply.
771             this.originalCSSText = getStyleTextWithShorthands(this.style);
772         } else {
773             // Restore the original CSS text before applying user changes. This is needed to prevent
774             // new properties from sticking around if the user adds one, then removes it.
775             this.style.cssText = this.originalCSSText;
776         }
777
778         this.applyStyleText(this.listItemElement.textContent);
779     },
780
781     editingEnded: function(context)
782     {
783         this.hasChildren = context.hasChildren;
784         if (context.expanded)
785             this.expand();
786         delete this.listItemElement.handleKeyEvent;
787         delete this.originalCSSText;
788     },
789
790     editingCancelled: function(element, context)
791     {
792         if (this.originalCSSText) {
793             this.style.cssText = this.originalCSSText;
794             this.updateAll();
795         } else
796             this.updateTitle();
797
798         this.editingEnded(context);
799     },
800
801     editingCommitted: function(element, userInput, previousContent, context)
802     {
803         this.editingEnded(context);
804
805         if (userInput === previousContent)
806             return; // nothing changed, so do nothing else
807
808         this.applyStyleText(userInput, true);
809     },
810
811     applyStyleText: function(styleText, updateInterface)
812     {
813         var styleTextLength = styleText.trimWhitespace().length;
814
815         // Create a new element to parse the user input CSS.
816         var parseElement = document.createElement("span");
817         parseElement.setAttribute("style", styleText);
818
819         var tempStyle = parseElement.style;
820         if (tempStyle.length || !styleTextLength) {
821             // The input was parsable or the user deleted everything, so remove the
822             // original property from the real style declaration. If this represents
823             // a shorthand remove all the longhand properties.
824             if (this.shorthand) {
825                 var longhandProperties = getLonghandProperties(this.style, this.name);
826                 for (var i = 0; i < longhandProperties.length; ++i)
827                     this.style.removeProperty(longhandProperties[i]);
828             } else
829                 this.style.removeProperty(this.name);
830         }
831
832         if (!styleTextLength) {
833             if (updateInterface) {
834                 // The user deleted the everything, so remove the tree element and update.
835                 if (this.treeOutline.section && this.treeOutline.section.pane)
836                     this.treeOutline.section.pane.update();
837                 this.parent.removeChild(this);
838             }
839             return;
840         }
841
842         if (!tempStyle.length) {
843             // The user typed something, but it didn't parse. Just abort and restore
844             // the original title for this property.
845             if (updateInterface)
846                 this.updateTitle();
847             return;
848         }
849
850         // Iterate of the properties on the test element's style declaration and
851         // add them to the real style declaration. We take care to move shorthands.
852         var foundShorthands = {};
853         var uniqueProperties = getUniqueStyleProperties(tempStyle);
854         for (var i = 0; i < uniqueProperties.length; ++i) {
855             var name = uniqueProperties[i];
856             var shorthand = tempStyle.getPropertyShorthand(name);
857
858             if (shorthand && shorthand in foundShorthands)
859                 continue;
860
861             if (shorthand) {
862                 var value = getShorthandValue(tempStyle, shorthand);
863                 var priority = getShorthandPriority(tempStyle, shorthand);
864                 foundShorthands[shorthand] = true;
865             } else {
866                 var value = tempStyle.getPropertyValue(name);
867                 var priority = tempStyle.getPropertyPriority(name);
868             }
869
870             // Set the property on the real style declaration.
871             this.style.setProperty((shorthand || name), value, priority);
872         }
873
874         if (updateInterface)
875             this.updateAll(true);
876     }
877 }
878
879 WebInspector.StylePropertyTreeElement.prototype.__proto__ = TreeElement.prototype;