d0c4a84b13ca24f9bfc5492201cf5623f9dc5ee4
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / CSSStyleDeclarationSection.js
1 /*
2  * Copyright (C) 2013, 2015 Apple Inc. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
23  * THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 WebInspector.CSSStyleDeclarationSection = class CSSStyleDeclarationSection extends WebInspector.Object
27 {
28     constructor(delegate, style)
29     {
30         console.assert(style instanceof WebInspector.CSSStyleDeclaration, style);
31
32         super();
33
34         this._delegate = delegate || null;
35
36         this._style = style || null;
37         this._selectorElements = [];
38         this._ruleDisabled = false;
39         this._hasInvalidSelector = false;
40
41         this._element = document.createElement("div");
42         this._element.classList.add("style-declaration-section");
43
44         new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl, "S", this._save.bind(this), this._element);
45         new WebInspector.KeyboardShortcut(WebInspector.KeyboardShortcut.Modifier.CommandOrControl | WebInspector.KeyboardShortcut.Modifier.Shift, "S", this._save.bind(this), this._element);
46
47         this._headerElement = document.createElement("div");
48         this._headerElement.classList.add("header");
49
50         if (!style.editable) {
51             let lockedIconElement = this._headerElement.createChild("img", "locked-icon");
52
53             let styleLabel;
54             if (style.ownerRule && style.ownerRule.type === WebInspector.CSSStyleSheet.Type.UserAgent)
55                 styleLabel = WebInspector.UIString("User Agent Stylesheet");
56             else
57                 styleLabel = WebInspector.UIString("Style rule");
58
59             lockedIconElement.title = WebInspector.UIString("%s cannot be modified").format(styleLabel);
60         }
61
62         this._iconElement = this._headerElement.createChild("img", "icon");
63
64         if (this.selectorEditable) {
65             this._selectorInput = this._headerElement.createChild("textarea");
66             this._selectorInput.spellcheck = false;
67             this._selectorInput.dir = "ltr";
68             this._selectorInput.tabIndex = -1;
69             this._selectorInput.addEventListener("mouseover", this._handleMouseOver.bind(this));
70             this._selectorInput.addEventListener("mousemove", this._handleMouseMove.bind(this));
71             this._selectorInput.addEventListener("mouseout", this._handleMouseOut.bind(this));
72             this._selectorInput.addEventListener("keydown", this._handleKeyDown.bind(this));
73             this._selectorInput.addEventListener("keypress", this._handleKeyPress.bind(this));
74             this._selectorInput.addEventListener("input", this._handleInput.bind(this));
75             this._selectorInput.addEventListener("paste", this._handleSelectorPaste.bind(this));
76             this._selectorInput.addEventListener("blur", this._handleBlur.bind(this));
77         }
78
79         this._selectorElement = this._headerElement.createChild("span", "selector");
80         if (!this.selectorEditable) {
81             this._selectorElement.addEventListener("mouseover", this._handleMouseOver.bind(this));
82             this._selectorElement.addEventListener("mouseout", this._handleMouseOut.bind(this));
83         }
84
85         this._originElement = this._headerElement.createChild("span", "origin");
86
87         this._propertiesElement = document.createElement("div");
88         this._propertiesElement.classList.add("properties");
89
90         this._editorActive = false;
91         this._propertiesTextEditor = new WebInspector.CSSStyleDeclarationTextEditor(this, style);
92         this._propertiesTextEditor.addEventListener(WebInspector.CSSStyleDeclarationTextEditor.Event.ContentChanged, this._editorContentChanged.bind(this));
93         this._propertiesTextEditor.addEventListener(WebInspector.CSSStyleDeclarationTextEditor.Event.Blurred, this._editorBlurred.bind(this));
94         this._propertiesElement.appendChild(this._propertiesTextEditor.element);
95
96         this._element.appendChild(this._headerElement);
97         this._element.appendChild(this._propertiesElement);
98
99         let iconClassName = null;
100         switch (style.type) {
101         case WebInspector.CSSStyleDeclaration.Type.Rule:
102             console.assert(style.ownerRule);
103
104             if (style.inherited)
105                 iconClassName = WebInspector.CSSStyleDeclarationSection.InheritedStyleRuleIconStyleClassName;
106             else if (style.ownerRule.type === WebInspector.CSSStyleSheet.Type.Author)
107                 iconClassName = WebInspector.CSSStyleDeclarationSection.AuthorStyleRuleIconStyleClassName;
108             else if (style.ownerRule.type === WebInspector.CSSStyleSheet.Type.User)
109                 iconClassName = WebInspector.CSSStyleDeclarationSection.UserStyleRuleIconStyleClassName;
110             else if (style.ownerRule.type === WebInspector.CSSStyleSheet.Type.UserAgent)
111                 iconClassName = WebInspector.CSSStyleDeclarationSection.UserAgentStyleRuleIconStyleClassName;
112             else if (style.ownerRule.type === WebInspector.CSSStyleSheet.Type.Inspector)
113                 iconClassName = WebInspector.CSSStyleDeclarationSection.InspectorStyleRuleIconStyleClassName;
114             break;
115
116         case WebInspector.CSSStyleDeclaration.Type.Inline:
117         case WebInspector.CSSStyleDeclaration.Type.Attribute:
118             if (style.inherited)
119                 iconClassName = WebInspector.CSSStyleDeclarationSection.InheritedElementStyleRuleIconStyleClassName;
120             else
121                 iconClassName = WebInspector.DOMTreeElementPathComponent.DOMElementIconStyleClassName;
122             break;
123         }
124
125         if (style.editable) {
126             this._iconElement.classList.add("toggle-able");
127             this._iconElement.title = WebInspector.UIString("Comment All Properties");
128             this._iconElement.addEventListener("click", this._handleIconElementClicked.bind(this));
129         }
130
131         console.assert(iconClassName);
132         this._element.classList.add(iconClassName);
133
134         if (!style.editable)
135             this._element.classList.add(WebInspector.CSSStyleDeclarationSection.LockedStyleClassName);
136         else if (style.ownerRule)
137             this._style.ownerRule.addEventListener(WebInspector.CSSRule.Event.SelectorChanged, this._updateSelectorIcon.bind(this));
138         else
139             this._element.classList.add(WebInspector.CSSStyleDeclarationSection.SelectorLockedStyleClassName);
140
141         this.refresh();
142
143         this._headerElement.addEventListener("contextmenu", this._handleContextMenuEvent.bind(this));
144     }
145
146     // Public
147
148     get element()
149     {
150         return this._element;
151     }
152
153     get style()
154     {
155         return this._style;
156     }
157
158     get lastInGroup()
159     {
160         return this._element.classList.contains(WebInspector.CSSStyleDeclarationSection.LastInGroupStyleClassName);
161     }
162
163     set lastInGroup(last)
164     {
165         if (last)
166             this._element.classList.add(WebInspector.CSSStyleDeclarationSection.LastInGroupStyleClassName);
167         else
168             this._element.classList.remove(WebInspector.CSSStyleDeclarationSection.LastInGroupStyleClassName);
169     }
170
171     get focused()
172     {
173         return this._propertiesTextEditor.focused;
174     }
175
176     focus()
177     {
178         this._propertiesTextEditor.focus();
179     }
180
181     refresh()
182     {
183         this._selectorElement.removeChildren();
184         this._originElement.removeChildren();
185         this._selectorElements = [];
186
187         this._originElement.append(` ${emDash} `);
188
189         function appendSelector(selector, matched)
190         {
191             console.assert(selector instanceof WebInspector.CSSSelector);
192
193             let selectorElement = document.createElement("span");
194             selectorElement.textContent = selector.text;
195
196             if (matched)
197                 selectorElement.classList.add(WebInspector.CSSStyleDeclarationSection.MatchedSelectorElementStyleClassName);
198
199             let specificity = selector.specificity;
200             if (specificity) {
201                 let tooltip = WebInspector.UIString("Specificity: (%d, %d, %d)").format(specificity[0], specificity[1], specificity[2]);
202                 if (selector.dynamic) {
203                     tooltip += "\n";
204                     if (this._style.inherited)
205                         tooltip += WebInspector.UIString("Dynamically calculated for the parent element");
206                     else
207                         tooltip += WebInspector.UIString("Dynamically calculated for the selected element");
208                 }
209                 selectorElement.title = tooltip;
210             } else if (selector.dynamic) {
211                 let tooltip = WebInspector.UIString("Specificity: No value for selected element");
212                 tooltip += "\n";
213                 tooltip += WebInspector.UIString("Dynamically calculated for the selected element and did not match");
214                 selectorElement.title = tooltip;
215             }
216
217             this._selectorElement.appendChild(selectorElement);
218             this._selectorElements.push(selectorElement);
219         }
220
221         function appendSelectorTextKnownToMatch(selectorText)
222         {
223             let selectorElement = document.createElement("span");
224             selectorElement.textContent = selectorText;
225             selectorElement.classList.add(WebInspector.CSSStyleDeclarationSection.MatchedSelectorElementStyleClassName);
226             this._selectorElement.appendChild(selectorElement);
227         }
228
229         switch (this._style.type) {
230         case WebInspector.CSSStyleDeclaration.Type.Rule:
231             console.assert(this._style.ownerRule);
232
233             let selectors = this._style.ownerRule.selectors;
234             let matchedSelectorIndices = this._style.ownerRule.matchedSelectorIndices;
235             let alwaysMatch = !matchedSelectorIndices.length;
236             if (selectors.length) {
237                 let hasMatchingPseudoElementSelector = false;
238                 for (let i = 0; i < selectors.length; ++i) {
239                     appendSelector.call(this, selectors[i], alwaysMatch || matchedSelectorIndices.includes(i));
240                     if (i < selectors.length - 1)
241                         this._selectorElement.append(", ");
242
243                     if (matchedSelectorIndices.includes(i) && selectors[i].isPseudoElementSelector())
244                         hasMatchingPseudoElementSelector = true;
245                 }
246                 this._element.classList.toggle(WebInspector.CSSStyleDeclarationSection.PseudoElementSelectorStyleClassName, hasMatchingPseudoElementSelector);
247             } else
248                 appendSelectorTextKnownToMatch.call(this, this._style.ownerRule.selectorText);
249
250             if (this._style.ownerRule.sourceCodeLocation) {
251                 let options = {
252                     dontFloat: true,
253                     ignoreNetworkTab: true,
254                     ignoreSearchTab: true,
255                 };
256                 if (this._style.ownerStyleSheet.isInspectorStyleSheet()) {
257                     options.nameStyle = WebInspector.SourceCodeLocation.NameStyle.None;
258                     options.prefix = WebInspector.UIString("Inspector Style Sheet") + ":";
259                 }
260
261                 let sourceCodeLink = WebInspector.createSourceCodeLocationLink(this._style.ownerRule.sourceCodeLocation, options);
262                 this._originElement.appendChild(sourceCodeLink);
263             } else {
264                 let originString;
265                 switch (this._style.ownerRule.type) {
266                 case WebInspector.CSSStyleSheet.Type.Author:
267                     originString = WebInspector.UIString("Author Stylesheet");
268                     break;
269
270                 case WebInspector.CSSStyleSheet.Type.User:
271                     originString = WebInspector.UIString("User Stylesheet");
272                     break;
273
274                 case WebInspector.CSSStyleSheet.Type.UserAgent:
275                     originString = WebInspector.UIString("User Agent Stylesheet");
276                     break;
277
278                 case WebInspector.CSSStyleSheet.Type.Inspector:
279                     originString = WebInspector.UIString("Web Inspector");
280                     break;
281                 }
282
283                 console.assert(originString);
284                 if (originString)
285                     this._originElement.append(originString);
286             }
287
288             break;
289
290         case WebInspector.CSSStyleDeclaration.Type.Inline:
291             appendSelectorTextKnownToMatch.call(this, this._style.node.displayName);
292             this._originElement.append(WebInspector.UIString("Style Attribute"));
293             break;
294
295         case WebInspector.CSSStyleDeclaration.Type.Attribute:
296             appendSelectorTextKnownToMatch.call(this, this._style.node.displayName);
297             this._originElement.append(WebInspector.UIString("HTML Attributes"));
298             break;
299         }
300
301         this._updateSelectorIcon();
302         if (this._selectorInput)
303             this._selectorInput.value = this._selectorElement.textContent;
304     }
305
306     refreshEditor()
307     {
308         this._propertiesTextEditor.refresh();
309     }
310
311     highlightProperty(property)
312     {
313         if (this._propertiesTextEditor.highlightProperty(property)) {
314             this._element.scrollIntoView();
315             return true;
316         }
317
318         return false;
319     }
320
321     findMatchingPropertiesAndSelectors(needle)
322     {
323         this._element.classList.remove(WebInspector.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName, WebInspector.CSSStyleDetailsSidebarPanel.FilterMatchingSectionHasLabelClassName);
324
325         var hasMatchingSelector = false;
326
327         for (var selectorElement of this._selectorElements) {
328             selectorElement.classList.remove(WebInspector.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName);
329
330             if (needle && selectorElement.textContent.includes(needle)) {
331                 selectorElement.classList.add(WebInspector.CSSStyleDetailsSidebarPanel.FilterMatchSectionClassName);
332                 hasMatchingSelector = true;
333             }
334         }
335
336         if (!needle) {
337             this._propertiesTextEditor.resetFilteredProperties();
338             return false;
339         }
340
341         var hasMatchingProperty = this._propertiesTextEditor.findMatchingProperties(needle);
342
343         if (!hasMatchingProperty && !hasMatchingSelector) {
344             this._element.classList.add(WebInspector.CSSStyleDetailsSidebarPanel.NoFilterMatchInSectionClassName);
345             return false;
346         }
347
348         return true;
349     }
350
351     updateLayout()
352     {
353         this._propertiesTextEditor.updateLayout();
354     }
355
356     clearSelection()
357     {
358         this._propertiesTextEditor.clearSelection();
359     }
360
361     cssStyleDeclarationTextEditorFocused()
362     {
363         if (typeof this._delegate.cssStyleDeclarationSectionEditorFocused === "function")
364             this._delegate.cssStyleDeclarationSectionEditorFocused(this);
365     }
366
367     cssStyleDeclarationTextEditorSwitchRule(reverse)
368     {
369         if (!this._delegate)
370             return;
371
372         if (reverse && typeof this._delegate.cssStyleDeclarationSectionEditorPreviousRule === "function")
373             this._delegate.cssStyleDeclarationSectionEditorPreviousRule(this);
374         else if (!reverse && typeof this._delegate.cssStyleDeclarationSectionEditorNextRule === "function")
375             this._delegate.cssStyleDeclarationSectionEditorNextRule(this);
376     }
377
378     focusRuleSelector(reverse)
379     {
380         if (!this.selectorEditable && !this.locked) {
381             this.focus();
382             return;
383         }
384
385         if (this.locked) {
386             this.cssStyleDeclarationTextEditorSwitchRule(reverse);
387             return;
388         }
389
390         let selection = window.getSelection();
391         selection.removeAllRanges();
392
393         this._element.scrollIntoViewIfNeeded();
394
395         if (this._selectorInput) {
396             this._selectorInput.focus();
397             this._selectorInput.selectionStart = 0;
398             this._selectorInput.selectionEnd = this._selectorInput.value.length;
399         } else {
400             let range = document.createRange();
401             range.selectNodeContents(this._selectorElement);
402             selection.addRange(range);
403         }
404     }
405
406     selectLastProperty()
407     {
408         this._propertiesTextEditor.selectLastProperty();
409     }
410
411     get selectorEditable()
412     {
413         return !this.locked && this._style.ownerRule;
414     }
415
416     get locked()
417     {
418         return !this._style.editable;
419     }
420
421     get editorActive()
422     {
423         return this._editorActive;
424     }
425
426     // Private
427
428     get _currentSelectorText()
429     {
430         let selectorText = this.selectorEditable ? this._selectorInput.value : this._selectorElement.textContent;
431         if (!selectorText || !selectorText.length) {
432             if (!this._style.ownerRule)
433                 return "";
434
435             selectorText = this._style.ownerRule.selectorText;
436         }
437
438         return selectorText.trim();
439     }
440
441     _handleSelectorPaste(event)
442     {
443         if (this._style.type === WebInspector.CSSStyleDeclaration.Type.Inline || !this._style.ownerRule)
444             return;
445
446         if (!event || !event.clipboardData)
447             return;
448
449         let data = event.clipboardData.getData("text/plain");
450         if (!data)
451             return;
452
453         function parseTextForRule(text)
454         {
455             let containsBraces = /[\{\}]/;
456             if (!containsBraces.test(text))
457                 return [];
458
459             let match = text.match(/([^{]+){([\s\S]*)}/);
460             if (!match)
461                 return [];
462
463             // If the match "body" contains braces, parse that body as if it were a rule.
464             // This will usually happen if the user includes a media query in the copied text.
465             return containsBraces.test(match[2]) ? parseTextForRule(match[2]) : match;
466         }
467
468         let [selector, value] = parseTextForRule(data);
469         if (!selector || !value)
470             return;
471
472         this._style.nodeStyles.changeRule(this._style.ownerRule, selector.trim(), value);
473         event.preventDefault();
474     }
475
476     _handleContextMenuEvent(event)
477     {
478         if (window.getSelection().toString().length)
479             return;
480
481         let contextMenu = WebInspector.ContextMenu.createFromEvent(event);
482
483         contextMenu.appendItem(WebInspector.UIString("Copy Rule"), () => {
484             InspectorFrontendHost.copyText(this._style.generateCSSRuleString());
485         });
486
487         if (this._style.inherited)
488             return;
489
490         contextMenu.appendItem(WebInspector.UIString("Duplicate Selector"), () => {
491             if (this._delegate && typeof this._delegate.focusEmptySectionWithStyle === "function") {
492                 let existingRules = this._style.nodeStyles.rulesForSelector(this._currentSelectorText);
493                 for (let rule of existingRules) {
494                     if (this._delegate.focusEmptySectionWithStyle(rule.style))
495                         return;
496                 }
497             }
498
499             this._style.nodeStyles.addRule(this._currentSelectorText);
500         });
501
502         // Only used one colon temporarily since single-colon pseudo elements are valid CSS.
503         if (WebInspector.CSSStyleManager.PseudoElementNames.some((className) => this._style.selectorText.includes(":" + className)))
504             return;
505
506         if (WebInspector.CSSStyleManager.ForceablePseudoClasses.every((className) => !this._style.selectorText.includes(":" + className))) {
507             contextMenu.appendSeparator();
508
509             for (let pseudoClass of WebInspector.CSSStyleManager.ForceablePseudoClasses) {
510                 if (pseudoClass === "visited" && this._style.node.nodeName() !== "A")
511                     continue;
512
513                 let pseudoClassSelector = ":" + pseudoClass;
514
515                 contextMenu.appendItem(WebInspector.UIString("Add %s Rule").format(pseudoClassSelector), () => {
516                     this._style.node.setPseudoClassEnabled(pseudoClass, true);
517
518                     let selector;
519                     if (this._style.ownerRule)
520                         selector = this._style.ownerRule.selectors.map((selector) => selector.text + pseudoClassSelector).join(", ");
521                     else
522                         selector = this._currentSelectorText + pseudoClassSelector;
523
524                     this._style.nodeStyles.addRule(selector);
525                 });
526             }
527         }
528
529         contextMenu.appendSeparator();
530
531         for (let pseudoElement of WebInspector.CSSStyleManager.PseudoElementNames) {
532             let pseudoElementSelector = "::" + pseudoElement;
533             const styleText = "content: \"\";";
534
535             let existingSection = null;
536             if (this._delegate && typeof this._delegate.sectionForStyle === "function") {
537                 let existingRules = this._style.nodeStyles.rulesForSelector(this._currentSelectorText + pseudoElementSelector);
538                 if (existingRules.length) {
539                     // There shouldn't really ever be more than one pseudo-element rule
540                     // that is not in a media query. As such, just focus the first rule
541                     // on the assumption that it is the only one necessary.
542                     existingSection = this._delegate.sectionForStyle(existingRules[0].style);
543                 }
544             }
545
546             let title = existingSection ? WebInspector.UIString("Focus %s Rule") : WebInspector.UIString("Create %s Rule");
547             contextMenu.appendItem(title.format(pseudoElementSelector), () => {
548                 if (existingSection) {
549                     existingSection.focus();
550                     return;
551                 }
552
553                 let selector;
554                 if (this._style.ownerRule)
555                     selector = this._style.ownerRule.selectors.map((selector) => selector.text + pseudoElementSelector).join(", ");
556                 else
557                     selector = this._currentSelectorText + pseudoElementSelector;
558
559                 this._style.nodeStyles.addRule(selector, styleText);
560             });
561         }
562     }
563
564     _handleIconElementClicked()
565     {
566         if (this._hasInvalidSelector) {
567             // This will revert the selector text to the original valid value.
568             this.refresh();
569             return;
570         }
571
572         this._ruleDisabled = this._ruleDisabled ? !this._propertiesTextEditor.uncommentAllProperties() : this._propertiesTextEditor.commentAllProperties();
573         this._iconElement.title = this._ruleDisabled ? WebInspector.UIString("Uncomment All Properties") : WebInspector.UIString("Comment All Properties");
574         this._element.classList.toggle("rule-disabled", this._ruleDisabled);
575     }
576
577     _highlightNodesWithSelector()
578     {
579         if (!this._style.ownerRule) {
580             WebInspector.domTreeManager.highlightDOMNode(this._style.node.id);
581             return;
582         }
583
584         WebInspector.domTreeManager.highlightSelector(this._currentSelectorText, this._style.node.ownerDocument.frameIdentifier);
585     }
586
587     _hideDOMNodeHighlight()
588     {
589         WebInspector.domTreeManager.hideDOMNodeHighlight();
590     }
591
592     _handleMouseOver(event)
593     {
594         this._highlightNodesWithSelector();
595     }
596
597     _handleMouseMove(event)
598     {
599         if (this._hasInvalidSelector)
600             return;
601
602         // Attempts to find a selector element under the mouse so that the title (which contains the
603         // specificity information) can be applied to _selectorInput, which will then display the
604         // title if the user hovers long enough.
605         for (let element of this._selectorElements) {
606             let {top, right, bottom, left} = element.getBoundingClientRect();
607             if (event.clientX >= left && event.clientX <= right && event.clientY >= top && event.clientY <= bottom) {
608                 this._selectorInput.title = element.title;
609                 return;
610             }
611         }
612
613         this._selectorInput.title = "";
614     }
615
616     _handleMouseOut(event)
617     {
618         this._hideDOMNodeHighlight();
619     }
620
621     _save(event)
622     {
623         event.preventDefault();
624         event.stopPropagation();
625
626         if (this._style.type !== WebInspector.CSSStyleDeclaration.Type.Rule) {
627             // FIXME: Can't save CSS inside <style></style> <https://webkit.org/b/150357>
628             InspectorFrontendHost.beep();
629             return;
630         }
631
632         console.assert(this._style.ownerRule instanceof WebInspector.CSSRule);
633         console.assert(this._style.ownerRule.sourceCodeLocation instanceof WebInspector.SourceCodeLocation);
634
635         let sourceCode = this._style.ownerRule.sourceCodeLocation.sourceCode;
636         if (sourceCode.type !== WebInspector.Resource.Type.Stylesheet) {
637             // FIXME: Can't save CSS inside style="" <https://webkit.org/b/150357>
638             InspectorFrontendHost.beep();
639             return;
640         }
641
642         var url;
643         if (sourceCode.urlComponents.scheme === "data") {
644             let mainResource = WebInspector.frameResourceManager.mainFrame.mainResource;
645             let pathDirectory = mainResource.url.slice(0, -mainResource.urlComponents.lastPathComponent.length);
646             url = pathDirectory + "base64.css";
647         } else
648             url = sourceCode.url;
649
650         const saveAs = event.shiftKey;
651         WebInspector.saveDataToFile({url: url, content: sourceCode.content}, saveAs);
652     }
653
654     _handleKeyDown(event)
655     {
656         if (event.keyCode === WebInspector.KeyboardShortcut.Key.Enter.keyCode) {
657             event.preventDefault();
658             this.focus();
659             return;
660         }
661
662         if (event.keyCode !== WebInspector.KeyboardShortcut.Key.Tab.keyCode) {
663             this._highlightNodesWithSelector();
664             return;
665         }
666
667         if (event.shiftKey && this._delegate && typeof this._delegate.cssStyleDeclarationSectionEditorPreviousRule === "function") {
668             event.preventDefault();
669             this._delegate.cssStyleDeclarationSectionEditorPreviousRule(this, true);
670             return;
671         }
672
673         if (!event.metaKey) {
674             event.preventDefault();
675             this.focus();
676             this._propertiesTextEditor.selectFirstProperty();
677             return;
678         }
679     }
680
681     _handleKeyPress(event)
682     {
683         if (!event.altGraphKey && !event.altKey && !event.ctrlKey && !event.metaKey) {
684             // Ensures that <textarea> does not scroll with added characters.  Since a
685             // <textarea> does not expand to fit its content, appending the pressed character to the
686             // end of the original (non-editable) selector element will ensure that the <textarea>
687             // will be large enough to fit the selector without scrolling.
688             this._selectorElement.append(String.fromCharCode(event.keyCode));
689         }
690     }
691
692     _handleInput(event)
693     {
694         this._selectorElement.textContent = this._selectorInput.value;
695
696         this._highlightNodesWithSelector();
697     }
698
699     _handleBlur(event)
700     {
701         this._hideDOMNodeHighlight();
702
703         let newSelectorText = this._currentSelectorText.trim();
704         if (!newSelectorText) {
705             // Revert to the current selector (by doing a refresh) since the new selector is empty.
706             this.refresh();
707             return;
708         }
709
710         if (event.relatedTarget && event.relatedTarget.isDescendant(this.element)) {
711             this._editorActive = true;
712             this.focus();
713         }
714
715         this._style.ownerRule.selectorText = newSelectorText;
716     }
717
718     _updateSelectorIcon(event)
719     {
720         if (!this._style.ownerRule || !this._style.editable)
721             return;
722
723         this._hasInvalidSelector = event && event.data && !event.data.valid;
724         this._element.classList.toggle("invalid-selector", !!this._hasInvalidSelector);
725         if (this._hasInvalidSelector) {
726             this._iconElement.title = WebInspector.UIString("The selector ā€œ%sā€ is invalid.\nClick to revert to the previous selector.").format(this._selectorElement.textContent.trim());
727             this._selectorInput.title = WebInspector.UIString("Using previous selector ā€œ%sā€").format(this._style.ownerRule.selectorText);
728             return;
729         }
730
731         this._iconElement.title = this._ruleDisabled ? WebInspector.UIString("Uncomment All Properties") : WebInspector.UIString("Comment All Properties");
732         this._selectorInput.title = "";
733     }
734
735     _editorContentChanged(event)
736     {
737         this._editorActive = true;
738     }
739
740     _editorBlurred(event)
741     {
742         this._editorActive = false;
743         this.dispatchEventToListeners(WebInspector.CSSStyleDeclarationSection.Event.Blurred);
744     }
745 };
746
747 WebInspector.CSSStyleDeclarationSection.Event = {
748     Blurred: "css-style-declaration-sections-blurred"
749 };
750
751 WebInspector.CSSStyleDeclarationSection.LockedStyleClassName = "locked";
752 WebInspector.CSSStyleDeclarationSection.SelectorLockedStyleClassName = "selector-locked";
753 WebInspector.CSSStyleDeclarationSection.LastInGroupStyleClassName = "last-in-group";
754 WebInspector.CSSStyleDeclarationSection.MatchedSelectorElementStyleClassName = "matched";
755 WebInspector.CSSStyleDeclarationSection.PseudoElementSelectorStyleClassName = "pseudo-element-selector";
756
757 WebInspector.CSSStyleDeclarationSection.AuthorStyleRuleIconStyleClassName = "author-style-rule-icon";
758 WebInspector.CSSStyleDeclarationSection.UserStyleRuleIconStyleClassName = "user-style-rule-icon";
759 WebInspector.CSSStyleDeclarationSection.UserAgentStyleRuleIconStyleClassName = "user-agent-style-rule-icon";
760 WebInspector.CSSStyleDeclarationSection.InspectorStyleRuleIconStyleClassName = "inspector-style-rule-icon";
761 WebInspector.CSSStyleDeclarationSection.InheritedStyleRuleIconStyleClassName = "inherited-style-rule-icon";
762 WebInspector.CSSStyleDeclarationSection.InheritedElementStyleRuleIconStyleClassName = "inherited-element-style-rule-icon";