third_party/WebKit/Source/devtools/front_end/elements/StylesSidebarPane.js

   1 /*
   2  * Copyright (C) 2007 Apple Inc.  All rights reserved.
   3  * Copyright (C) 2009 Joseph Pecoraro
   4  *
   5  * Redistribution and use in source and binary forms, with or without
   6  * modification, are permitted provided that the following conditions
   7  * are met:
   8  *
   9  * 1.  Redistributions of source code must retain the above copyright
  10  *     notice, this list of conditions and the following disclaimer.
  11  * 2.  Redistributions in binary form must reproduce the above copyright
  12  *     notice, this list of conditions and the following disclaimer in the
  13  *     documentation and/or other materials provided with the distribution.
  14  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
  15  *     its contributors may be used to endorse or promote products derived
  16  *     from this software without specific prior written permission.
  17  *
  18  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
  19  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  20  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  21  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
  22  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  23  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  24  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  25  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  26  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  27  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  28  */
  29
  30 /**
  31  * @constructor
  32  * @extends {WebInspector.ElementsSidebarPane}
  33  */
  34 WebInspector.StylesSidebarPane = function()
  35 {
  36     WebInspector.ElementsSidebarPane.call(this, WebInspector.UIString("Styles"));
  37     this.setMinimumSize(96, 26);
  38
  39     WebInspector.moduleSetting("colorFormat").addChangeListener(this.update.bind(this));
  40     WebInspector.moduleSetting("textEditorIndent").addChangeListener(this.update.bind(this));
  41
  42     var hbox = this.element.createChild("div", "hbox styles-sidebar-pane-toolbar");
  43     var filterContainerElement = hbox.createChild("div", "styles-sidebar-pane-filter-box");
  44     this._filterInput = WebInspector.StylesSidebarPane.createPropertyFilterElement(WebInspector.UIString("Filter"), hbox, this._onFilterChanged.bind(this));
  45     filterContainerElement.appendChild(this._filterInput);
  46
  47     var toolbar = new WebInspector.ExtensibleToolbar("styles-sidebarpane-toolbar", hbox);
  48     if (Runtime.experiments.isEnabled("layoutEditor") && !Runtime.queryParam("remoteFrontend")) {
  49         this._layoutEditorButton = new WebInspector.ToolbarButton(WebInspector.UIString("Toggle Layout Editor"), "layout-editor-toolbar-item");
  50         toolbar.appendToolbarItem(this._layoutEditorButton);
  51         this._layoutEditorButton.addEventListener("click", this._toggleLayoutEditor, this);
  52         toolbar.appendSeparator();
  53     }
  54
  55     toolbar.element.classList.add("styles-pane-toolbar", "toolbar-gray-toggled");
  56     this._currentToolbarPane = null;
  57
  58     var toolbarPaneContainer = this.element.createChild("div", "styles-sidebar-toolbar-pane-container");
  59     this._toolbarPaneElement = toolbarPaneContainer.createChild("div", "styles-sidebar-toolbar-pane");
  60     this._sectionsContainer = this.element.createChild("div");
  61
  62     this._stylesPopoverHelper = new WebInspector.StylesPopoverHelper();
  63
  64     this._linkifier = new WebInspector.Linkifier(new WebInspector.Linkifier.DefaultCSSFormatter());
  65
  66     this.element.classList.add("styles-pane");
  67     this.element.addEventListener("mousemove", this._mouseMovedOverElement.bind(this), false);
  68     this._keyDownBound = this._keyDown.bind(this);
  69     this._keyUpBound = this._keyUp.bind(this);
  70     new WebInspector.PropertyChangeHighlighter(this);
  71 }
  72
  73 // Keep in sync with ComputedStyleConstants.h PseudoId enum. Array below contains pseudo id names for corresponding enum indexes.
  74 // First item is empty due to its artificial NOPSEUDO nature in the enum.
  75 // FIXME: find a way of generating this mapping or getting it from combination of ComputedStyleConstants and CSSSelector.cpp at
  76 // runtime.
  77 WebInspector.StylesSidebarPane.PseudoIdNames = [
  78     "", "first-line", "first-letter", "before", "after", "backdrop", "selection", "", "-webkit-scrollbar",
  79     "-webkit-scrollbar-thumb", "-webkit-scrollbar-button", "-webkit-scrollbar-track", "-webkit-scrollbar-track-piece",
  80     "-webkit-scrollbar-corner", "-webkit-resizer"
  81 ];
  82
  83 /**
  84  * @enum {string}
  85  */
  86 WebInspector.StylesSidebarPane.Events = {
  87     SelectorEditingStarted: "SelectorEditingStarted",
  88     SelectorEditingEnded: "SelectorEditingEnded"
  89 };
  90
  91 /**
  92  * @param {!WebInspector.CSSProperty} property
  93  * @return {!Element}
  94  */
  95 WebInspector.StylesSidebarPane.createExclamationMark = function(property)
  96 {
  97     var exclamationElement = createElement("label", "dt-icon-label");
  98     exclamationElement.className = "exclamation-mark";
  99     if (!WebInspector.StylesSidebarPane.ignoreErrorsForProperty(property))
 100         exclamationElement.type = "warning-icon";
 101     exclamationElement.title = WebInspector.CSSMetadata.cssPropertiesMetainfo.keySet()[property.name.toLowerCase()] ? WebInspector.UIString("Invalid property value") : WebInspector.UIString("Unknown property name");
 102     return exclamationElement;
 103 }
 104
 105 /**
 106  * @param {!WebInspector.CSSProperty} property
 107  * @return {boolean}
 108  */
 109 WebInspector.StylesSidebarPane.ignoreErrorsForProperty = function(property) {
 110     /**
 111      * @param {string} string
 112      */
 113     function hasUnknownVendorPrefix(string)
 114     {
 115         return !string.startsWith("-webkit-") && /^[-_][\w\d]+-\w/.test(string);
 116     }
 117
 118     var name = property.name.toLowerCase();
 119
 120     // IE hack.
 121     if (name.charAt(0) === "_")
 122         return true;
 123
 124     // IE has a different format for this.
 125     if (name === "filter")
 126         return true;
 127
 128     // Common IE-specific property prefix.
 129     if (name.startsWith("scrollbar-"))
 130         return true;
 131     if (hasUnknownVendorPrefix(name))
 132         return true;
 133
 134     var value = property.value.toLowerCase();
 135
 136     // IE hack.
 137     if (value.endsWith("\9"))
 138         return true;
 139     if (hasUnknownVendorPrefix(value))
 140         return true;
 141
 142     return false;
 143 }
 144
 145 WebInspector.StylesSidebarPane.prototype = {
 146     _toggleLayoutEditor: function()
 147     {
 148         this._showLayoutEditor = !this._showLayoutEditor;
 149         this._layoutEditorButton.setToggled(this._showLayoutEditor);
 150         var targets = WebInspector.targetManager.targets();
 151
 152         if (this._showLayoutEditor)
 153             WebInspector.inspectElementModeController.disable();
 154         else
 155             WebInspector.inspectElementModeController.enable();
 156
 157         var mode = this._showLayoutEditor ? DOMAgent.InspectMode.ShowLayoutEditor : DOMAgent.InspectMode.None;
 158         for (var domModel of WebInspector.DOMModel.instances())
 159             domModel.setInspectMode(mode);
 160     },
 161
 162     onUndoOrRedoHappened: function()
 163     {
 164         this.setNode(this.node());
 165     },
 166
 167     /**
 168      * @param {!WebInspector.Event} event
 169      */
 170     _onAddButtonLongClick: function(event)
 171     {
 172         var cssModel = this.cssModel();
 173         if (!cssModel)
 174             return;
 175         var headers = cssModel.styleSheetHeaders().filter(styleSheetResourceHeader);
 176
 177         /** @type {!Array.<{text: string, handler: function()}>} */
 178         var contextMenuDescriptors = [];
 179         for (var i = 0; i < headers.length; ++i) {
 180             var header = headers[i];
 181             var handler = this._createNewRuleInStyleSheet.bind(this, header);
 182             contextMenuDescriptors.push({
 183                 text: WebInspector.displayNameForURL(header.resourceURL()),
 184                 handler: handler
 185             });
 186         }
 187
 188         contextMenuDescriptors.sort(compareDescriptors);
 189
 190         var contextMenu = new WebInspector.ContextMenu(/** @type {!Event} */(event.data));
 191         for (var i = 0; i < contextMenuDescriptors.length; ++i) {
 192             var descriptor = contextMenuDescriptors[i];
 193             contextMenu.appendItem(descriptor.text, descriptor.handler);
 194         }
 195         if (!contextMenu.isEmpty())
 196             contextMenu.appendSeparator();
 197         contextMenu.appendItem("inspector-stylesheet", this._createNewRuleInViaInspectorStyleSheet.bind(this));
 198         contextMenu.show();
 199
 200         /**
 201          * @param {!{text: string, handler: function()}} descriptor1
 202          * @param {!{text: string, handler: function()}} descriptor2
 203          * @return {number}
 204          */
 205         function compareDescriptors(descriptor1, descriptor2)
 206         {
 207             return String.naturalOrderComparator(descriptor1.text, descriptor2.text);
 208         }
 209
 210         /**
 211          * @param {!WebInspector.CSSStyleSheetHeader} header
 212          * @return {boolean}
 213          */
 214         function styleSheetResourceHeader(header)
 215         {
 216             return !header.isViaInspector() && !header.isInline && !!header.resourceURL();
 217         }
 218     },
 219
 220     /**
 221      * @param {!WebInspector.DOMNode} node
 222      */
 223     updateEditingSelectorForNode: function(node)
 224     {
 225         var selectorText = WebInspector.DOMPresentationUtils.simpleSelector(node);
 226         if (!selectorText)
 227             return;
 228         this._editingSelectorSection.setSelectorText(selectorText);
 229     },
 230
 231     /**
 232      * @return {boolean}
 233      */
 234     isEditingSelector: function()
 235     {
 236         return !!this._editingSelectorSection;
 237     },
 238
 239     /**
 240      * @param {!WebInspector.StylePropertiesSection} section
 241      */
 242     _startEditingSelector: function(section)
 243     {
 244         this._editingSelectorSection = section;
 245         this.dispatchEventToListeners(WebInspector.StylesSidebarPane.Events.SelectorEditingStarted);
 246     },
 247
 248     _finishEditingSelector: function()
 249     {
 250         delete this._editingSelectorSection;
 251         this.dispatchEventToListeners(WebInspector.StylesSidebarPane.Events.SelectorEditingEnded);
 252     },
 253
 254     /**
 255      * @param {!WebInspector.CSSRule} editedRule
 256      * @param {!WebInspector.TextRange} oldRange
 257      * @param {!WebInspector.TextRange} newRange
 258      */
 259     _styleSheetRuleEdited: function(editedRule, oldRange, newRange)
 260     {
 261         if (!editedRule.styleSheetId)
 262             return;
 263         for (var block of this._sectionBlocks) {
 264             for (var section of block.sections)
 265                 section._styleSheetRuleEdited(editedRule, oldRange, newRange);
 266         }
 267     },
 268
 269     /**
 270      * @param {!WebInspector.CSSMedia} oldMedia
 271      * @param {!WebInspector.CSSMedia}  newMedia
 272      */
 273     _styleSheetMediaEdited: function(oldMedia, newMedia)
 274     {
 275         if (!oldMedia.parentStyleSheetId)
 276             return;
 277         for (var block of this._sectionBlocks) {
 278             for (var section of block.sections)
 279                 section._styleSheetMediaEdited(oldMedia, newMedia);
 280         }
 281     },
 282
 283     /**
 284      * @param {?RegExp} regex
 285      */
 286     _onFilterChanged: function(regex)
 287     {
 288         this._filterRegex = regex;
 289         this._updateFilter();
 290     },
 291
 292     /**
 293      * @override
 294      * @param {?WebInspector.DOMNode} node
 295      */
 296     setNode: function(node)
 297     {
 298         this._stylesPopoverHelper.hide();
 299         node = WebInspector.SharedSidebarModel.elementNode(node);
 300
 301         this._resetCache();
 302         WebInspector.ElementsSidebarPane.prototype.setNode.call(this, node);
 303     },
 304
 305     /**
 306      * @param {!WebInspector.StylePropertiesSection=} editedSection
 307      */
 308     _refreshUpdate: function(editedSection)
 309     {
 310         var node = this.node();
 311         if (!node)
 312             return;
 313
 314         for (var block of this._sectionBlocks) {
 315             for (var section of block.sections) {
 316                 if (section.isBlank)
 317                     continue;
 318                 section.update(section === editedSection);
 319             }
 320         }
 321
 322         if (this._filterRegex)
 323             this._updateFilter();
 324         this._nodeStylesUpdatedForTest(node, false);
 325     },
 326
 327     /**
 328      * @override
 329      * @return {!Promise.<?>}
 330      */
 331     doUpdate: function()
 332     {
 333         this._discardElementUnderMouse();
 334
 335         return this.fetchMatchedCascade()
 336             .then(this._innerRebuildUpdate.bind(this));
 337     },
 338
 339     _resetCache: function()
 340     {
 341         delete this._matchedCascadePromise;
 342     },
 343
 344     /**
 345      * @return {!Promise.<?{matched: !WebInspector.SectionCascade, pseudo: !Map.<number, !WebInspector.SectionCascade>}>}
 346      */
 347     fetchMatchedCascade: function()
 348     {
 349         var node = this.node();
 350         if (!node)
 351             return Promise.resolve(/** @type {?{matched: !WebInspector.SectionCascade, pseudo: !Map.<number, !WebInspector.SectionCascade>}} */(null));
 352         if (!this._matchedCascadePromise)
 353             this._matchedCascadePromise = this._matchedStylesForNode(node).then(buildMatchedCascades.bind(this, node));
 354         return this._matchedCascadePromise;
 355
 356         /**
 357          * @param {!WebInspector.DOMNode} node
 358          * @param {?WebInspector.CSSStyleModel.MatchedStyleResult} matchedStyles
 359          * @return {?{matched: !WebInspector.SectionCascade, pseudo: !Map.<number, !WebInspector.SectionCascade>}}
 360          * @this {WebInspector.StylesSidebarPane}
 361          */
 362         function buildMatchedCascades(node, matchedStyles)
 363         {
 364             if (!matchedStyles || node !== this.node())
 365                 return null;
 366             if (!matchedStyles.matchedCSSRules || !matchedStyles.pseudoElements || !matchedStyles.inherited)
 367                 return null;
 368
 369             return {
 370                 matched: this._buildMatchedRulesSectionCascade(node, matchedStyles),
 371                 pseudo: this._buildPseudoCascades(node, matchedStyles)
 372             };
 373         }
 374     },
 375
 376     /**
 377      * @param {!WebInspector.DOMNode} node
 378      * @return {!Promise.<?WebInspector.CSSStyleModel.MatchedStyleResult>}
 379      */
 380     _matchedStylesForNode: function(node)
 381     {
 382         var cssModel = this.cssModel();
 383         if (!cssModel)
 384             return Promise.resolve(/** @type {?WebInspector.CSSStyleModel.MatchedStyleResult} */(null));
 385         return cssModel.matchedStylesPromise(node.id)
 386     },
 387
 388     /**
 389      * @param {boolean} editing
 390      */
 391     setEditingStyle: function(editing)
 392     {
 393         if (this._isEditingStyle === editing)
 394             return;
 395         this._isEditingStyle = editing;
 396     },
 397
 398     /**
 399      * @override
 400      */
 401     onCSSModelChanged: function()
 402     {
 403         if (this._userOperation || this._isEditingStyle)
 404             return;
 405
 406         this._resetCache();
 407         this.update();
 408     },
 409
 410     /**
 411      * @override
 412      */
 413     onFrameResizedThrottled: function()
 414     {
 415         this.onCSSModelChanged();
 416     },
 417
 418     /**
 419      * @override
 420      */
 421     onDOMModelChanged: function()
 422     {
 423         // Any attribute removal or modification can affect the styles of "related" nodes.
 424         // Do not touch the styles if they are being edited.
 425         if (this._isEditingStyle || this._userOperation)
 426             return;
 427
 428         this._resetCache();
 429         this.update();
 430     },
 431
 432     /**
 433      * @param {?{matched: !WebInspector.SectionCascade, pseudo: !Map.<number, !WebInspector.SectionCascade>}} cascades
 434      */
 435     _innerRebuildUpdate: function(cascades)
 436     {
 437         this._linkifier.reset();
 438         this._sectionsContainer.removeChildren();
 439         this._sectionBlocks = [];
 440
 441         var node = this.node();
 442         if (!cascades || !node)
 443             return;
 444
 445         this._sectionBlocks = this._rebuildSectionsForMatchedStyleRules(cascades.matched);
 446         var pseudoIds = cascades.pseudo.keysArray().sort();
 447         for (var pseudoId of pseudoIds) {
 448             var block = WebInspector.SectionBlock.createPseudoIdBlock(pseudoId);
 449             var cascade = cascades.pseudo.get(pseudoId);
 450             for (var sectionModel of cascade.sectionModels()) {
 451                 var section = new WebInspector.StylePropertiesSection(this, sectionModel);
 452                 block.sections.push(section);
 453             }
 454             this._sectionBlocks.push(block);
 455         }
 456
 457         for (var block of this._sectionBlocks) {
 458             var titleElement = block.titleElement();
 459             if (titleElement)
 460                 this._sectionsContainer.appendChild(titleElement);
 461             for (var section of block.sections)
 462                 this._sectionsContainer.appendChild(section.element);
 463         }
 464
 465         if (this._filterRegex)
 466             this._updateFilter();
 467
 468         this._nodeStylesUpdatedForTest(node, true);
 469     },
 470
 471     /**
 472      * @param {!WebInspector.DOMNode} node
 473      * @param {!WebInspector.CSSStyleModel.MatchedStyleResult} styles
 474      * @return {!Map<number, !WebInspector.SectionCascade>}
 475      */
 476     _buildPseudoCascades: function(node, styles)
 477     {
 478         var pseudoCascades = new Map();
 479         for (var i = 0; i < styles.pseudoElements.length; ++i) {
 480             var pseudoElementCSSRules = styles.pseudoElements[i];
 481             var pseudoId = pseudoElementCSSRules.pseudoId;
 482
 483             // Add rules in reverse order to match the cascade order.
 484             var pseudoElementCascade = new WebInspector.SectionCascade();
 485             for (var j = pseudoElementCSSRules.rules.length - 1; j >= 0; --j) {
 486                 var rule = pseudoElementCSSRules.rules[j];
 487                 pseudoElementCascade.appendModelFromRule(rule);
 488             }
 489             pseudoCascades.set(pseudoId, pseudoElementCascade);
 490         }
 491         return pseudoCascades;
 492     },
 493
 494     /**
 495      * @param {!WebInspector.DOMNode} node
 496      * @param {boolean} rebuild
 497      */
 498     _nodeStylesUpdatedForTest: function(node, rebuild)
 499     {
 500         // For sniffing in tests.
 501     },
 502
 503     /**
 504      * @param {!WebInspector.DOMNode} node
 505      * @param {!WebInspector.CSSStyleModel.MatchedStyleResult} styles
 506      * @return {!WebInspector.SectionCascade}
 507      */
 508     _buildMatchedRulesSectionCascade: function(node, styles)
 509     {
 510         var cascade = new WebInspector.SectionCascade();
 511
 512         function addAttributesStyle()
 513         {
 514             if (!styles.attributesStyle)
 515                 return;
 516             var selectorText = node.nodeNameInCorrectCase() + "[" + WebInspector.UIString("Attributes Style") + "]";
 517             cascade.appendModelFromStyle(styles.attributesStyle, selectorText);
 518         }
 519
 520         // Inline style has the greatest specificity.
 521         if (styles.inlineStyle && node.nodeType() === Node.ELEMENT_NODE)
 522             cascade.appendModelFromStyle(styles.inlineStyle, "element.style");
 523
 524         // Add rules in reverse order to match the cascade order.
 525         var addedAttributesStyle;
 526         for (var i = styles.matchedCSSRules.length - 1; i >= 0; --i) {
 527             var rule = styles.matchedCSSRules[i];
 528             if ((rule.isInjected() || rule.isUserAgent()) && !addedAttributesStyle) {
 529                 // Show element's Style Attributes after all author rules.
 530                 addedAttributesStyle = true;
 531                 addAttributesStyle();
 532             }
 533             cascade.appendModelFromRule(rule);
 534         }
 535
 536         if (!addedAttributesStyle)
 537             addAttributesStyle();
 538
 539         // Walk the node structure and identify styles with inherited properties.
 540         var parentNode = node.parentNode;
 541
 542         for (var parentOrdinal = 0; parentOrdinal < styles.inherited.length; ++parentOrdinal) {
 543             var parentStyles = styles.inherited[parentOrdinal];
 544             if (parentStyles.inlineStyle && this._containsInherited(parentStyles.inlineStyle))
 545                 cascade.appendModelFromStyle(parentStyles.inlineStyle, WebInspector.UIString("Style Attribute"), parentNode);
 546
 547             for (var i = parentStyles.matchedCSSRules.length - 1; i >= 0; --i) {
 548                 var rulePayload = parentStyles.matchedCSSRules[i];
 549                 if (!this._containsInherited(rulePayload.style))
 550                     continue;
 551                 cascade.appendModelFromRule(rulePayload, parentNode);
 552             }
 553             parentNode = parentNode.parentNode;
 554         }
 555         return cascade;
 556     },
 557
 558     /**
 559      * @param {!WebInspector.SectionCascade} matchedCascade
 560      * @return {!Array.<!WebInspector.SectionBlock>}
 561      */
 562     _rebuildSectionsForMatchedStyleRules: function(matchedCascade)
 563     {
 564         var blocks = [new WebInspector.SectionBlock(null)];
 565         var lastParentNode = null;
 566         for (var sectionModel of matchedCascade.sectionModels()) {
 567             var parentNode = sectionModel.parentNode();
 568             if (parentNode && parentNode !== lastParentNode) {
 569                 lastParentNode = parentNode;
 570                 var block = WebInspector.SectionBlock.createInheritedNodeBlock(lastParentNode);
 571                 blocks.push(block);
 572             }
 573
 574             var section = new WebInspector.StylePropertiesSection(this, sectionModel);
 575             blocks.peekLast().sections.push(section);
 576         }
 577         return blocks;
 578     },
 579
 580     /**
 581      * @param {!WebInspector.CSSStyleDeclaration} style
 582      * @return {boolean}
 583      */
 584     _containsInherited: function(style)
 585     {
 586         var properties = style.allProperties;
 587         for (var i = 0; i < properties.length; ++i) {
 588             var property = properties[i];
 589             // Does this style contain non-overridden inherited property?
 590             if (property.activeInStyle() && WebInspector.CSSMetadata.isPropertyInherited(property.name))
 591                 return true;
 592         }
 593         return false;
 594     },
 595
 596     _createNewRuleInViaInspectorStyleSheet: function()
 597     {
 598         var cssModel = this.cssModel();
 599         var node = this.node();
 600         if (!cssModel || !node)
 601             return;
 602         this._userOperation = true;
 603         cssModel.requestViaInspectorStylesheet(node, onViaInspectorStyleSheet.bind(this));
 604
 605         /**
 606          * @param {?WebInspector.CSSStyleSheetHeader} styleSheetHeader
 607          * @this {WebInspector.StylesSidebarPane}
 608          */
 609         function onViaInspectorStyleSheet(styleSheetHeader)
 610         {
 611             delete this._userOperation;
 612             this._createNewRuleInStyleSheet(styleSheetHeader);
 613         }
 614     },
 615
 616     /**
 617      * @param {?WebInspector.CSSStyleSheetHeader} styleSheetHeader
 618      */
 619     _createNewRuleInStyleSheet: function(styleSheetHeader)
 620     {
 621         if (!styleSheetHeader)
 622             return;
 623         styleSheetHeader.requestContent(onStyleSheetContent.bind(this, styleSheetHeader.id));
 624
 625         /**
 626          * @param {string} styleSheetId
 627          * @param {string} text
 628          * @this {WebInspector.StylesSidebarPane}
 629          */
 630         function onStyleSheetContent(styleSheetId, text)
 631         {
 632             var lines = text.split("\n");
 633             var range = WebInspector.TextRange.createFromLocation(lines.length - 1, lines[lines.length - 1].length);
 634             this._addBlankSection(this._sectionBlocks[0].sections[0], styleSheetId, range);
 635         }
 636     },
 637
 638     /**
 639      * @param {!WebInspector.StylePropertiesSection} insertAfterSection
 640      * @param {string} styleSheetId
 641      * @param {!WebInspector.TextRange} ruleLocation
 642      */
 643     _addBlankSection: function(insertAfterSection, styleSheetId, ruleLocation)
 644     {
 645         this.expand();
 646         var node = this.node();
 647         var blankSection = new WebInspector.BlankStylePropertiesSection(this, node ? WebInspector.DOMPresentationUtils.simpleSelector(node) : "", styleSheetId, ruleLocation, insertAfterSection.styleRule);
 648
 649         this._sectionsContainer.insertBefore(blankSection.element, insertAfterSection.element.nextSibling);
 650
 651         for (var block of this._sectionBlocks) {
 652             var index = block.sections.indexOf(insertAfterSection);
 653             if (index === -1)
 654                 continue;
 655             block.sections.splice(index + 1, 0, blankSection);
 656             blankSection.startEditingSelector();
 657         }
 658     },
 659
 660     /**
 661      * @param {!WebInspector.StylePropertiesSection} section
 662      */
 663     removeSection: function(section)
 664     {
 665         for (var block of this._sectionBlocks) {
 666             var index = block.sections.indexOf(section);
 667             if (index === -1)
 668                 continue;
 669             block.sections.splice(index, 1);
 670             section.element.remove();
 671         }
 672     },
 673
 674     /**
 675      * @return {?RegExp}
 676      */
 677     filterRegex: function()
 678     {
 679         return this._filterRegex;
 680     },
 681
 682     _updateFilter: function()
 683     {
 684         for (var block of this._sectionBlocks)
 685             block.updateFilter();
 686     },
 687
 688     /**
 689      * @override
 690      */
 691     wasShown: function()
 692     {
 693         WebInspector.ElementsSidebarPane.prototype.wasShown.call(this);
 694         this.element.ownerDocument.body.addEventListener("keydown", this._keyDownBound, false);
 695         this.element.ownerDocument.body.addEventListener("keyup", this._keyUpBound, false);
 696     },
 697
 698     /**
 699      * @override
 700      */
 701     willHide: function()
 702     {
 703         this.element.ownerDocument.body.removeEventListener("keydown", this._keyDownBound, false);
 704         this.element.ownerDocument.body.removeEventListener("keyup", this._keyUpBound, false);
 705         this._stylesPopoverHelper.hide();
 706         this._discardElementUnderMouse();
 707         WebInspector.ElementsSidebarPane.prototype.willHide.call(this);
 708     },
 709
 710     _discardElementUnderMouse: function()
 711     {
 712         if (this._elementUnderMouse)
 713             this._elementUnderMouse.classList.remove("styles-panel-hovered");
 714         delete this._elementUnderMouse;
 715     },
 716
 717     /**
 718      * @param {!Event} event
 719      */
 720     _mouseMovedOverElement: function(event)
 721     {
 722         if (this._elementUnderMouse && event.target !== this._elementUnderMouse)
 723             this._discardElementUnderMouse();
 724         this._elementUnderMouse = event.target;
 725         if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!MouseEvent} */(event)))
 726             this._elementUnderMouse.classList.add("styles-panel-hovered");
 727     },
 728
 729     /**
 730      * @param {!Event} event
 731      */
 732     _keyDown: function(event)
 733     {
 734         if ((!WebInspector.isMac() && event.keyCode === WebInspector.KeyboardShortcut.Keys.Ctrl.code) ||
 735             (WebInspector.isMac() && event.keyCode === WebInspector.KeyboardShortcut.Keys.Meta.code)) {
 736             if (this._elementUnderMouse)
 737                 this._elementUnderMouse.classList.add("styles-panel-hovered");
 738         }
 739     },
 740
 741     /**
 742      * @param {!Event} event
 743      */
 744     _keyUp: function(event)
 745     {
 746         if ((!WebInspector.isMac() && event.keyCode === WebInspector.KeyboardShortcut.Keys.Ctrl.code) ||
 747             (WebInspector.isMac() && event.keyCode === WebInspector.KeyboardShortcut.Keys.Meta.code)) {
 748             this._discardElementUnderMouse();
 749         }
 750     },
 751
 752     /**
 753      * @param {?WebInspector.Widget} widget
 754      */
 755     showToolbarPane: function(widget)
 756     {
 757         if (this._animatedToolbarPane !== undefined)
 758             this._pendingWidget = widget;
 759         else
 760             this._startToolbarPaneAnimation(widget);
 761     },
 762
 763     /**
 764      * @param {?WebInspector.Widget} widget
 765      */
 766     _startToolbarPaneAnimation: function(widget)
 767     {
 768         if (widget === this._currentToolbarPane)
 769             return;
 770
 771         if (widget && this._currentToolbarPane) {
 772             this._currentToolbarPane.detach();
 773             widget.show(this._toolbarPaneElement);
 774             this._currentToolbarPane = widget;
 775             return;
 776         }
 777
 778         this._animatedToolbarPane = widget;
 779
 780         if (this._currentToolbarPane)
 781             this._toolbarPaneElement.style.animationName = 'styles-element-state-pane-slideout';
 782         else if (widget)
 783             this._toolbarPaneElement.style.animationName = 'styles-element-state-pane-slidein';
 784
 785         if (widget)
 786             widget.show(this._toolbarPaneElement);
 787
 788         var listener = onAnimationEnd.bind(this);
 789         this._toolbarPaneElement.addEventListener("animationend", listener, false);
 790
 791         /**
 792          * @this {WebInspector.StylesSidebarPane}
 793          */
 794         function onAnimationEnd()
 795         {
 796             this._toolbarPaneElement.style.removeProperty('animation-name');
 797             this._toolbarPaneElement.removeEventListener("animationend", listener, false);
 798
 799             if (this._currentToolbarPane)
 800                 this._currentToolbarPane.detach();
 801
 802             this._currentToolbarPane = this._animatedToolbarPane;
 803             delete this._animatedToolbarPane;
 804
 805             if (this._pendingWidget !== undefined) {
 806                 this._startToolbarPaneAnimation(this._pendingWidget);
 807                 delete this._pendingWidget;
 808             }
 809         }
 810     },
 811
 812     /**
 813      * @return {!Array<!WebInspector.SectionBlock>}
 814      */
 815     sectionBlocks: function()
 816     {
 817         return this._sectionBlocks || [];
 818     },
 819
 820     __proto__: WebInspector.ElementsSidebarPane.prototype
 821 }
 822
 823 /**
 824  * @param {string} placeholder
 825  * @param {!Element} container
 826  * @param {function(?RegExp)} filterCallback
 827  * @return {!Element}
 828  */
 829 WebInspector.StylesSidebarPane.createPropertyFilterElement = function(placeholder, container, filterCallback)
 830 {
 831     var input = createElement("input");
 832     input.placeholder = placeholder;
 833
 834     function searchHandler()
 835     {
 836         var regex = input.value ? new RegExp(input.value.escapeForRegExp(), "i") : null;
 837         filterCallback(regex);
 838         container.classList.toggle("styles-filter-engaged", !!input.value);
 839     }
 840     input.addEventListener("input", searchHandler, false);
 841
 842     /**
 843      * @param {!Event} event
 844      */
 845     function keydownHandler(event)
 846     {
 847         var Esc = "U+001B";
 848         if (event.keyIdentifier !== Esc || !input.value)
 849             return;
 850         event.consume(true);
 851         input.value = "";
 852         searchHandler();
 853     }
 854     input.addEventListener("keydown", keydownHandler, false);
 855
 856     input.setFilterValue = setFilterValue;
 857
 858     /**
 859      * @param {string} value
 860      */
 861     function setFilterValue(value)
 862     {
 863         input.value = value;
 864         input.focus();
 865         searchHandler();
 866     }
 867
 868     return input;
 869 }
 870
 871 /**
 872  * @constructor
 873  * @param {?Element} titleElement
 874  */
 875 WebInspector.SectionBlock = function(titleElement)
 876 {
 877     this._titleElement = titleElement;
 878     this.sections = [];
 879 }
 880
 881 /**
 882  * @param {number} pseudoId
 883  * @return {!WebInspector.SectionBlock}
 884  */
 885 WebInspector.SectionBlock.createPseudoIdBlock = function(pseudoId)
 886 {
 887     var separatorElement = createElement("div");
 888     separatorElement.className = "sidebar-separator";
 889     var pseudoName = WebInspector.StylesSidebarPane.PseudoIdNames[pseudoId];
 890     if (pseudoName)
 891         separatorElement.textContent = WebInspector.UIString("Pseudo ::%s element", pseudoName);
 892     else
 893         separatorElement.textContent = WebInspector.UIString("Pseudo element");
 894     return new WebInspector.SectionBlock(separatorElement);
 895 }
 896
 897 /**
 898  * @param {!WebInspector.DOMNode} node
 899  * @return {!WebInspector.SectionBlock}
 900  */
 901 WebInspector.SectionBlock.createInheritedNodeBlock = function(node)
 902 {
 903     var separatorElement = createElement("div");
 904     separatorElement.className = "sidebar-separator";
 905     var link = WebInspector.DOMPresentationUtils.linkifyNodeReference(node);
 906     separatorElement.createTextChild(WebInspector.UIString("Inherited from") + " ");
 907     separatorElement.appendChild(link);
 908     return new WebInspector.SectionBlock(separatorElement);
 909 }
 910
 911 WebInspector.SectionBlock.prototype = {
 912     updateFilter: function()
 913     {
 914         var hasAnyVisibleSection = false;
 915         for (var section of this.sections)
 916             hasAnyVisibleSection |= section._updateFilter();
 917         if (this._titleElement)
 918             this._titleElement.classList.toggle("hidden", !hasAnyVisibleSection);
 919     },
 920
 921     /**
 922      * @return {?Element}
 923      */
 924     titleElement: function()
 925     {
 926         return this._titleElement;
 927     }
 928 }
 929
 930 /**
 931  * @constructor
 932  * @param {!WebInspector.StylesSidebarPane} parentPane
 933  * @param {!WebInspector.StylesSectionModel} styleRule
 934  */
 935 WebInspector.StylePropertiesSection = function(parentPane, styleRule)
 936 {
 937     this._parentPane = parentPane;
 938     this.styleRule = styleRule;
 939     this.editable = styleRule.editable();
 940
 941     var rule = styleRule.rule();
 942     this.element = createElementWithClass("div", "styles-section matched-styles monospace");
 943     this.element._section = this;
 944
 945     this._titleElement = this.element.createChild("div", "styles-section-title " + (rule ? "styles-selector" : ""));
 946
 947     this.propertiesTreeOutline = new TreeOutline();
 948     this.propertiesTreeOutline.element.classList.add("style-properties", "monospace");
 949     this.propertiesTreeOutline.section = this;
 950     this.element.appendChild(this.propertiesTreeOutline.element);
 951
 952     var selectorContainer = createElement("div");
 953     this._selectorElement = createElementWithClass("span", "selector");
 954     this._selectorElement.textContent = styleRule.selectorText();
 955     selectorContainer.appendChild(this._selectorElement);
 956
 957     var openBrace = createElement("span");
 958     openBrace.textContent = " {";
 959     selectorContainer.appendChild(openBrace);
 960     selectorContainer.addEventListener("mousedown", this._handleEmptySpaceMouseDown.bind(this), false);
 961     selectorContainer.addEventListener("click", this._handleSelectorContainerClick.bind(this), false);
 962
 963     var closeBrace = createElement("div");
 964     closeBrace.textContent = "}";
 965     this.element.appendChild(closeBrace);
 966
 967     if (this.editable && rule) {
 968         var newRuleButton = closeBrace.createChild("div", "sidebar-pane-button-new-rule");
 969         newRuleButton.title = WebInspector.UIString("Insert Style Rule");
 970         newRuleButton.addEventListener("click", this._onNewRuleClick.bind(this), false);
 971     }
 972
 973     this._selectorElement.addEventListener("click", this._handleSelectorClick.bind(this), false);
 974     this.element.addEventListener("mousedown", this._handleEmptySpaceMouseDown.bind(this), false);
 975     this.element.addEventListener("click", this._handleEmptySpaceClick.bind(this), false);
 976
 977     if (rule) {
 978         // Prevent editing the user agent and user rules.
 979         if (rule.isUserAgent() || rule.isInjected()) {
 980             this.editable = false;
 981         } else {
 982             // Check this is a real CSSRule, not a bogus object coming from WebInspector.BlankStylePropertiesSection.
 983             if (rule.styleSheetId)
 984                 this.navigable = !!rule.resourceURL();
 985         }
 986     }
 987
 988     this._selectorRefElement = createElementWithClass("div", "styles-section-subtitle");
 989     this._mediaListElement = this._titleElement.createChild("div", "media-list media-matches");
 990     this._updateMediaList();
 991     this._updateRuleOrigin();
 992     selectorContainer.insertBefore(this._selectorRefElement, selectorContainer.firstChild);
 993     this._titleElement.appendChild(selectorContainer);
 994     this._selectorContainer = selectorContainer;
 995
 996     if (this.navigable)
 997         this.element.classList.add("navigable");
 998
 999     if (!this.editable)
1000         this.element.classList.add("read-only");
1001
1002     this._markSelectorMatches();
1003     this.onpopulate();
1004 }
1005
1006 WebInspector.StylePropertiesSection.prototype = {
1007     /**
1008      * @return {?WebInspector.StylePropertiesSection}
1009      */
1010     firstSibling: function()
1011     {
1012         var parent = this.element.parentElement;
1013         if (!parent)
1014             return null;
1015
1016         var childElement = parent.firstChild;
1017         while (childElement) {
1018             if (childElement._section)
1019                 return childElement._section;
1020             childElement = childElement.nextSibling;
1021         }
1022
1023         return null;
1024     },
1025
1026     /**
1027      * @return {?WebInspector.StylePropertiesSection}
1028      */
1029     lastSibling: function()
1030     {
1031         var parent = this.element.parentElement;
1032         if (!parent)
1033             return null;
1034
1035         var childElement = parent.lastChild;
1036         while (childElement) {
1037             if (childElement._section)
1038                 return childElement._section;
1039             childElement = childElement.previousSibling;
1040         }
1041
1042         return null;
1043     },
1044
1045     /**
1046      * @return {?WebInspector.StylePropertiesSection}
1047      */
1048     nextSibling: function()
1049     {
1050         var curElement = this.element;
1051         do {
1052             curElement = curElement.nextSibling;
1053         } while (curElement && !curElement._section);
1054
1055         return curElement ? curElement._section : null;
1056     },
1057
1058     /**
1059      * @return {?WebInspector.StylePropertiesSection}
1060      */
1061     previousSibling: function()
1062     {
1063         var curElement = this.element;
1064         do {
1065             curElement = curElement.previousSibling;
1066         } while (curElement && !curElement._section);
1067
1068         return curElement ? curElement._section : null;
1069     },
1070
1071     /**
1072      * @return {?WebInspector.CSSRule}
1073      */
1074     rule: function()
1075     {
1076         return this.styleRule.rule();
1077     },
1078
1079     /**
1080      * @param {?Event} event
1081      */
1082     _onNewRuleClick: function(event)
1083     {
1084         event.consume();
1085         var rule = this.rule();
1086         var range = WebInspector.TextRange.createFromLocation(rule.style.range.endLine, rule.style.range.endColumn + 1);
1087         this._parentPane._addBlankSection(this, /** @type {string} */(rule.styleSheetId), range);
1088     },
1089
1090     /**
1091      * @param {!WebInspector.CSSRule} editedRule
1092      * @param {!WebInspector.TextRange} oldRange
1093      * @param {!WebInspector.TextRange} newRange
1094      */
1095     _styleSheetRuleEdited: function(editedRule, oldRange, newRange)
1096     {
1097         var rule = this.rule();
1098         if (!rule || !rule.styleSheetId)
1099             return;
1100         if (rule !== editedRule)
1101             rule.sourceStyleSheetEdited(/** @type {string} */(editedRule.styleSheetId), oldRange, newRange);
1102         this._updateMediaList();
1103         this._updateRuleOrigin();
1104     },
1105
1106     /**
1107      * @param {!WebInspector.CSSMedia} oldMedia
1108      * @param {!WebInspector.CSSMedia} newMedia
1109      */
1110     _styleSheetMediaEdited: function(oldMedia, newMedia)
1111     {
1112         var rule = this.rule();
1113         if (!rule || !rule.styleSheetId)
1114             return;
1115         rule.mediaEdited(oldMedia, newMedia);
1116         this._updateMediaList();
1117     },
1118
1119     /**
1120      * @param {?Array.<!WebInspector.CSSMedia>} mediaRules
1121      */
1122     _createMediaList: function(mediaRules)
1123     {
1124         if (!mediaRules)
1125             return;
1126         for (var i = mediaRules.length - 1; i >= 0; --i) {
1127             var media = mediaRules[i];
1128             var mediaDataElement = this._mediaListElement.createChild("div", "media");
1129             if (media.sourceURL) {
1130                 var anchor = this._parentPane._linkifier.linkifyMedia(media);
1131                 anchor.classList.add("subtitle");
1132                 mediaDataElement.appendChild(anchor);
1133             }
1134
1135             var mediaContainerElement = mediaDataElement.createChild("span");
1136             var mediaTextElement = mediaContainerElement.createChild("span", "media-text");
1137             mediaTextElement.title = media.text;
1138             switch (media.source) {
1139             case WebInspector.CSSMedia.Source.LINKED_SHEET:
1140             case WebInspector.CSSMedia.Source.INLINE_SHEET:
1141                 mediaTextElement.textContent = "media=\"" + media.text + "\"";
1142                 break;
1143             case WebInspector.CSSMedia.Source.MEDIA_RULE:
1144                 var decoration = mediaContainerElement.createChild("span");
1145                 mediaContainerElement.insertBefore(decoration, mediaTextElement);
1146                 decoration.textContent = "@media ";
1147                 decoration.title = media.text;
1148                 mediaTextElement.textContent = media.text;
1149                 if (media.parentStyleSheetId) {
1150                     mediaDataElement.classList.add("editable-media");
1151                     mediaTextElement.addEventListener("click", this._handleMediaRuleClick.bind(this, media, mediaTextElement), false);
1152                 }
1153                 break;
1154             case WebInspector.CSSMedia.Source.IMPORT_RULE:
1155                 mediaTextElement.textContent = "@import " + media.text;
1156                 break;
1157             }
1158         }
1159     },
1160
1161     _updateMediaList: function()
1162     {
1163         this._mediaListElement.removeChildren();
1164         this._createMediaList(this.styleRule.media());
1165     },
1166
1167     /**
1168      * @param {string} propertyName
1169      * @return {boolean}
1170      */
1171     isPropertyInherited: function(propertyName)
1172     {
1173         if (this.styleRule.inherited()) {
1174             // While rendering inherited stylesheet, reverse meaning of this property.
1175             // Render truly inherited properties with black, i.e. return them as non-inherited.
1176             return !WebInspector.CSSMetadata.isPropertyInherited(propertyName);
1177         }
1178         return false;
1179     },
1180
1181     /**
1182      * @return {?WebInspector.StylePropertiesSection}
1183      */
1184     nextEditableSibling: function()
1185     {
1186         var curSection = this;
1187         do {
1188             curSection = curSection.nextSibling();
1189         } while (curSection && !curSection.editable);
1190
1191         if (!curSection) {
1192             curSection = this.firstSibling();
1193             while (curSection && !curSection.editable)
1194                 curSection = curSection.nextSibling();
1195         }
1196
1197         return (curSection && curSection.editable) ? curSection : null;
1198     },
1199
1200     /**
1201      * @return {?WebInspector.StylePropertiesSection}
1202      */
1203     previousEditableSibling: function()
1204     {
1205         var curSection = this;
1206         do {
1207             curSection = curSection.previousSibling();
1208         } while (curSection && !curSection.editable);
1209
1210         if (!curSection) {
1211             curSection = this.lastSibling();
1212             while (curSection && !curSection.editable)
1213                 curSection = curSection.previousSibling();
1214         }
1215
1216         return (curSection && curSection.editable) ? curSection : null;
1217     },
1218
1219     /**
1220      * @param {boolean} full
1221      */
1222     update: function(full)
1223     {
1224         if (this.styleRule.selectorText())
1225             this._selectorElement.textContent = this.styleRule.selectorText();
1226         this._markSelectorMatches();
1227         if (full) {
1228             this.propertiesTreeOutline.removeChildren();
1229             this.onpopulate();
1230         } else {
1231             var child = this.propertiesTreeOutline.firstChild();
1232             while (child) {
1233                 child.setOverloaded(this.styleRule.isPropertyOverloaded(child.name));
1234                 child = child.traverseNextTreeElement(false, null, true);
1235             }
1236         }
1237         this.afterUpdate();
1238     },
1239
1240     afterUpdate: function()
1241     {
1242         if (this._afterUpdate) {
1243             this._afterUpdate(this);
1244             delete this._afterUpdate;
1245             this._afterUpdateFinishedForTest();
1246         }
1247     },
1248
1249     _afterUpdateFinishedForTest: function()
1250     {
1251     },
1252
1253     onpopulate: function()
1254     {
1255         var style = this.styleRule.style();
1256         for (var property of style.leadingProperties()) {
1257             var isShorthand = !!WebInspector.CSSMetadata.cssPropertiesMetainfo.longhands(property.name);
1258             var inherited = this.isPropertyInherited(property.name);
1259             var overloaded = this.styleRule.isPropertyOverloaded(property.name);
1260             var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, property, isShorthand, inherited, overloaded);
1261             this.propertiesTreeOutline.appendChild(item);
1262         }
1263     },
1264
1265     /**
1266      * @return {boolean}
1267      */
1268     _updateFilter: function()
1269     {
1270         var hasMatchingChild = false;
1271         for (var child of this.propertiesTreeOutline.rootElement().children())
1272             hasMatchingChild |= child._updateFilter();
1273
1274         var regex = this._parentPane.filterRegex();
1275         var hideRule = !hasMatchingChild && regex && !regex.test(this.element.textContent);
1276         this.element.classList.toggle("hidden", hideRule);
1277         if (!hideRule && this.styleRule.rule())
1278             this._markSelectorHighlights();
1279         return !hideRule;
1280     },
1281
1282     _markSelectorMatches: function()
1283     {
1284         var rule = this.styleRule.rule();
1285         if (!rule)
1286             return;
1287
1288         this._mediaListElement.classList.toggle("media-matches", this.styleRule.mediaMatches());
1289
1290         if (!this.styleRule.hasMatchingSelectors())
1291             return;
1292
1293         var selectors = rule.selectors;
1294         var fragment = createDocumentFragment();
1295         var currentMatch = 0;
1296         var matchingSelectors = rule.matchingSelectors;
1297         for (var i = 0; i < selectors.length ; ++i) {
1298             if (i)
1299                 fragment.createTextChild(", ");
1300             var isSelectorMatching = matchingSelectors[currentMatch] === i;
1301             if (isSelectorMatching)
1302                 ++currentMatch;
1303             var matchingSelectorClass = isSelectorMatching ? " selector-matches" : "";
1304             var selectorElement = createElement("span");
1305             selectorElement.className = "simple-selector" + matchingSelectorClass;
1306             if (rule.styleSheetId)
1307                 selectorElement._selectorIndex = i;
1308             selectorElement.textContent = selectors[i].value;
1309
1310             fragment.appendChild(selectorElement);
1311         }
1312
1313         this._selectorElement.removeChildren();
1314         this._selectorElement.appendChild(fragment);
1315         this._markSelectorHighlights();
1316     },
1317
1318     _markSelectorHighlights: function()
1319     {
1320         var selectors = this._selectorElement.getElementsByClassName("simple-selector");
1321         var regex = this._parentPane.filterRegex();
1322         for (var i = 0; i < selectors.length; ++i) {
1323             var selectorMatchesFilter = regex && regex.test(selectors[i].textContent);
1324             selectors[i].classList.toggle("filter-match", selectorMatchesFilter);
1325         }
1326     },
1327
1328     /**
1329      * @return {boolean}
1330      */
1331     _checkWillCancelEditing: function()
1332     {
1333         var willCauseCancelEditing = this._willCauseCancelEditing;
1334         delete this._willCauseCancelEditing;
1335         return willCauseCancelEditing;
1336     },
1337
1338     /**
1339      * @param {!Event} event
1340      */
1341     _handleSelectorContainerClick: function(event)
1342     {
1343         if (this._checkWillCancelEditing() || !this.editable)
1344             return;
1345         if (event.target === this._selectorContainer) {
1346             this.addNewBlankProperty(0).startEditing();
1347             event.consume(true);
1348         }
1349     },
1350
1351     /**
1352      * @param {number=} index
1353      * @return {!WebInspector.StylePropertyTreeElement}
1354      */
1355     addNewBlankProperty: function(index)
1356     {
1357         var property = this.styleRule.style().newBlankProperty(index);
1358         var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this.styleRule, property, false, false, false);
1359         index = property.index;
1360         this.propertiesTreeOutline.insertChild(item, index);
1361         item.listItemElement.textContent = "";
1362         item._newProperty = true;
1363         item.updateTitle();
1364         return item;
1365     },
1366
1367     _handleEmptySpaceMouseDown: function()
1368     {
1369         this._willCauseCancelEditing = this._parentPane._isEditingStyle;
1370     },
1371
1372     /**
1373      * @param {!Event} event
1374      */
1375     _handleEmptySpaceClick: function(event)
1376     {
1377         if (!this.editable)
1378             return;
1379
1380         if (!event.target.isComponentSelectionCollapsed())
1381             return;
1382
1383         if (this._checkWillCancelEditing())
1384             return;
1385
1386         if (event.target.enclosingNodeOrSelfWithNodeName("a"))
1387             return;
1388
1389         if (event.target.classList.contains("header") || this.element.classList.contains("read-only") || event.target.enclosingNodeOrSelfWithClass("media")) {
1390             event.consume();
1391             return;
1392         }
1393         this.addNewBlankProperty().startEditing();
1394         event.consume(true);
1395     },
1396
1397     /**
1398      * @param {!WebInspector.CSSMedia} media
1399      * @param {!Element} element
1400      * @param {!Event} event
1401      */
1402     _handleMediaRuleClick: function(media, element, event)
1403     {
1404         if (WebInspector.isBeingEdited(element))
1405             return;
1406
1407         var config = new WebInspector.InplaceEditor.Config(this._editingMediaCommitted.bind(this, media), this._editingMediaCancelled.bind(this, element), undefined, this._editingMediaBlurHandler.bind(this));
1408         WebInspector.InplaceEditor.startEditing(element, config);
1409
1410         element.getComponentSelection().setBaseAndExtent(element, 0, element, 1);
1411         this._parentPane.setEditingStyle(true);
1412         var parentMediaElement = element.enclosingNodeOrSelfWithClass("media");
1413         parentMediaElement.classList.add("editing-media");
1414
1415         event.consume(true);
1416     },
1417
1418     /**
1419      * @param {!Element} element
1420      */
1421     _editingMediaFinished: function(element)
1422     {
1423         this._parentPane.setEditingStyle(false);
1424         var parentMediaElement = element.enclosingNodeOrSelfWithClass("media");
1425         parentMediaElement.classList.remove("editing-media");
1426     },
1427
1428     /**
1429      * @param {!Element} element
1430      */
1431     _editingMediaCancelled: function(element)
1432     {
1433         this._editingMediaFinished(element);
1434         // Mark the selectors in group if necessary.
1435         // This is overridden by BlankStylePropertiesSection.
1436         this._markSelectorMatches();
1437         element.getComponentSelection().collapse(element, 0);
1438     },
1439
1440     /**
1441      * @param {!Element} editor
1442      * @param {!Event} blurEvent
1443      * @return {boolean}
1444      */
1445     _editingMediaBlurHandler: function(editor, blurEvent)
1446     {
1447         return true;
1448     },
1449
1450     /**
1451      * @param {!WebInspector.CSSMedia} media
1452      * @param {!Element} element
1453      * @param {string} newContent
1454      * @param {string} oldContent
1455      * @param {(!WebInspector.StylePropertyTreeElement.Context|undefined)} context
1456      * @param {string} moveDirection
1457      */
1458     _editingMediaCommitted: function(media, element, newContent, oldContent, context, moveDirection)
1459     {
1460         this._parentPane.setEditingStyle(false);
1461         this._editingMediaFinished(element);
1462
1463         if (newContent)
1464             newContent = newContent.trim();
1465
1466         /**
1467          * @param {?WebInspector.CSSMedia} newMedia
1468          * @this {WebInspector.StylePropertiesSection}
1469          */
1470         function userCallback(newMedia)
1471         {
1472             if (newMedia) {
1473                 this._parentPane._styleSheetMediaEdited(media, newMedia);
1474                 this._parentPane._refreshUpdate(this);
1475             }
1476             delete this._parentPane._userOperation;
1477             this._editingMediaTextCommittedForTest();
1478         }
1479
1480         // This gets deleted in finishOperation(), which is called both on success and failure.
1481         this._parentPane._userOperation = true;
1482         this._parentPane._cssModel.setMediaText(media, newContent, userCallback.bind(this));
1483     },
1484
1485     _editingMediaTextCommittedForTest: function() { },
1486
1487     /**
1488      * @param {!Event} event
1489      */
1490     _handleSelectorClick: function(event)
1491     {
1492         if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!MouseEvent} */(event)) && this.navigable && event.target.classList.contains("simple-selector")) {
1493             var index = event.target._selectorIndex;
1494             var cssModel = this._parentPane._cssModel;
1495             var rule = this.rule();
1496             var rawLocation = new WebInspector.CSSLocation(cssModel, /** @type {string} */(rule.styleSheetId), rule.sourceURL, rule.lineNumberInSource(index), rule.columnNumberInSource(index));
1497             var uiLocation = WebInspector.cssWorkspaceBinding.rawLocationToUILocation(rawLocation);
1498             if (uiLocation)
1499                 WebInspector.Revealer.reveal(uiLocation);
1500             event.consume(true);
1501             return;
1502         }
1503         this._startEditingOnMouseEvent();
1504         event.consume(true);
1505     },
1506
1507     _startEditingOnMouseEvent: function()
1508     {
1509         if (!this.editable)
1510             return;
1511
1512         if (!this.rule() && !this.propertiesTreeOutline.rootElement().childCount()) {
1513             this.addNewBlankProperty().startEditing();
1514             return;
1515         }
1516
1517         if (!this.rule())
1518             return;
1519
1520         this.startEditingSelector();
1521     },
1522
1523     startEditingSelector: function()
1524     {
1525         var element = this._selectorElement;
1526         if (WebInspector.isBeingEdited(element))
1527             return;
1528
1529         element.scrollIntoViewIfNeeded(false);
1530         element.textContent = element.textContent; // Reset selector marks in group.
1531
1532         var config = new WebInspector.InplaceEditor.Config(this.editingSelectorCommitted.bind(this), this.editingSelectorCancelled.bind(this), undefined, this._editingSelectorBlurHandler.bind(this));
1533         WebInspector.InplaceEditor.startEditing(this._selectorElement, config);
1534
1535         element.getComponentSelection().setBaseAndExtent(element, 0, element, 1);
1536         this._parentPane.setEditingStyle(true);
1537         this._parentPane._startEditingSelector(this);
1538     },
1539
1540     /**
1541      * @param {string} text
1542      */
1543     setSelectorText: function(text)
1544     {
1545         this._selectorElement.textContent = text;
1546         this._selectorElement.getComponentSelection().setBaseAndExtent(this._selectorElement, 0, this._selectorElement, 1);
1547     },
1548
1549     /**
1550      * @param {!Element} editor
1551      * @param {!Event} blurEvent
1552      * @return {boolean}
1553      */
1554     _editingSelectorBlurHandler: function(editor, blurEvent)
1555     {
1556         if (!blurEvent.relatedTarget)
1557             return true;
1558         var elementTreeOutline = blurEvent.relatedTarget.enclosingNodeOrSelfWithClass("elements-tree-outline");
1559         if (!elementTreeOutline)
1560             return true;
1561         editor.focus();
1562         return false;
1563     },
1564
1565     /**
1566      * @param {string} moveDirection
1567      */
1568     _moveEditorFromSelector: function(moveDirection)
1569     {
1570         this._markSelectorMatches();
1571
1572         if (!moveDirection)
1573             return;
1574
1575         if (moveDirection === "forward") {
1576             var firstChild = this.propertiesTreeOutline.firstChild();
1577             while (firstChild && firstChild.inherited())
1578                 firstChild = firstChild.nextSibling;
1579             if (!firstChild)
1580                 this.addNewBlankProperty().startEditing();
1581             else
1582                 firstChild.startEditing(firstChild.nameElement);
1583         } else {
1584             var previousSection = this.previousEditableSibling();
1585             if (!previousSection)
1586                 return;
1587
1588             previousSection.addNewBlankProperty().startEditing();
1589         }
1590     },
1591
1592     /**
1593      * @param {!Element} element
1594      * @param {string} newContent
1595      * @param {string} oldContent
1596      * @param {(!WebInspector.StylePropertyTreeElement.Context|undefined)} context
1597      * @param {string} moveDirection
1598      */
1599     editingSelectorCommitted: function(element, newContent, oldContent, context, moveDirection)
1600     {
1601         this._editingSelectorEnded();
1602         if (newContent)
1603             newContent = newContent.trim();
1604         if (newContent === oldContent) {
1605             // Revert to a trimmed version of the selector if need be.
1606             this._selectorElement.textContent = newContent;
1607             this._moveEditorFromSelector(moveDirection);
1608             return;
1609         }
1610
1611         /**
1612          * @param {?WebInspector.CSSRule} newRule
1613          * @this {WebInspector.StylePropertiesSection}
1614          */
1615         function finishCallback(newRule)
1616         {
1617             if (newRule) {
1618                 var doesAffectSelectedNode = newRule.matchingSelectors.length > 0;
1619                 this.element.classList.toggle("no-affect", !doesAffectSelectedNode);
1620
1621                 var oldSelectorRange = /** @type {!WebInspector.TextRange} */(this.rule().selectorRange());
1622                 var newSelectorRange = /** @type {!WebInspector.TextRange} */(newRule.selectorRange());
1623                 this.styleRule.updateRule(newRule);
1624
1625                 this._parentPane._refreshUpdate(this);
1626                 this._parentPane._styleSheetRuleEdited(newRule, oldSelectorRange, newSelectorRange);
1627             }
1628
1629             delete this._parentPane._userOperation;
1630             this._moveEditorFromSelector(moveDirection);
1631             this._editingSelectorCommittedForTest();
1632         }
1633
1634         // This gets deleted in finishOperationAndMoveEditor(), which is called both on success and failure.
1635         this._parentPane._userOperation = true;
1636         var selectedNode = this._parentPane.node();
1637         this._parentPane._cssModel.setRuleSelector(this.rule(), selectedNode ? selectedNode.id : 0, newContent, finishCallback.bind(this));
1638     },
1639
1640     _editingSelectorCommittedForTest: function() { },
1641
1642     _updateRuleOrigin: function()
1643     {
1644         this._selectorRefElement.removeChildren();
1645         this._selectorRefElement.appendChild(WebInspector.StylePropertiesSection.createRuleOriginNode(this._parentPane._cssModel, this._parentPane._linkifier, this.rule()));
1646     },
1647
1648     _editingSelectorEnded: function()
1649     {
1650         this._parentPane.setEditingStyle(false);
1651         this._parentPane._finishEditingSelector();
1652     },
1653
1654     editingSelectorCancelled: function()
1655     {
1656         this._editingSelectorEnded();
1657
1658         // Mark the selectors in group if necessary.
1659         // This is overridden by BlankStylePropertiesSection.
1660         this._markSelectorMatches();
1661     }
1662 }
1663
1664 /**
1665  * @param {!WebInspector.CSSStyleModel} cssModel
1666  * @param {!WebInspector.Linkifier} linkifier
1667  * @param {?WebInspector.CSSRule} rule
1668  * @return {!Node}
1669  */
1670 WebInspector.StylePropertiesSection.createRuleOriginNode = function(cssModel, linkifier, rule)
1671 {
1672     if (!rule)
1673         return createTextNode("");
1674
1675     var firstMatchingIndex = rule.matchingSelectors && rule.matchingSelectors.length ? rule.matchingSelectors[0] : 0;
1676     var ruleLocation = rule.selectors[firstMatchingIndex].range;
1677
1678     var header = rule.styleSheetId ? cssModel.styleSheetHeaderForId(rule.styleSheetId) : null;
1679     if (ruleLocation && rule.styleSheetId && header && header.resourceURL())
1680         return WebInspector.StylePropertiesSection._linkifyRuleLocation(cssModel, linkifier, rule.styleSheetId, ruleLocation);
1681
1682     if (rule.isUserAgent())
1683         return createTextNode(WebInspector.UIString("user agent stylesheet"));
1684     if (rule.isInjected())
1685         return createTextNode(WebInspector.UIString("injected stylesheet"));
1686     if (rule.isViaInspector())
1687         return createTextNode(WebInspector.UIString("via inspector"));
1688
1689     if (header && header.ownerNode) {
1690         var link = WebInspector.DOMPresentationUtils.linkifyDeferredNodeReference(header.ownerNode);
1691         link.textContent = "<style>…</style>";
1692         return link;
1693     }
1694
1695     return createTextNode("");
1696 }
1697
1698 /**
1699  * @param {!WebInspector.CSSStyleModel} cssModel
1700  * @param {!WebInspector.Linkifier} linkifier
1701  * @param {string} styleSheetId
1702  * @param {!WebInspector.TextRange} ruleLocation
1703  * @return {!Node}
1704  */
1705 WebInspector.StylePropertiesSection._linkifyRuleLocation = function(cssModel, linkifier, styleSheetId, ruleLocation)
1706 {
1707     var styleSheetHeader = cssModel.styleSheetHeaderForId(styleSheetId);
1708     var sourceURL = styleSheetHeader.resourceURL();
1709     var lineNumber = styleSheetHeader.lineNumberInSource(ruleLocation.startLine);
1710     var columnNumber = styleSheetHeader.columnNumberInSource(ruleLocation.startLine, ruleLocation.startColumn);
1711     var matchingSelectorLocation = new WebInspector.CSSLocation(cssModel, styleSheetId, sourceURL, lineNumber, columnNumber);
1712     return linkifier.linkifyCSSLocation(matchingSelectorLocation);
1713 }
1714
1715 /**
1716  * @constructor
1717  * @extends {WebInspector.StylePropertiesSection}
1718  * @param {!WebInspector.StylesSidebarPane} stylesPane
1719  * @param {string} defaultSelectorText
1720  * @param {string} styleSheetId
1721  * @param {!WebInspector.TextRange} ruleLocation
1722  * @param {!WebInspector.StylesSectionModel} insertAfterStyleRule
1723  */
1724 WebInspector.BlankStylePropertiesSection = function(stylesPane, defaultSelectorText, styleSheetId, ruleLocation, insertAfterStyleRule)
1725 {
1726     var dummyCascade = new WebInspector.SectionCascade();
1727     var blankSectionModel = dummyCascade.appendModelFromStyle(WebInspector.CSSStyleDeclaration.createDummyStyle(stylesPane._cssModel), defaultSelectorText);
1728     blankSectionModel.setEditable(true);
1729     WebInspector.StylePropertiesSection.call(this, stylesPane, blankSectionModel);
1730     this._ruleLocation = ruleLocation;
1731     this._styleSheetId = styleSheetId;
1732     this._selectorRefElement.removeChildren();
1733     this._selectorRefElement.appendChild(WebInspector.StylePropertiesSection._linkifyRuleLocation(this._parentPane._cssModel, this._parentPane._linkifier, styleSheetId, this._actualRuleLocation()));
1734     if (insertAfterStyleRule)
1735         this._createMediaList(insertAfterStyleRule.media());
1736     this._insertAfterStyleRule = insertAfterStyleRule;
1737     this.element.classList.add("blank-section");
1738 }
1739
1740 WebInspector.BlankStylePropertiesSection.prototype = {
1741     /**
1742      * @return {!WebInspector.TextRange}
1743      */
1744     _actualRuleLocation: function()
1745     {
1746         var prefix = this._rulePrefix();
1747         var lines = prefix.split("\n");
1748         var editRange = new WebInspector.TextRange(0, 0, lines.length - 1, lines.peekLast().length);
1749         return this._ruleLocation.rebaseAfterTextEdit(WebInspector.TextRange.createFromLocation(0, 0), editRange);
1750     },
1751
1752     /**
1753      * @return {string}
1754      */
1755     _rulePrefix: function()
1756     {
1757         return this._ruleLocation.startLine === 0 && this._ruleLocation.startColumn === 0 ? "" : "\n\n";
1758     },
1759
1760     /**
1761      * @return {boolean}
1762      */
1763     get isBlank()
1764     {
1765         return !this._normal;
1766     },
1767
1768     /**
1769      * @override
1770      * @param {!Element} element
1771      * @param {string} newContent
1772      * @param {string} oldContent
1773      * @param {!WebInspector.StylePropertyTreeElement.Context|undefined} context
1774      * @param {string} moveDirection
1775      */
1776     editingSelectorCommitted: function(element, newContent, oldContent, context, moveDirection)
1777     {
1778         if (!this.isBlank) {
1779             WebInspector.StylePropertiesSection.prototype.editingSelectorCommitted.call(this, element, newContent, oldContent, context, moveDirection);
1780             return;
1781         }
1782
1783         /**
1784          * @param {?WebInspector.CSSRule} newRule
1785          * @this {WebInspector.StylePropertiesSection}
1786          */
1787         function userCallback(newRule)
1788         {
1789             if (!newRule) {
1790                 this.editingSelectorCancelled();
1791                 this._editingSelectorCommittedForTest();
1792                 return;
1793             }
1794             var doesSelectorAffectSelectedNode = newRule.matchingSelectors.length > 0;
1795             this._makeNormal(newRule);
1796
1797             if (!doesSelectorAffectSelectedNode)
1798                 this.element.classList.add("no-affect");
1799
1800             var ruleTextLines = ruleText.split("\n");
1801             var startLine = this._ruleLocation.startLine;
1802             var startColumn = this._ruleLocation.startColumn;
1803             var newRange = new WebInspector.TextRange(startLine, startColumn, startLine + ruleTextLines.length - 1, startColumn + ruleTextLines[ruleTextLines.length - 1].length);
1804             this._parentPane._styleSheetRuleEdited(newRule, this._ruleLocation, newRange);
1805
1806             this._updateRuleOrigin();
1807             if (this.element.parentElement) // Might have been detached already.
1808                 this._moveEditorFromSelector(moveDirection);
1809
1810             delete this._parentPane._userOperation;
1811             this._editingSelectorEnded();
1812             this._markSelectorMatches();
1813
1814             this._editingSelectorCommittedForTest();
1815         }
1816
1817         if (newContent)
1818             newContent = newContent.trim();
1819         this._parentPane._userOperation = true;
1820
1821         var cssModel = this._parentPane._cssModel;
1822         var ruleText = this._rulePrefix() + newContent + " {}";
1823         cssModel.addRule(this._styleSheetId, this._parentPane.node(), ruleText, this._ruleLocation, userCallback.bind(this));
1824     },
1825
1826     editingSelectorCancelled: function()
1827     {
1828         delete this._parentPane._userOperation;
1829         if (!this.isBlank) {
1830             WebInspector.StylePropertiesSection.prototype.editingSelectorCancelled.call(this);
1831             return;
1832         }
1833
1834         this._editingSelectorEnded();
1835         this._parentPane.removeSection(this);
1836     },
1837
1838     /**
1839      * @param {!WebInspector.CSSRule} newRule
1840      */
1841     _makeNormal: function(newRule)
1842     {
1843         this.element.classList.remove("blank-section");
1844         var model = this._insertAfterStyleRule.cascade().insertModelFromRule(newRule, this._insertAfterStyleRule);
1845         this.styleRule = model;
1846
1847         // FIXME: replace this instance by a normal WebInspector.StylePropertiesSection.
1848         this._normal = true;
1849     },
1850
1851     __proto__: WebInspector.StylePropertiesSection.prototype
1852 }
1853
1854 /**
1855  * @constructor
1856  * @extends {TreeElement}
1857  * @param {!WebInspector.StylesSidebarPane} stylesPane
1858  * @param {!WebInspector.StylesSectionModel} styleRule
1859  * @param {!WebInspector.CSSProperty} property
1860  * @param {boolean} isShorthand
1861  * @param {boolean} inherited
1862  * @param {boolean} overloaded
1863  */
1864 WebInspector.StylePropertyTreeElement = function(stylesPane, styleRule, property, isShorthand, inherited, overloaded)
1865 {
1866     // Pass an empty title, the title gets made later in onattach.
1867     TreeElement.call(this, "", isShorthand);
1868     this._styleRule = styleRule;
1869     this.property = property;
1870     this._inherited = inherited;
1871     this._overloaded = overloaded;
1872     this.selectable = false;
1873     this._parentPane = stylesPane;
1874     this.isShorthand = isShorthand;
1875     this._applyStyleThrottler = new WebInspector.Throttler(0);
1876 }
1877
1878 /** @typedef {{expanded: boolean, hasChildren: boolean, isEditingName: boolean, previousContent: string}} */
1879 WebInspector.StylePropertyTreeElement.Context;
1880
1881 WebInspector.StylePropertyTreeElement.prototype = {
1882 /**
1883      * @return {!WebInspector.CSSStyleDeclaration}
1884      */
1885     style: function()
1886     {
1887         return this._styleRule.style();
1888     },
1889
1890     /**
1891      * @return {boolean}
1892      */
1893     inherited: function()
1894     {
1895         return this._inherited;
1896     },
1897
1898     /**
1899      * @return {boolean}
1900      */
1901     overloaded: function()
1902     {
1903         return this._overloaded;
1904     },
1905
1906     /**
1907      * @param {boolean} x
1908      */
1909     setOverloaded: function(x)
1910     {
1911         if (x === this._overloaded)
1912             return;
1913         this._overloaded = x;
1914         this._updateState();
1915     },
1916
1917     get name()
1918     {
1919         return this.property.name;
1920     },
1921
1922     get value()
1923     {
1924         return this.property.value;
1925     },
1926
1927     /**
1928      * @return {boolean}
1929      */
1930     _updateFilter: function()
1931     {
1932         var regex = this._parentPane.filterRegex();
1933         var matches = !!regex && (regex.test(this.property.name) || regex.test(this.property.value));
1934         this.listItemElement.classList.toggle("filter-match", matches);
1935
1936         this.onpopulate();
1937         var hasMatchingChildren = false;
1938         for (var i = 0; i < this.childCount(); ++i)
1939             hasMatchingChildren |= this.childAt(i)._updateFilter();
1940
1941         if (!regex) {
1942             if (this._expandedDueToFilter)
1943                 this.collapse();
1944             this._expandedDueToFilter = false;
1945         } else if (hasMatchingChildren && !this.expanded) {
1946             this.expand();
1947             this._expandedDueToFilter = true;
1948         } else if (!hasMatchingChildren && this.expanded && this._expandedDueToFilter) {
1949             this.collapse();
1950             this._expandedDueToFilter = false;
1951         }
1952         return matches;
1953     },
1954
1955     /**
1956      * @param {string} text
1957      * @return {!Node}
1958      */
1959     _processColor: function(text)
1960     {
1961         // We can be called with valid non-color values of |text| (like 'none' from border style)
1962         var color = WebInspector.Color.parse(text);
1963         if (!color)
1964             return createTextNode(text);
1965
1966         if (!this._styleRule.editable()) {
1967             var swatch = WebInspector.ColorSwatch.create();
1968             swatch.setColorText(text);
1969             return swatch;
1970         }
1971
1972         var stylesPopoverHelper = this._parentPane._stylesPopoverHelper;
1973         var swatchIcon = new WebInspector.ColorSwatchPopoverIcon(this, stylesPopoverHelper, text);
1974
1975         /**
1976          * @param {?Map.<string, string>} styles
1977          */
1978         function computedCallback(styles)
1979         {
1980             if (!styles)
1981                 return;
1982             var bgColorText = styles.get("background-color") || "";
1983             var bgColor = WebInspector.Color.parse(bgColorText);
1984             // TODO(aboxhall): for background color with alpha, compute the actual
1985             // visible background color (blended with content underneath).
1986             if (bgColor && !bgColor.hasAlpha())
1987                 swatchIcon.setContrastColor(bgColor);
1988         }
1989
1990         if (this.property.name === "color" && this._parentPane.cssModel() && this.node()) {
1991             var cssModel = this._parentPane.cssModel();
1992             cssModel.computedStylePromise(this.node().id).then(computedCallback);
1993         }
1994
1995         return swatchIcon.element();
1996     },
1997
1998     /**
1999      * @return {string}
2000      */
2001     renderedPropertyText: function()
2002     {
2003         return this.nameElement.textContent + ": " + this.valueElement.textContent;
2004     },
2005
2006     /**
2007      * @param {string} text
2008      * @return {!Node}
2009      */
2010     _processBezier: function(text)
2011     {
2012         var geometry = WebInspector.Geometry.CubicBezier.parse(text);
2013         if (!geometry || !this._styleRule.editable())
2014             return createTextNode(text);
2015         var stylesPopoverHelper = this._parentPane._stylesPopoverHelper;
2016         return new WebInspector.BezierPopoverIcon(this, stylesPopoverHelper, text).element();
2017     },
2018
2019     _updateState: function()
2020     {
2021         if (!this.listItemElement)
2022             return;
2023
2024         if (this.style().isPropertyImplicit(this.name))
2025             this.listItemElement.classList.add("implicit");
2026         else
2027             this.listItemElement.classList.remove("implicit");
2028
2029         var hasIgnorableError = !this.property.parsedOk && WebInspector.StylesSidebarPane.ignoreErrorsForProperty(this.property);
2030         if (hasIgnorableError)
2031             this.listItemElement.classList.add("has-ignorable-error");
2032         else
2033             this.listItemElement.classList.remove("has-ignorable-error");
2034
2035         if (this.inherited())
2036             this.listItemElement.classList.add("inherited");
2037         else
2038             this.listItemElement.classList.remove("inherited");
2039
2040         if (this.overloaded())
2041             this.listItemElement.classList.add("overloaded");
2042         else
2043             this.listItemElement.classList.remove("overloaded");
2044
2045         if (this.property.disabled)
2046             this.listItemElement.classList.add("disabled");
2047         else
2048             this.listItemElement.classList.remove("disabled");
2049     },
2050
2051     /**
2052      * @return {?WebInspector.DOMNode}
2053      */
2054     node: function()
2055     {
2056         return this._parentPane.node();
2057     },
2058
2059     /**
2060      * @return {!WebInspector.StylesSidebarPane}
2061      */
2062     parentPane: function()
2063     {
2064         return this._parentPane;
2065     },
2066
2067     /**
2068      * @return {?WebInspector.StylePropertiesSection}
2069      */
2070     section: function()
2071     {
2072         return this.treeOutline && this.treeOutline.section;
2073     },
2074
2075     _updatePane: function()
2076     {
2077         var section = this.section();
2078         if (section && section._parentPane)
2079             section._parentPane._refreshUpdate(section);
2080     },
2081
2082     /**
2083      * @param {!WebInspector.TextRange} oldStyleRange
2084      */
2085     _styleTextEdited: function(oldStyleRange)
2086     {
2087         var newStyleRange = /** @type {!WebInspector.TextRange} */ (this.style().range);
2088         this._styleRule.resetCachedData();
2089         if (this._styleRule.rule())
2090             this._parentPane._styleSheetRuleEdited(/** @type {!WebInspector.CSSRule} */(this._styleRule.rule()), oldStyleRange, newStyleRange);
2091     },
2092
2093     /**
2094      * @param {!Event} event
2095      */
2096     _toggleEnabled: function(event)
2097     {
2098         var disabled = !event.target.checked;
2099         var oldStyleRange = this.style().range;
2100         if (!oldStyleRange)
2101             return;
2102
2103         /**
2104          * @param {boolean} success
2105          * @this {WebInspector.StylePropertyTreeElement}
2106          */
2107         function callback(success)
2108         {
2109             delete this._parentPane._userOperation;
2110
2111             if (!success)
2112                 return;
2113             this._styleTextEdited(oldStyleRange);
2114             this._updatePane();
2115             this.styleTextAppliedForTest();
2116         }
2117
2118         event.consume();
2119         this._parentPane._userOperation = true;
2120         this.property.setDisabled(disabled)
2121             .then(callback.bind(this));
2122     },
2123
2124     /**
2125      * @override
2126      */
2127     onpopulate: function()
2128     {
2129         // Only populate once and if this property is a shorthand.
2130         if (this.childCount() || !this.isShorthand)
2131             return;
2132
2133         var longhandProperties = this.style().longhandProperties(this.name);
2134         for (var i = 0; i < longhandProperties.length; ++i) {
2135             var name = longhandProperties[i].name;
2136             var inherited = false;
2137             var overloaded = false;
2138
2139             var section = this.section();
2140             if (section) {
2141                 inherited = section.isPropertyInherited(name);
2142                 overloaded = section.styleRule.isPropertyOverloaded(name);
2143             }
2144
2145             var item = new WebInspector.StylePropertyTreeElement(this._parentPane, this._styleRule, longhandProperties[i], false, inherited, overloaded);
2146             this.appendChild(item);
2147         }
2148     },
2149
2150     /**
2151      * @override
2152      */
2153     onattach: function()
2154     {
2155         this.updateTitle();
2156
2157         this.listItemElement.addEventListener("mousedown", this._mouseDown.bind(this));
2158         this.listItemElement.addEventListener("mouseup", this._resetMouseDownElement.bind(this));
2159         this.listItemElement.addEventListener("click", this._mouseClick.bind(this));
2160     },
2161
2162     /**
2163      * @param {!Event} event
2164      */
2165     _mouseDown: function(event)
2166     {
2167         if (this._parentPane) {
2168             this._parentPane._mouseDownTreeElement = this;
2169             this._parentPane._mouseDownTreeElementIsName = this.nameElement && this.nameElement.isSelfOrAncestor(event.target);
2170             this._parentPane._mouseDownTreeElementIsValue = this.valueElement && this.valueElement.isSelfOrAncestor(event.target);
2171         }
2172     },
2173
2174     _resetMouseDownElement: function()
2175     {
2176         if (this._parentPane) {
2177             delete this._parentPane._mouseDownTreeElement;
2178             delete this._parentPane._mouseDownTreeElementIsName;
2179             delete this._parentPane._mouseDownTreeElementIsValue;
2180         }
2181     },
2182
2183     updateTitle: function()
2184     {
2185         this._updateState();
2186         this._expandElement = createElement("span");
2187         this._expandElement.className = "expand-element";
2188
2189         var propertyRenderer = new WebInspector.StylesSidebarPropertyRenderer(this._styleRule.rule(), this.node(), this.name, this.value);
2190         if (this.property.parsedOk) {
2191             propertyRenderer.setColorHandler(this._processColor.bind(this));
2192             propertyRenderer.setBezierHandler(this._processBezier.bind(this));
2193         }
2194
2195         this.listItemElement.removeChildren();
2196         this.nameElement = propertyRenderer.renderName();
2197         this.valueElement = propertyRenderer.renderValue();
2198         if (!this.treeOutline)
2199             return;
2200
2201         var indent = WebInspector.moduleSetting("textEditorIndent").get();
2202         this.listItemElement.createChild("span", "styles-clipboard-only").createTextChild(indent + (this.property.disabled ? "/* " : ""));
2203         this.listItemElement.appendChild(this.nameElement);
2204         this.listItemElement.createTextChild(": ");
2205         this.listItemElement.appendChild(this._expandElement);
2206         this.listItemElement.appendChild(this.valueElement);
2207         this.listItemElement.createTextChild(";");
2208         if (this.property.disabled)
2209             this.listItemElement.createChild("span", "styles-clipboard-only").createTextChild(" */");
2210
2211         if (!this.property.parsedOk) {
2212             // Avoid having longhands under an invalid shorthand.
2213             this.listItemElement.classList.add("not-parsed-ok");
2214
2215             // Add a separate exclamation mark IMG element with a tooltip.
2216             this.listItemElement.insertBefore(WebInspector.StylesSidebarPane.createExclamationMark(this.property), this.listItemElement.firstChild);
2217         }
2218         if (!this.property.activeInStyle())
2219             this.listItemElement.classList.add("inactive");
2220         this._updateFilter();
2221
2222         if (this.property.parsedOk && this.section() && this.parent.root) {
2223             var enabledCheckboxElement = createElement("input");
2224             enabledCheckboxElement.className = "enabled-button";
2225             enabledCheckboxElement.type = "checkbox";
2226             enabledCheckboxElement.checked = !this.property.disabled;
2227             enabledCheckboxElement.addEventListener("click", this._toggleEnabled.bind(this), false);
2228             this.listItemElement.insertBefore(enabledCheckboxElement, this.listItemElement.firstChild);
2229         }
2230     },
2231
2232     /**
2233      * @param {!Event} event
2234      */
2235     _mouseClick: function(event)
2236     {
2237         if (!event.target.isComponentSelectionCollapsed())
2238             return;
2239
2240         event.consume(true);
2241
2242         if (event.target === this.listItemElement) {
2243             var section = this.section();
2244             if (!section || !section.editable)
2245                 return;
2246
2247             if (section._checkWillCancelEditing())
2248                 return;
2249             section.addNewBlankProperty(this.property.index + 1).startEditing();
2250             return;
2251         }
2252
2253         if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!MouseEvent} */(event)) && this.section().navigable) {
2254             this._navigateToSource(/** @type {!Element} */(event.target));
2255             return;
2256         }
2257
2258         this.startEditing(/** @type {!Element} */(event.target));
2259     },
2260
2261     /**
2262      * @param {!Element} element
2263      */
2264     _navigateToSource: function(element)
2265     {
2266         console.assert(this.section().navigable);
2267         var propertyNameClicked = element === this.nameElement;
2268         var uiLocation = WebInspector.cssWorkspaceBinding.propertyUILocation(this.property, propertyNameClicked);
2269         if (uiLocation)
2270             WebInspector.Revealer.reveal(uiLocation);
2271     },
2272
2273     /**
2274      * @param {?Element=} selectElement
2275      */
2276     startEditing: function(selectElement)
2277     {
2278         // FIXME: we don't allow editing of longhand properties under a shorthand right now.
2279         if (this.parent.isShorthand)
2280             return;
2281
2282         if (selectElement === this._expandElement)
2283             return;
2284
2285         var section = this.section();
2286         if (section && !section.editable)
2287             return;
2288
2289         if (!selectElement)
2290             selectElement = this.nameElement; // No arguments passed in - edit the name element by default.
2291         else
2292             selectElement = selectElement.enclosingNodeOrSelfWithClass("webkit-css-property") || selectElement.enclosingNodeOrSelfWithClass("value");
2293
2294         if (WebInspector.isBeingEdited(selectElement))
2295             return;
2296
2297         var isEditingName = selectElement === this.nameElement;
2298         if (!isEditingName)
2299             this.valueElement.textContent = restoreURLs(this.valueElement.textContent, this.value);
2300
2301         /**
2302          * @param {string} fieldValue
2303          * @param {string} modelValue
2304          * @return {string}
2305          */
2306         function restoreURLs(fieldValue, modelValue)
2307         {
2308             const urlRegex = /\b(url\([^)]*\))/g;
2309             var splitFieldValue = fieldValue.split(urlRegex);
2310             if (splitFieldValue.length === 1)
2311                 return fieldValue;
2312             var modelUrlRegex = new RegExp(urlRegex);
2313             for (var i = 1; i < splitFieldValue.length; i += 2) {
2314                 var match = modelUrlRegex.exec(modelValue);
2315                 if (match)
2316                     splitFieldValue[i] = match[0];
2317             }
2318             return splitFieldValue.join("");
2319         }
2320
2321         /** @type {!WebInspector.StylePropertyTreeElement.Context} */
2322         var context = {
2323             expanded: this.expanded,
2324             hasChildren: this.isExpandable(),
2325             isEditingName: isEditingName,
2326             previousContent: selectElement.textContent
2327         };
2328
2329         // Lie about our children to prevent expanding on double click and to collapse shorthands.
2330         this.setExpandable(false);
2331
2332         if (selectElement.parentElement)
2333             selectElement.parentElement.classList.add("child-editing");
2334         selectElement.textContent = selectElement.textContent; // remove color swatch and the like
2335
2336         /**
2337          * @param {!WebInspector.StylePropertyTreeElement.Context} context
2338          * @param {!Event} event
2339          * @this {WebInspector.StylePropertyTreeElement}
2340          */
2341         function pasteHandler(context, event)
2342         {
2343             var data = event.clipboardData.getData("Text");
2344             if (!data)
2345                 return;
2346             var colonIdx = data.indexOf(":");
2347             if (colonIdx < 0)
2348                 return;
2349             var name = data.substring(0, colonIdx).trim();
2350             var value = data.substring(colonIdx + 1).trim();
2351
2352             event.preventDefault();
2353
2354             if (!("originalName" in context)) {
2355                 context.originalName = this.nameElement.textContent;
2356                 context.originalValue = this.valueElement.textContent;
2357             }
2358             this.property.name = name;
2359             this.property.value = value;
2360             this.nameElement.textContent = name;
2361             this.valueElement.textContent = value;
2362             this.nameElement.normalize();
2363             this.valueElement.normalize();
2364
2365             this.editingCommitted(event.target.textContent, context, "forward");
2366         }
2367
2368         /**
2369          * @param {!WebInspector.StylePropertyTreeElement.Context} context
2370          * @param {!Event} event
2371          * @this {WebInspector.StylePropertyTreeElement}
2372          */
2373         function blurListener(context, event)
2374         {
2375             var treeElement = this._parentPane._mouseDownTreeElement;
2376             var moveDirection = "";
2377             if (treeElement === this) {
2378                 if (isEditingName && this._parentPane._mouseDownTreeElementIsValue)
2379                     moveDirection = "forward";
2380                 if (!isEditingName && this._parentPane._mouseDownTreeElementIsName)
2381                     moveDirection = "backward";
2382             }
2383             this.editingCommitted(event.target.textContent, context, moveDirection);
2384         }
2385
2386         this._originalPropertyText = this.property.propertyText;
2387
2388         this._parentPane.setEditingStyle(true);
2389         if (selectElement.parentElement)
2390             selectElement.parentElement.scrollIntoViewIfNeeded(false);
2391
2392         var applyItemCallback = !isEditingName ? this._applyFreeFlowStyleTextEdit.bind(this) : undefined;
2393         this._prompt = new WebInspector.StylesSidebarPane.CSSPropertyPrompt(isEditingName ? WebInspector.CSSMetadata.cssPropertiesMetainfo : WebInspector.CSSMetadata.keywordsForProperty(this.nameElement.textContent), this, isEditingName);
2394         this._prompt.setAutocompletionTimeout(0);
2395         if (applyItemCallback) {
2396             this._prompt.addEventListener(WebInspector.TextPrompt.Events.ItemApplied, applyItemCallback, this);
2397             this._prompt.addEventListener(WebInspector.TextPrompt.Events.ItemAccepted, applyItemCallback, this);
2398         }
2399         var proxyElement = this._prompt.attachAndStartEditing(selectElement, blurListener.bind(this, context));
2400
2401         proxyElement.addEventListener("keydown", this._editingNameValueKeyDown.bind(this, context), false);
2402         proxyElement.addEventListener("keypress", this._editingNameValueKeyPress.bind(this, context), false);
2403         proxyElement.addEventListener("input", this._editingNameValueInput.bind(this, context), false);
2404         if (isEditingName)
2405             proxyElement.addEventListener("paste", pasteHandler.bind(this, context), false);
2406
2407         selectElement.getComponentSelection().setBaseAndExtent(selectElement, 0, selectElement, 1);
2408     },
2409
2410     /**
2411      * @param {!WebInspector.StylePropertyTreeElement.Context} context
2412      * @param {!Event} event
2413      */
2414     _editingNameValueKeyDown: function(context, event)
2415     {
2416         if (event.handled)
2417             return;
2418
2419         var result;
2420
2421         if (isEnterKey(event)) {
2422             event.preventDefault();
2423             result = "forward";
2424         } else if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code || event.keyIdentifier === "U+001B")
2425             result = "cancel";
2426         else if (!context.isEditingName && this._newProperty && event.keyCode === WebInspector.KeyboardShortcut.Keys.Backspace.code) {
2427             // For a new property, when Backspace is pressed at the beginning of new property value, move back to the property name.
2428             var selection = event.target.getComponentSelection();
2429             if (selection.isCollapsed && !selection.focusOffset) {
2430                 event.preventDefault();
2431                 result = "backward";
2432             }
2433         } else if (event.keyIdentifier === "U+0009") { // Tab key.
2434             result = event.shiftKey ? "backward" : "forward";
2435             event.preventDefault();
2436         }
2437
2438         if (result) {
2439             switch (result) {
2440             case "cancel":
2441                 this.editingCancelled(null, context);
2442                 break;
2443             case "forward":
2444             case "backward":
2445                 this.editingCommitted(event.target.textContent, context, result);
2446                 break;
2447             }
2448
2449             event.consume();
2450             return;
2451         }
2452     },
2453
2454     /**
2455      * @param {!WebInspector.StylePropertyTreeElement.Context} context
2456      * @param {!Event} event
2457      */
2458     _editingNameValueKeyPress: function(context, event)
2459     {
2460         /**
2461          * @param {string} text
2462          * @param {number} cursorPosition
2463          * @return {boolean}
2464          */
2465         function shouldCommitValueSemicolon(text, cursorPosition)
2466         {
2467             // FIXME: should this account for semicolons inside comments?
2468             var openQuote = "";
2469             for (var i = 0; i < cursorPosition; ++i) {
2470                 var ch = text[i];
2471                 if (ch === "\\" && openQuote !== "")
2472                     ++i; // skip next character inside string
2473                 else if (!openQuote && (ch === "\"" || ch === "'"))
2474                     openQuote = ch;
2475                 else if (openQuote === ch)
2476                     openQuote = "";
2477             }
2478             return !openQuote;
2479         }
2480
2481         var keyChar = String.fromCharCode(event.charCode);
2482         var isFieldInputTerminated = (context.isEditingName ? keyChar === ":" : keyChar === ";" && shouldCommitValueSemicolon(event.target.textContent, event.target.selectionLeftOffset()));
2483         if (isFieldInputTerminated) {
2484             // Enter or colon (for name)/semicolon outside of string (for value).
2485             event.consume(true);
2486             this.editingCommitted(event.target.textContent, context, "forward");
2487             return;
2488         }
2489     },
2490
2491     /**
2492      * @param {!WebInspector.StylePropertyTreeElement.Context} context
2493      * @param {!Event} event
2494      */
2495     _editingNameValueInput: function(context, event)
2496     {
2497         // Do not live-edit "content" property of pseudo elements. crbug.com/433889
2498         if (!context.isEditingName && (!this._parentPane.node().pseudoType() || this.name !== "content"))
2499             this._applyFreeFlowStyleTextEdit();
2500     },
2501
2502     _applyFreeFlowStyleTextEdit: function()
2503     {
2504         var valueText = this.valueElement.textContent;
2505         if (valueText.indexOf(";") === -1)
2506             this.applyStyleText(this.nameElement.textContent + ": " + valueText, false);
2507     },
2508
2509     kickFreeFlowStyleEditForTest: function()
2510     {
2511         this._applyFreeFlowStyleTextEdit();
2512     },
2513
2514     /**
2515      * @param {!WebInspector.StylePropertyTreeElement.Context} context
2516      */
2517     editingEnded: function(context)
2518     {
2519         this._resetMouseDownElement();
2520
2521         this.setExpandable(context.hasChildren);
2522         if (context.expanded)
2523             this.expand();
2524         var editedElement = context.isEditingName ? this.nameElement : this.valueElement;
2525         // The proxyElement has been deleted, no need to remove listener.
2526         if (editedElement.parentElement)
2527             editedElement.parentElement.classList.remove("child-editing");
2528
2529         this._parentPane.setEditingStyle(false);
2530     },
2531
2532     /**
2533      * @param {?Element} element
2534      * @param {!WebInspector.StylePropertyTreeElement.Context} context
2535      */
2536     editingCancelled: function(element, context)
2537     {
2538         this._removePrompt();
2539         this._revertStyleUponEditingCanceled();
2540         // This should happen last, as it clears the info necessary to restore the property value after [Page]Up/Down changes.
2541         this.editingEnded(context);
2542     },
2543
2544     _revertStyleUponEditingCanceled: function()
2545     {
2546         if (this._propertyHasBeenEditedIncrementally) {
2547             this.applyStyleText(this._originalPropertyText, false);
2548             delete this._originalPropertyText;
2549         } else if (this._newProperty) {
2550             this.treeOutline.removeChild(this);
2551         } else {
2552             this.updateTitle();
2553         }
2554     },
2555
2556     /**
2557      * @param {string} moveDirection
2558      * @return {?WebInspector.StylePropertyTreeElement}
2559      */
2560     _findSibling: function(moveDirection)
2561     {
2562         var target = this;
2563         do {
2564             target = (moveDirection === "forward" ? target.nextSibling : target.previousSibling);
2565         } while(target && target.inherited());
2566
2567         return target;
2568     },
2569
2570     /**
2571      * @param {string} userInput
2572      * @param {!WebInspector.StylePropertyTreeElement.Context} context
2573      * @param {string} moveDirection
2574      */
2575     editingCommitted: function(userInput, context, moveDirection)
2576     {
2577         this._removePrompt();
2578         this.editingEnded(context);
2579         var isEditingName = context.isEditingName;
2580
2581         // Determine where to move to before making changes
2582         var createNewProperty, moveToPropertyName, moveToSelector;
2583         var isDataPasted = "originalName" in context;
2584         var isDirtyViaPaste = isDataPasted && (this.nameElement.textContent !== context.originalName || this.valueElement.textContent !== context.originalValue);
2585         var isPropertySplitPaste = isDataPasted && isEditingName && this.valueElement.textContent !== context.originalValue;
2586         var moveTo = this;
2587         var moveToOther = (isEditingName ^ (moveDirection === "forward"));
2588         var abandonNewProperty = this._newProperty && !userInput && (moveToOther || isEditingName);
2589         if (moveDirection === "forward" && (!isEditingName || isPropertySplitPaste) || moveDirection === "backward" && isEditingName) {
2590             moveTo = moveTo._findSibling(moveDirection);
2591             if (moveTo)
2592                 moveToPropertyName = moveTo.name;
2593             else if (moveDirection === "forward" && (!this._newProperty || userInput))
2594                 createNewProperty = true;
2595             else if (moveDirection === "backward")
2596                 moveToSelector = true;
2597         }
2598
2599         // Make the Changes and trigger the moveToNextCallback after updating.
2600         var moveToIndex = moveTo && this.treeOutline ? this.treeOutline.rootElement().indexOfChild(moveTo) : -1;
2601         var blankInput = /^\s*$/.test(userInput);
2602         var shouldCommitNewProperty = this._newProperty && (isPropertySplitPaste || moveToOther || (!moveDirection && !isEditingName) || (isEditingName && blankInput));
2603         var section = /** @type {!WebInspector.StylePropertiesSection} */(this.section());
2604         if (((userInput !== context.previousContent || isDirtyViaPaste) && !this._newProperty) || shouldCommitNewProperty) {
2605             section._afterUpdate = moveToNextCallback.bind(this, this._newProperty, !blankInput, section);
2606             var propertyText;
2607             if (blankInput || (this._newProperty && /^\s*$/.test(this.valueElement.textContent)))
2608                 propertyText = "";
2609             else {
2610                 if (isEditingName)
2611                     propertyText = userInput + ": " + this.property.value;
2612                 else
2613                     propertyText = this.property.name + ": " + userInput;
2614             }
2615             this.applyStyleText(propertyText, true);
2616         } else {
2617             if (isEditingName)
2618                 this.property.name = userInput;
2619             else
2620                 this.property.value = userInput;
2621             if (!isDataPasted && !this._newProperty)
2622                 this.updateTitle();
2623             moveToNextCallback.call(this, this._newProperty, false, section);
2624         }
2625
2626         /**
2627          * The Callback to start editing the next/previous property/selector.
2628          * @param {boolean} alreadyNew
2629          * @param {boolean} valueChanged
2630          * @param {!WebInspector.StylePropertiesSection} section
2631          * @this {WebInspector.StylePropertyTreeElement}
2632          */
2633         function moveToNextCallback(alreadyNew, valueChanged, section)
2634         {
2635             if (!moveDirection)
2636                 return;
2637
2638             // User just tabbed through without changes.
2639             if (moveTo && moveTo.parent) {
2640                 moveTo.startEditing(!isEditingName ? moveTo.nameElement : moveTo.valueElement);
2641                 return;
2642             }
2643
2644             // User has made a change then tabbed, wiping all the original treeElements.
2645             // Recalculate the new treeElement for the same property we were going to edit next.
2646             if (moveTo && !moveTo.parent) {
2647                 var rootElement = section.propertiesTreeOutline.rootElement();
2648                 if (moveDirection === "forward" && blankInput && !isEditingName)
2649                     --moveToIndex;
2650                 if (moveToIndex >= rootElement.childCount() && !this._newProperty)
2651                     createNewProperty = true;
2652                 else {
2653                     var treeElement = moveToIndex >= 0 ? rootElement.childAt(moveToIndex) : null;
2654                     if (treeElement) {
2655                         var elementToEdit = !isEditingName || isPropertySplitPaste ? treeElement.nameElement : treeElement.valueElement;
2656                         if (alreadyNew && blankInput)
2657                             elementToEdit = moveDirection === "forward" ? treeElement.nameElement : treeElement.valueElement;
2658                         treeElement.startEditing(elementToEdit);
2659                         return;
2660                     } else if (!alreadyNew)
2661                         moveToSelector = true;
2662                 }
2663             }
2664
2665             // Create a new attribute in this section (or move to next editable selector if possible).
2666             if (createNewProperty) {
2667                 if (alreadyNew && !valueChanged && (isEditingName ^ (moveDirection === "backward")))
2668                     return;
2669
2670                 section.addNewBlankProperty().startEditing();
2671                 return;
2672             }
2673
2674             if (abandonNewProperty) {
2675                 moveTo = this._findSibling(moveDirection);
2676                 var sectionToEdit = (moveTo || moveDirection === "backward") ? section : section.nextEditableSibling();
2677                 if (sectionToEdit) {
2678                     if (sectionToEdit.rule())
2679                         sectionToEdit.startEditingSelector();
2680                     else
2681                         sectionToEdit._moveEditorFromSelector(moveDirection);
2682                 }
2683                 return;
2684             }
2685
2686             if (moveToSelector) {
2687                 if (section.rule())
2688                     section.startEditingSelector();
2689                 else
2690                     section._moveEditorFromSelector(moveDirection);
2691             }
2692         }
2693     },
2694
2695     _removePrompt: function()
2696     {
2697         // BUG 53242. This cannot go into editingEnded(), as it should always happen first for any editing outcome.
2698         if (this._prompt) {
2699             this._prompt.detach();
2700             delete this._prompt;
2701         }
2702     },
2703
2704     styleTextAppliedForTest: function() { },
2705
2706     /**
2707      * @param {string} styleText
2708      * @param {boolean} majorChange
2709      */
2710     applyStyleText: function(styleText, majorChange)
2711     {
2712         this._applyStyleThrottler.schedule(this._innerApplyStyleText.bind(this, styleText, majorChange));
2713     },
2714
2715     /**
2716      * @param {string} styleText
2717      * @param {boolean} majorChange
2718      * @return {!Promise.<undefined>}
2719      */
2720     _innerApplyStyleText: function(styleText, majorChange)
2721     {
2722         if (!this.treeOutline)
2723             return Promise.resolve();
2724
2725         var oldStyleRange = this.style().range;
2726         if (!oldStyleRange)
2727             return Promise.resolve();
2728
2729         styleText = styleText.replace(/\s/g, " ").trim(); // Replace &nbsp; with whitespace.
2730         if (!styleText.length && majorChange && this._newProperty && !this._propertyHasBeenEditedIncrementally) {
2731             // The user deleted everything and never applied a new property value via Up/Down scrolling/live editing, so remove the tree element and update.
2732             var section = this.section();
2733             this.parent.removeChild(this);
2734             section.afterUpdate();
2735             return Promise.resolve();
2736         }
2737
2738         var currentNode = this._parentPane.node();
2739         this._parentPane._userOperation = true;
2740
2741         /**
2742          * @param {boolean} success
2743          * @this {WebInspector.StylePropertyTreeElement}
2744          */
2745         function callback(success)
2746         {
2747             delete this._parentPane._userOperation;
2748
2749             if (!success) {
2750                 if (majorChange) {
2751                     // It did not apply, cancel editing.
2752                     this._revertStyleUponEditingCanceled();
2753                 }
2754                 this.styleTextAppliedForTest();
2755                 return;
2756             }
2757             this._styleTextEdited(oldStyleRange);
2758
2759             this._propertyHasBeenEditedIncrementally = true;
2760             this.property = this.style().propertyAt(this.property.index);
2761
2762             // We are happy to update UI if user is not editing.
2763             if (!this._parentPane._isEditingStyle && currentNode === this.node())
2764                 this._updatePane();
2765
2766             this.styleTextAppliedForTest();
2767         }
2768
2769         // Append a ";" if the new text does not end in ";".
2770         // FIXME: this does not handle trailing comments.
2771         if (styleText.length && !/;\s*$/.test(styleText))
2772             styleText += ";";
2773         var overwriteProperty = !this._newProperty || this._propertyHasBeenEditedIncrementally;
2774         return this.property.setText(styleText, majorChange, overwriteProperty)
2775             .then(callback.bind(this));
2776     },
2777
2778     /**
2779      * @override
2780      * @return {boolean}
2781      */
2782     ondblclick: function()
2783     {
2784         return true; // handled
2785     },
2786
2787     /**
2788      * @override
2789      * @param {!Event} event
2790      * @return {boolean}
2791      */
2792     isEventWithinDisclosureTriangle: function(event)
2793     {
2794         return event.target === this._expandElement;
2795     },
2796
2797     __proto__: TreeElement.prototype
2798 }
2799
2800 /**
2801  * @constructor
2802  * @extends {WebInspector.TextPrompt}
2803  * @param {!WebInspector.CSSMetadata} cssCompletions
2804  * @param {!WebInspector.StylePropertyTreeElement} treeElement
2805  * @param {boolean} isEditingName
2806  */
2807 WebInspector.StylesSidebarPane.CSSPropertyPrompt = function(cssCompletions, treeElement, isEditingName)
2808 {
2809     // Use the same callback both for applyItemCallback and acceptItemCallback.
2810     WebInspector.TextPrompt.call(this, this._buildPropertyCompletions.bind(this), WebInspector.StyleValueDelimiters);
2811     this.setSuggestBoxEnabled(true);
2812     this._cssCompletions = cssCompletions;
2813     this._treeElement = treeElement;
2814     this._isEditingName = isEditingName;
2815
2816     if (!isEditingName)
2817         this.disableDefaultSuggestionForEmptyInput();
2818 }
2819
2820 WebInspector.StylesSidebarPane.CSSPropertyPrompt.prototype = {
2821     /**
2822      * @override
2823      * @param {!Event} event
2824      */
2825     onKeyDown: function(event)
2826     {
2827         switch (event.keyIdentifier) {
2828         case "Up":
2829         case "Down":
2830         case "PageUp":
2831         case "PageDown":
2832             if (this._handleNameOrValueUpDown(event)) {
2833                 event.preventDefault();
2834                 return;
2835             }
2836             break;
2837         case "Enter":
2838             if (this.autoCompleteElement && !this.autoCompleteElement.textContent.length) {
2839                 this.tabKeyPressed();
2840                 return;
2841             }
2842             break;
2843         }
2844
2845         WebInspector.TextPrompt.prototype.onKeyDown.call(this, event);
2846     },
2847
2848     /**
2849      * @override
2850      * @param {!Event} event
2851      */
2852     onMouseWheel: function(event)
2853     {
2854         if (this._handleNameOrValueUpDown(event)) {
2855             event.consume(true);
2856             return;
2857         }
2858         WebInspector.TextPrompt.prototype.onMouseWheel.call(this, event);
2859     },
2860
2861     /**
2862      * @override
2863      * @return {boolean}
2864      */
2865     tabKeyPressed: function()
2866     {
2867         this.acceptAutoComplete();
2868
2869         // Always tab to the next field.
2870         return false;
2871     },
2872
2873     /**
2874      * @param {!Event} event
2875      * @return {boolean}
2876      */
2877     _handleNameOrValueUpDown: function(event)
2878     {
2879         /**
2880          * @param {string} originalValue
2881          * @param {string} replacementString
2882          * @this {WebInspector.StylesSidebarPane.CSSPropertyPrompt}
2883          */
2884         function finishHandler(originalValue, replacementString)
2885         {
2886             // Synthesize property text disregarding any comments, custom whitespace etc.
2887             this._treeElement.applyStyleText(this._treeElement.nameElement.textContent + ": " + this._treeElement.valueElement.textContent, false);
2888         }
2889
2890         /**
2891          * @param {string} prefix
2892          * @param {number} number
2893          * @param {string} suffix
2894          * @return {string}
2895          * @this {WebInspector.StylesSidebarPane.CSSPropertyPrompt}
2896          */
2897         function customNumberHandler(prefix, number, suffix)
2898         {
2899             if (number !== 0 && !suffix.length && WebInspector.CSSMetadata.isLengthProperty(this._treeElement.property.name))
2900                 suffix = "px";
2901             return prefix + number + suffix;
2902         }
2903
2904         // Handle numeric value increment/decrement only at this point.
2905         if (!this._isEditingName && WebInspector.handleElementValueModifications(event, this._treeElement.valueElement, finishHandler.bind(this), this._isValueSuggestion.bind(this), customNumberHandler.bind(this)))
2906             return true;
2907
2908         return false;
2909     },
2910
2911     /**
2912      * @param {string} word
2913      * @return {boolean}
2914      */
2915     _isValueSuggestion: function(word)
2916     {
2917         if (!word)
2918             return false;
2919         word = word.toLowerCase();
2920         return this._cssCompletions.keySet().hasOwnProperty(word);
2921     },
2922
2923     /**
2924      * @param {!Element} proxyElement
2925      * @param {!Range} wordRange
2926      * @param {boolean} force
2927      * @param {function(!Array.<string>, number=)} completionsReadyCallback
2928      */
2929     _buildPropertyCompletions: function(proxyElement, wordRange, force, completionsReadyCallback)
2930     {
2931         var prefix = wordRange.toString().toLowerCase();
2932         if (!prefix && !force && (this._isEditingName || proxyElement.textContent.length)) {
2933             completionsReadyCallback([]);
2934             return;
2935         }
2936
2937         var results = this._cssCompletions.startsWith(prefix);
2938         if (!this._isEditingName && !results.length && prefix.length > 1 && "!important".startsWith(prefix))
2939             results.push("!important");
2940         var userEnteredText = wordRange.toString().replace("-", "");
2941         if (userEnteredText && (userEnteredText === userEnteredText.toUpperCase())) {
2942             for (var i = 0; i < results.length; ++i)
2943                 results[i] = results[i].toUpperCase();
2944         }
2945         var selectedIndex = this._cssCompletions.mostUsedOf(results);
2946         completionsReadyCallback(results, selectedIndex);
2947     },
2948
2949     __proto__: WebInspector.TextPrompt.prototype
2950 }
2951
2952 /**
2953  * @constructor
2954  * @param {?WebInspector.CSSRule} rule
2955  * @param {?WebInspector.DOMNode} node
2956  * @param {string} name
2957  * @param {string} value
2958  */
2959 WebInspector.StylesSidebarPropertyRenderer = function(rule, node, name, value)
2960 {
2961     this._rule = rule;
2962     this._node = node;
2963     this._propertyName = name;
2964     this._propertyValue = value;
2965 }
2966
2967 WebInspector.StylesSidebarPropertyRenderer._colorRegex = /((?:rgb|hsl)a?\([^)]+\)|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3}|\b\w+\b(?!-))/g;
2968 WebInspector.StylesSidebarPropertyRenderer._bezierRegex = /((cubic-bezier\([^)]+\))|\b(linear|ease-in-out|ease-in|ease-out|ease)\b)/g;
2969
2970 /**
2971  * @param {string} value
2972  * @return {!RegExp}
2973  */
2974 WebInspector.StylesSidebarPropertyRenderer._urlRegex = function(value)
2975 {
2976     // Heuristically choose between single-quoted, double-quoted or plain URL regex.
2977     if (/url\(\s*'.*\s*'\s*\)/.test(value))
2978         return /url\(\s*('.+')\s*\)/g;
2979     if (/url\(\s*".*\s*"\s*\)/.test(value))
2980         return /url\(\s*(".+")\s*\)/g;
2981     return /url\(\s*([^)]+)\s*\)/g;
2982 }
2983
2984 WebInspector.StylesSidebarPropertyRenderer.prototype = {
2985     /**
2986      * @param {function(string):!Node} handler
2987      */
2988     setColorHandler: function(handler)
2989     {
2990         this._colorHandler = handler;
2991     },
2992
2993     /**
2994      * @param {function(string):!Node} handler
2995      */
2996     setBezierHandler: function(handler)
2997     {
2998         this._bezierHandler = handler;
2999     },
3000
3001     /**
3002      * @return {!Element}
3003      */
3004     renderName: function()
3005     {
3006         var nameElement = createElement("span");
3007         nameElement.className = "webkit-css-property";
3008         nameElement.textContent = this._propertyName;
3009         nameElement.normalize();
3010         return nameElement;
3011     },
3012
3013     /**
3014      * @return {!Element}
3015      */
3016     renderValue: function()
3017     {
3018         var valueElement = createElement("span");
3019         valueElement.className = "value";
3020
3021         if (!this._propertyValue)
3022             return valueElement;
3023
3024         var formatter = new WebInspector.StringFormatter();
3025         formatter.addProcessor(WebInspector.StylesSidebarPropertyRenderer._urlRegex(this._propertyValue), this._processURL.bind(this));
3026         if (this._bezierHandler && WebInspector.CSSMetadata.isBezierAwareProperty(this._propertyName))
3027             formatter.addProcessor(WebInspector.StylesSidebarPropertyRenderer._bezierRegex, this._bezierHandler);
3028         if (this._colorHandler && WebInspector.CSSMetadata.isColorAwareProperty(this._propertyName))
3029             formatter.addProcessor(WebInspector.StylesSidebarPropertyRenderer._colorRegex, this._colorHandler);
3030
3031         valueElement.appendChild(formatter.formatText(this._propertyValue));
3032         valueElement.normalize();
3033         return valueElement;
3034     },
3035
3036     /**
3037      * @param {string} url
3038      * @return {!Node}
3039      */
3040     _processURL: function(url)
3041     {
3042         var hrefUrl = url;
3043         var match = hrefUrl.match(/['"]?([^'"]+)/);
3044         if (match)
3045             hrefUrl = match[1];
3046         var container = createDocumentFragment();
3047         container.createTextChild("url(");
3048         if (this._rule && this._rule.resourceURL())
3049             hrefUrl = WebInspector.ParsedURL.completeURL(this._rule.resourceURL(), hrefUrl);
3050         else if (this._node)
3051             hrefUrl = this._node.resolveURL(hrefUrl);
3052         var hasResource = hrefUrl && !!WebInspector.resourceForURL(hrefUrl);
3053         // FIXME: WebInspector.linkifyURLAsNode() should really use baseURI.
3054         container.appendChild(WebInspector.linkifyURLAsNode(hrefUrl || url, url, undefined, !hasResource));
3055         container.createTextChild(")");
3056         return container;
3057     }
3058 }
3059
3060 /**
3061  * @constructor
3062  * @extends {WebInspector.Widget}
3063  * @param {!WebInspector.ToolbarItem} toolbarItem
3064  */
3065 WebInspector.StylesSidebarPane.BaseToolbarPaneWidget = function(toolbarItem)
3066 {
3067     WebInspector.Widget.call(this);
3068     this._toolbarItem = toolbarItem;
3069     WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, this._nodeChanged, this);
3070 }
3071
3072 WebInspector.StylesSidebarPane.BaseToolbarPaneWidget.prototype = {
3073     _nodeChanged: function()
3074     {
3075         if (!this.isShowing())
3076             return;
3077
3078         var elementNode = WebInspector.SharedSidebarModel.elementNode(WebInspector.context.flavor(WebInspector.DOMNode));
3079         this.onNodeChanged(elementNode);
3080     },
3081
3082     /**
3083      * @param {?WebInspector.DOMNode} newNode
3084      * @protected
3085      */
3086     onNodeChanged: function(newNode)
3087     {
3088     },
3089
3090     /**
3091      * @override
3092      */
3093     willHide: function()
3094     {
3095         this._toolbarItem.setToggled(false);
3096     },
3097
3098     /**
3099      * @override
3100      */
3101     wasShown: function()
3102     {
3103         this._toolbarItem.setToggled(true);
3104         this._nodeChanged();
3105     },
3106
3107     __proto__: WebInspector.Widget.prototype
3108 }
3109
3110 /**
3111  * @constructor
3112  * @implements {WebInspector.ToolbarItem.Provider}
3113  */
3114 WebInspector.StylesSidebarPane.AddNewRuleButtonProvider = function()
3115 {
3116     this._button = new WebInspector.ToolbarButton(WebInspector.UIString("New Style Rule"), "add-toolbar-item");
3117     this._button.makeLongClickEnabled();
3118     var stylesSidebarPane = WebInspector.ElementsPanel.instance().sidebarPanes.styles;
3119     this._button.addEventListener("click", stylesSidebarPane._createNewRuleInViaInspectorStyleSheet, stylesSidebarPane);
3120     this._button.addEventListener("longClickDown", stylesSidebarPane._onAddButtonLongClick, stylesSidebarPane);
3121     WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, this._onNodeChanged, this);
3122     this._onNodeChanged()
3123 }
3124
3125 WebInspector.StylesSidebarPane.AddNewRuleButtonProvider.prototype = {
3126     _onNodeChanged: function()
3127     {
3128         var node = WebInspector.context.flavor(WebInspector.DOMNode);
3129         this.item().setEnabled(!!node);
3130     },
3131
3132     /**
3133      * @override
3134      * @return {?WebInspector.ToolbarItem}
3135      */
3136     item: function()
3137     {
3138         return this._button;
3139     }
3140 }