DevTools: Remove @unrestricted from StylesSidebarPane.js

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

 /*
  * Copyright (C) 2007 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Joseph Pecoraro
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
  * 2.  Redistributions in binary form must reproduce the above copyright
  *     notice, this list of conditions and the following disclaimer in the
  *     documentation and/or other materials provided with the distribution.
  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
  *     its contributors may be used to endorse or promote products derived
  *     from this software without specific prior written permission.
  *
  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-/**
- * @unrestricted
- */
 Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane {
   constructor() {
     super();
     this.setMinimumSize(96, 26);
 
     Common.moduleSetting('colorFormat').addChangeListener(this.update.bind(this));
     Common.moduleSetting('textEditorIndent').addChangeListener(this.update.bind(this));
 
     this._sectionsContainer = this.element.createChild('div');
     this._swatchPopoverHelper = new InlineEditor.SwatchPopoverHelper();
     this._linkifier = new Components.Linkifier(Elements.StylesSidebarPane._maxLinkLength, /* useLinkDecorator */ true);
+    /** @type {?Elements.StylePropertyHighlighter} */
+    this._decorator = null;
+    this._userOperation = false;
+    this._isEditingStyle = false;
+    /** @type {?RegExp} */
+    this._filterRegex = null;
+
+    /** @type {?Elements.StylePropertyTreeElement} */
+    this._mouseDownTreeElement = null;
+    this._mouseDownTreeElementIsName = false;
+    this._mouseDownTreeElementIsValue = false;
 
     this.element.classList.add('styles-pane');
 
     /** @type {!Array<!Elements.SectionBlock>} */
     this._sectionBlocks = [];
     Elements.StylesSidebarPane._instance = this;
     UI.context.addFlavorChangeListener(SDK.DOMNode, this.forceUpdate, this);
   }
 
   /**
@@ skipping 288 matching lines @@
       for (var section of block.sections)
         this._sectionsContainer.appendChild(section.element);
     }
 
     if (this._filterRegex)
       this._updateFilter();
 
     this._nodeStylesUpdatedForTest(node, true);
     if (this._decorator) {
       this._decorator.perform();
-      delete this._decorator;
+      this._decorator = null;
     }
   }
 
   /**
    * @param {!SDK.DOMNode} node
    * @param {boolean} rebuild
    */
   _nodeStylesUpdatedForTest(node, rebuild) {
     // For sniffing in tests.
   }
@@ skipping 25 matching lines @@
     if (!cssModel || !node)
       return;
     this._userOperation = true;
     cssModel.requestViaInspectorStylesheet(node, onViaInspectorStyleSheet.bind(this));
 
     /**
      * @param {?SDK.CSSStyleSheetHeader} styleSheetHeader
      * @this {Elements.StylesSidebarPane}
      */
     function onViaInspectorStyleSheet(styleSheetHeader) {
-      delete this._userOperation;
+      this._userOperation = false;
       this._createNewRuleInStyleSheet(styleSheetHeader);
     }
   }
 
   /**
    * @param {?SDK.CSSStyleSheetHeader} styleSheetHeader
    */
   _createNewRuleInStyleSheet(styleSheetHeader) {
     if (!styleSheetHeader)
       return;
@@ skipping 73 matching lines @@
   allSections() {
     var sections = [];
     for (var block of this._sectionBlocks)
       sections = sections.concat(block.sections);
     return sections;
   }
 };
 
 Elements.StylesSidebarPane._maxLinkLength = 30;
 
-/**
- * @unrestricted
- */
 Elements.SectionBlock = class {
   /**
    * @param {?Element} titleElement
    */
   constructor(titleElement) {
     this._titleElement = titleElement;
     this.sections = [];
   }
 
   /**
@@ skipping 40 matching lines @@
   }
 
   /**
    * @return {?Element}
    */
   titleElement() {
     return this._titleElement;
   }
 };
 
-
-/**
- * @unrestricted
- */
 Elements.StylePropertiesSection = class {
   /**
    * @param {!Elements.StylesSidebarPane} parentPane
    * @param {!SDK.CSSMatchedStyles} matchedStyles
    * @param {!SDK.CSSStyleDeclaration} style
    */
   constructor(parentPane, matchedStyles, style) {
     this._parentPane = parentPane;
     this._style = style;
     this._matchedStyles = matchedStyles;
     this.editable = !!(style.styleSheetId && style.range);
+    /** @type {?number} */
+    this._hoverTimer = null;
+    /** @type {?function(!Elements.StylePropertiesSection)} */
+    this._afterUpdate = null;
+    this._willCauseCancelEditing = false;
 
     var rule = style.parentRule;
     this.element = createElementWithClass('div', 'styles-section matched-styles monospace');
     this.element._section = this;
 
     this._titleElement = this.element.createChild('div', 'styles-section-title ' + (rule ? 'styles-selector' : ''));
 
     this.propertiesTreeOutline = new UI.TreeOutlineInShadow();
     this.propertiesTreeOutline.registerRequiredCSS('elements/stylesSectionTree.css');
     this.propertiesTreeOutline.element.classList.add('style-properties', 'matched-styles', 'monospace');
@@ skipping 470 matching lines @@
         child.setOverloaded(this._isPropertyOverloaded(child.property));
         child = child.traverseNextTreeElement(false, null, true);
       }
     }
     this.afterUpdate();
   }
 
   afterUpdate() {
     if (this._afterUpdate) {
       this._afterUpdate(this);
-      delete this._afterUpdate;
+      this._afterUpdate = null;
       this._afterUpdateFinishedForTest();
     }
   }
 
   _afterUpdateFinishedForTest() {
   }
 
   onpopulate() {
     var style = this._style;
     for (var property of style.leadingProperties()) {
@@ skipping 112 matching lines @@
       var selectorMatchesFilter = !!regex && regex.test(selectors[i].textContent);
       selectors[i].classList.toggle('filter-match', selectorMatchesFilter);
     }
   }
 
   /**
    * @return {boolean}
    */
   _checkWillCancelEditing() {
     var willCauseCancelEditing = this._willCauseCancelEditing;
-    delete this._willCauseCancelEditing;
+    this._willCauseCancelEditing = false;
     return willCauseCancelEditing;
   }
 
   /**
    * @param {!Event} event
    */
   _handleSelectorContainerClick(event) {
     if (this._checkWillCancelEditing() || !this.editable)
       return;
     if (event.target === this._selectorContainer) {
@@ skipping 136 matching lines @@
 
     /**
      * @param {boolean} success
      * @this {Elements.StylePropertiesSection}
      */
     function userCallback(success) {
       if (success) {
         this._matchedStyles.resetActiveProperties();
         this._parentPane._refreshUpdate(this);
       }
-      delete this._parentPane._userOperation;
+      this._parentPane._userOperation = false;
       this._editingMediaTextCommittedForTest();
     }
 
     // This gets deleted in finishOperation(), which is called both on success and failure.
     this._parentPane._userOperation = true;
     this._parentPane.cssModel().setMediaText(media.styleSheetId, media.range, newContent).then(userCallback.bind(this));
   }
 
   _editingMediaTextCommittedForTest() {
   }
@@ skipping 106 matching lines @@
       return;
     }
     var rule = this._style.parentRule;
     if (!rule)
       return;
 
     /**
      * @this {Elements.StylePropertiesSection}
      */
     function headerTextCommitted() {
-      delete this._parentPane._userOperation;
+      this._parentPane._userOperation = false;
       this._moveEditorFromSelector(moveDirection);
       this._editingSelectorCommittedForTest();
     }
 
     // This gets deleted in finishOperationAndMoveEditor(), which is called both on success and failure.
     this._parentPane._userOperation = true;
     this._setHeaderText(rule, newContent).then(headerTextCommitted.bind(this));
   }
 
   /**
@@ skipping 48 matching lines @@
 
   editingSelectorCancelled() {
     this._editingSelectorEnded();
 
     // Mark the selectors in group if necessary.
     // This is overridden by BlankStylePropertiesSection.
     this._markSelectorMatches();
   }
 };
 
-
-/**
- * @unrestricted
- */
 Elements.BlankStylePropertiesSection = class extends Elements.StylePropertiesSection {
   /**
    * @param {!Elements.StylesSidebarPane} stylesPane
    * @param {!SDK.CSSMatchedStyles} matchedStyles
    * @param {string} defaultSelectorText
    * @param {string} styleSheetId
    * @param {!Common.TextRange} ruleLocation
    * @param {!SDK.CSSStyleDeclaration} insertAfterStyle
    */
   constructor(stylesPane, matchedStyles, defaultSelectorText, styleSheetId, ruleLocation, insertAfterStyle) {
     var cssModel = /** @type {!SDK.CSSModel} */ (stylesPane.cssModel());
     var rule = SDK.CSSStyleRule.createDummyRule(cssModel, defaultSelectorText);
     super(stylesPane, matchedStyles, rule.style);
+    this._normal = false;
     this._ruleLocation = ruleLocation;
     this._styleSheetId = styleSheetId;
     this._selectorRefElement.removeChildren();
     this._selectorRefElement.appendChild(Elements.StylePropertiesSection._linkifyRuleLocation(
         cssModel, this._parentPane._linkifier, styleSheetId, this._actualRuleLocation()));
     if (insertAfterStyle && insertAfterStyle.parentRule)
       this._createMediaList(insertAfterStyle.parentRule.media);
     this.element.classList.add('blank-section');
   }
 
@@ skipping 31 matching lines @@
    */
   editingSelectorCommitted(element, newContent, oldContent, context, moveDirection) {
     if (!this.isBlank) {
       super.editingSelectorCommitted(element, newContent, oldContent, context, moveDirection);
       return;
     }
 
     /**
      * @param {?SDK.CSSStyleRule} newRule
      * @return {!Promise}
-     * @this {Elements.StylePropertiesSection}
+     * @this {Elements.BlankStylePropertiesSection}
      */
     function onRuleAdded(newRule) {
       if (!newRule) {
         this.editingSelectorCancelled();
         this._editingSelectorCommittedForTest();
         return Promise.resolve();
       }
       return this._matchedStyles.addNewRule(newRule, this._matchedStyles.node())
           .then(onAddedToCascade.bind(this, newRule));
     }
 
     /**
      * @param {!SDK.CSSStyleRule} newRule
-     * @this {Elements.StylePropertiesSection}
+     * @this {Elements.BlankStylePropertiesSection}
      */
     function onAddedToCascade(newRule) {
       var doesSelectorAffectSelectedNode = this._matchedStyles.matchingSelectors(newRule).length > 0;
       this._makeNormal(newRule);
 
       if (!doesSelectorAffectSelectedNode)
         this.propertiesTreeOutline.element.classList.add('no-affect');
 
       this._updateRuleOrigin();
       if (this.element.parentElement)  // Might have been detached already.
         this._moveEditorFromSelector(moveDirection);
 
-      delete this._parentPane._userOperation;
+      this._parentPane._userOperation = false;
       this._editingSelectorEnded();
       this._markSelectorMatches();
 
       this._editingSelectorCommittedForTest();
     }
 
     if (newContent)
       newContent = newContent.trim();
     this._parentPane._userOperation = true;
 
     var cssModel = this._parentPane.cssModel();
     var ruleText = this._rulePrefix() + newContent + ' {}';
     cssModel.addRule(this._styleSheetId, ruleText, this._ruleLocation).then(onRuleAdded.bind(this));
   }
 
   /**
    * @override
    */
   editingSelectorCancelled() {
-    delete this._parentPane._userOperation;
+    this._parentPane._userOperation = false;
     if (!this.isBlank) {
       super.editingSelectorCancelled();
       return;
     }
 
     this._editingSelectorEnded();
     this._parentPane.removeSection(this);
   }
 
   /**
    * @param {!SDK.CSSRule} newRule
    */
   _makeNormal(newRule) {
     this.element.classList.remove('blank-section');
     this._style = newRule.style;
     // FIXME: replace this instance by a normal Elements.StylePropertiesSection.
     this._normal = true;
   }
 };
 
-/**
- * @unrestricted
- */
 Elements.KeyframePropertiesSection = class extends Elements.StylePropertiesSection {
   /**
    * @param {!Elements.StylesSidebarPane} stylesPane
    * @param {!SDK.CSSMatchedStyles} matchedStyles
    * @param {!SDK.CSSStyleDeclaration} style
    */
   constructor(stylesPane, matchedStyles, style) {
     super(stylesPane, matchedStyles, style);
     this._selectorElement.className = 'keyframe-key';
   }
@@ skipping 61 matching lines @@
     this._selectorElement.textContent = this._style.parentRule.key().text;
   }
 
   /**
    * @override
    */
   _highlight() {
   }
 };
 
-/**
- * @unrestricted
- */
 Elements.StylePropertyTreeElement = class extends UI.TreeElement {
   /**
    * @param {!Elements.StylesSidebarPane} stylesPane
    * @param {!SDK.CSSMatchedStyles} matchedStyles
    * @param {!SDK.CSSProperty} property
    * @param {boolean} isShorthand
    * @param {boolean} inherited
    * @param {boolean} overloaded
    */
   constructor(stylesPane, matchedStyles, property, isShorthand, inherited, overloaded) {
     // Pass an empty title, the title gets made later in onattach.
     super('', isShorthand);
     this._style = property.ownerStyle;
     this._matchedStyles = matchedStyles;
     this.property = property;
     this._inherited = inherited;
     this._overloaded = overloaded;
     this.selectable = false;
     this._parentPane = stylesPane;
     this.isShorthand = isShorthand;
     this._applyStyleThrottler = new Common.Throttler(0);
+    this._newProperty = false;
+    this._expandedDueToFilter = false;
+    this.valueElement = null;
+    this.nameElement = null;
+    this._expandElement = null;
+    this._originalPropertyText = '';
+    this._prompt = null;

[einbinder, 2017/02/08 02:05:30]

This was scary, working with TextPrompt without help from closure.

+    this._propertyHasBeenEditedIncrementally = false;
   }
 
   /**
    * @return {boolean}
    */
   _editable() {
     return !!(this._style.styleSheetId && this._style.range);
   }
 
   /**
@@ skipping 231 matching lines @@
     var disabled = !event.target.checked;
     var oldStyleRange = this._style.range;
     if (!oldStyleRange)
       return;
 
     /**
      * @param {boolean} success
      * @this {Elements.StylePropertyTreeElement}
      */
     function callback(success) {
-      delete this._parentPane._userOperation;
+      this._parentPane._userOperation = false;
 
       if (!success)
         return;
       this._matchedStyles.resetActiveProperties();
       this._updatePane();
       this.styleTextAppliedForTest();
     }
 
     event.consume();
     this._parentPane._userOperation = true;
@@ skipping 46 matching lines @@
       this._parentPane._mouseDownTreeElement = this;
       this._parentPane._mouseDownTreeElementIsName =
           this.nameElement && this.nameElement.isSelfOrAncestor(event.target);
       this._parentPane._mouseDownTreeElementIsValue =
           this.valueElement && this.valueElement.isSelfOrAncestor(event.target);
     }
   }
 
   _resetMouseDownElement() {
     if (this._parentPane) {
-      delete this._parentPane._mouseDownTreeElement;
-      delete this._parentPane._mouseDownTreeElementIsName;
-      delete this._parentPane._mouseDownTreeElementIsValue;
+      this._parentPane._mouseDownTreeElement = null;
+      this._parentPane._mouseDownTreeElementIsName = false;
+      this._parentPane._mouseDownTreeElementIsValue = false;
     }
   }
 
   /**
    * @override
    */
   onexpand() {
     this._updateExpandElement();
   }
 
@@ skipping 378 matching lines @@
   editingCancelled(element, context) {
     this._removePrompt();
     this._revertStyleUponEditingCanceled();
     // This should happen last, as it clears the info necessary to restore the property value after [Page]Up/Down changes.
     this.editingEnded(context);
   }
 
   _revertStyleUponEditingCanceled() {
     if (this._propertyHasBeenEditedIncrementally) {
       this.applyStyleText(this._originalPropertyText, false);
-      delete this._originalPropertyText;
+      this._originalPropertyText = '';

[einbinder, 2017/02/08 02:05:29]

I am a little concerned about originalPropertyText and
_propertyHasBeenEditedIncrementally. We never set
_propertyHasBeenEditedIncrementally to false. Maybe there is a bug here?

     } else if (this._newProperty) {
       this.treeOutline.removeChild(this);
     } else {
       this.updateTitle();
     }
   }
 
   /**
    * @param {string} moveDirection
    * @return {?Elements.StylePropertyTreeElement}
@@ skipping 228 matching lines @@
    * @return {boolean}
    */
   isEventWithinDisclosureTriangle(event) {
     return event.target === this._expandElement;
   }
 };
 
 /** @typedef {{expanded: boolean, hasChildren: boolean, isEditingName: boolean, previousContent: string}} */
 Elements.StylePropertyTreeElement.Context;
 
-/**
- * @unrestricted
- */
 Elements.StylesSidebarPane.CSSPropertyPrompt = class extends UI.TextPrompt {
   /**
    * @param {!Array<string>} cssCompletions
    * @param {!Array<string>} cssVariables
    * @param {!Elements.StylePropertyTreeElement} treeElement
    * @param {boolean} isEditingName
    */
   constructor(cssCompletions, cssVariables, treeElement, isEditingName) {
     // Use the same callback both for applyItemCallback and acceptItemCallback.
     super();
@@ skipping 95 matching lines @@
      * @return {string}
      * @this {Elements.StylesSidebarPane.CSSPropertyPrompt}
      */
     function customNumberHandler(prefix, number, suffix) {
       if (number !== 0 && !suffix.length && SDK.cssMetadata().isLengthProperty(this._treeElement.property.name))
         suffix = 'px';
       return prefix + number + suffix;
     }
 
     // Handle numeric value increment/decrement only at this point.
-    if (!this._isEditingName &&
+    if (!this._isEditingName && this._treeElement.valueElement &&

[einbinder, 2017/02/08 02:05:29]

valueElement could be null here. It shouldn't be because we are editingName, but
I think it is worth the extra check instead of a cast.

         UI.handleElementValueModifications(
             event, this._treeElement.valueElement, finishHandler.bind(this), this._isValueSuggestion.bind(this),
             customNumberHandler.bind(this)))
       return true;
 
     return false;
   }
 
   /**
    * @param {string} word
@@ skipping 48 matching lines @@
       if (index === 0) {
         var priority = this._isEditingName ? SDK.cssMetadata().propertyUsageWeight(completion) : 1;
         prefixResults.push({text: completion, priority: priority});
       } else if (index > -1) {
         anywhereResults.push({text: completion});
       }
     }
   }
 };
 
-/**
- * @unrestricted
- */
 Elements.StylesSidebarPropertyRenderer = class {
   /**
    * @param {?SDK.CSSRule} rule
    * @param {?SDK.DOMNode} node
    * @param {string} name
    * @param {string} value
    */
   constructor(rule, node, name, value) {
     this._rule = rule;
     this._node = node;
     this._propertyName = name;
     this._propertyValue = value;
+    /** @type {?function(string):!Node} */
+    this._colorHandler = null;
+    /** @type {?function(string):!Node} */
+    this._bezierHandler = null;
+    /** @type {?function(string, string):!Node} */
+    this._shadowHandler = null;
   }
 
   /**
    * @param {function(string):!Node} handler
    */
   setColorHandler(handler) {
     this._colorHandler = handler;
   }
 
   /**
@@ skipping 76 matching lines @@
     else if (this._node)
       hrefUrl = this._node.resolveURL(url);
     container.appendChild(Components.Linkifier.linkifyURL(hrefUrl || url, url, '', undefined, undefined, true));
     container.createTextChild(')');
     return container;
   }
 };
 
 /**
  * @implements {UI.ToolbarItem.Provider}
- * @unrestricted
  */
 Elements.StylesSidebarPane.ButtonProvider = class {
   constructor() {
     this._button = new UI.ToolbarButton(Common.UIString('New Style Rule'), 'largeicon-add');
     this._button.addEventListener(UI.ToolbarButton.Events.Click, this._clicked, this);
     var longclickTriangle = UI.Icon.create('largeicon-longclick-triangle', 'long-click-glyph');
     this._button.element.appendChild(longclickTriangle);
 
     new UI.LongClickController(this._button.element, this._longClicked.bind(this));
     UI.context.addFlavorChangeListener(SDK.DOMNode, onNodeChanged.bind(this));
@@ skipping 24 matching lines @@
   }
 
   /**
    * @override
    * @return {!UI.ToolbarItem}
    */
   item() {
     return this._button;
   }
 };