DevTools: rename WebInspector into modules.

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.
@@ skipping 12 matching lines @@
  * (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
  */
-WebInspector.StylesSidebarPane = class extends WebInspector.ElementsSidebarPane {
+Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane {
   constructor() {
     super();
     this.setMinimumSize(96, 26);
 
-    WebInspector.moduleSetting('colorFormat').addChangeListener(this.update.bind(this));
-    WebInspector.moduleSetting('textEditorIndent').addChangeListener(this.update.bind(this));
+    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 WebInspector.SwatchPopoverHelper();
-    this._linkifier = new WebInspector.Linkifier(WebInspector.StylesSidebarPane._maxLinkLength, /* useLinkDecorator */ true);
+    this._swatchPopoverHelper = new UI.SwatchPopoverHelper();
+    this._linkifier = new Components.Linkifier(Elements.StylesSidebarPane._maxLinkLength, /* useLinkDecorator */ true);
 
     this.element.classList.add('styles-pane');
 
-    /** @type {!Array<!WebInspector.SectionBlock>} */
+    /** @type {!Array<!Elements.SectionBlock>} */
     this._sectionBlocks = [];
-    WebInspector.StylesSidebarPane._instance = this;
+    Elements.StylesSidebarPane._instance = this;
 
-    WebInspector.targetManager.addModelListener(
-        WebInspector.CSSModel, WebInspector.CSSModel.Events.LayoutEditorChange, this._onLayoutEditorChange, this);
-    WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, this.forceUpdate, this);
+    SDK.targetManager.addModelListener(
+        SDK.CSSModel, SDK.CSSModel.Events.LayoutEditorChange, this._onLayoutEditorChange, this);
+    UI.context.addFlavorChangeListener(SDK.DOMNode, this.forceUpdate, this);
   }
 
   /**
-   * @param {!WebInspector.CSSProperty} property
+   * @param {!SDK.CSSProperty} property
    * @return {!Element}
    */
   static createExclamationMark(property) {
     var exclamationElement = createElement('label', 'dt-icon-label');
     exclamationElement.className = 'exclamation-mark';
-    if (!WebInspector.StylesSidebarPane.ignoreErrorsForProperty(property))
+    if (!Elements.StylesSidebarPane.ignoreErrorsForProperty(property))
       exclamationElement.type = 'smallicon-warning';
-    exclamationElement.title = WebInspector.cssMetadata().isCSSPropertyName(property.name) ?
-        WebInspector.UIString('Invalid property value') :
-        WebInspector.UIString('Unknown property name');
+    exclamationElement.title = SDK.cssMetadata().isCSSPropertyName(property.name) ?
+        Common.UIString('Invalid property value') :
+        Common.UIString('Unknown property name');
     return exclamationElement;
   }
 
   /**
-   * @param {!WebInspector.CSSProperty} property
+   * @param {!SDK.CSSProperty} property
    * @return {boolean}
    */
   static ignoreErrorsForProperty(property) {
     /**
      * @param {string} string
      */
     function hasUnknownVendorPrefix(string) {
       return !string.startsWith('-webkit-') && /^[-_][\w\d]+-\w/.test(string);
     }
 
@@ skipping 61 matching lines @@
     function setFilterValue(value) {
       input.value = value;
       input.focus();
       searchHandler();
     }
 
     return input;
   }
 
   /**
-   * @param {!WebInspector.Event} event
+   * @param {!Common.Event} event
    */
   _onLayoutEditorChange(event) {
-    var cssModel = /** @type {!WebInspector.CSSModel} */ (event.target);
+    var cssModel = /** @type {!SDK.CSSModel} */ (event.target);
     var styleSheetId = event.data['id'];
     var sourceRange = /** @type {!Protocol.CSS.SourceRange} */ (event.data['range']);
-    var range = WebInspector.TextRange.fromObject(sourceRange);
-    this._decorator = new WebInspector.PropertyChangeHighlighter(this, cssModel, styleSheetId, range);
+    var range = Common.TextRange.fromObject(sourceRange);
+    this._decorator = new Elements.PropertyChangeHighlighter(this, cssModel, styleSheetId, range);
     this.update();
   }
 
   /**
-   * @param {!WebInspector.CSSProperty} cssProperty
+   * @param {!SDK.CSSProperty} cssProperty
    */
   revealProperty(cssProperty) {
-    this._decorator = new WebInspector.PropertyRevealHighlighter(this, cssProperty);
+    this._decorator = new Elements.PropertyRevealHighlighter(this, cssProperty);
     this._decorator.perform();
     this.update();
   }
 
   forceUpdate() {
     this._swatchPopoverHelper.hide();
     this._resetCache();
     this.update();
   }
 
   /**
    * @param {!Event} event
    */
   _onAddButtonLongClick(event) {
     var cssModel = this.cssModel();
     if (!cssModel)
       return;
     var headers = cssModel.styleSheetHeaders().filter(styleSheetResourceHeader);
 
     /** @type {!Array.<{text: string, handler: function()}>} */
     var contextMenuDescriptors = [];
     for (var i = 0; i < headers.length; ++i) {
       var header = headers[i];
       var handler = this._createNewRuleInStyleSheet.bind(this, header);
-      contextMenuDescriptors.push({text: WebInspector.displayNameForURL(header.resourceURL()), handler: handler});
+      contextMenuDescriptors.push({text: Bindings.displayNameForURL(header.resourceURL()), handler: handler});
     }
 
     contextMenuDescriptors.sort(compareDescriptors);
 
-    var contextMenu = new WebInspector.ContextMenu(event);
+    var contextMenu = new UI.ContextMenu(event);
     for (var i = 0; i < contextMenuDescriptors.length; ++i) {
       var descriptor = contextMenuDescriptors[i];
       contextMenu.appendItem(descriptor.text, descriptor.handler);
     }
     if (!contextMenu.isEmpty())
       contextMenu.appendSeparator();
     contextMenu.appendItem('inspector-stylesheet', this._createNewRuleInViaInspectorStyleSheet.bind(this));
     contextMenu.show();
 
     /**
      * @param {!{text: string, handler: function()}} descriptor1
      * @param {!{text: string, handler: function()}} descriptor2
      * @return {number}
      */
     function compareDescriptors(descriptor1, descriptor2) {
       return String.naturalOrderComparator(descriptor1.text, descriptor2.text);
     }
 
     /**
-     * @param {!WebInspector.CSSStyleSheetHeader} header
+     * @param {!SDK.CSSStyleSheetHeader} header
      * @return {boolean}
      */
     function styleSheetResourceHeader(header) {
       return !header.isViaInspector() && !header.isInline && !!header.resourceURL();
     }
   }
 
   /**
    * @param {?RegExp} regex
    */
   onFilterChanged(regex) {
     this._filterRegex = regex;
     this._updateFilter();
   }
 
   /**
-   * @param {!WebInspector.StylePropertiesSection=} editedSection
+   * @param {!Elements.StylePropertiesSection=} editedSection
    */
   _refreshUpdate(editedSection) {
     var node = this.node();
     if (!node)
       return;
 
     var fullRefresh = Runtime.experiments.isEnabled('liveSASS');
     for (var section of this.allSections()) {
       if (section.isBlank)
         continue;
@@ skipping 12 matching lines @@
   doUpdate() {
     return this._fetchMatchedCascade().then(this._innerRebuildUpdate.bind(this));
   }
 
   _resetCache() {
     if (this.cssModel())
       this.cssModel().discardCachedMatchedCascade();
   }
 
   /**
-   * @return {!Promise.<?WebInspector.CSSMatchedStyles>}
+   * @return {!Promise.<?SDK.CSSMatchedStyles>}
    */
   _fetchMatchedCascade() {
     var node = this.node();
     if (!node || !this.cssModel())
-      return Promise.resolve(/** @type {?WebInspector.CSSMatchedStyles} */ (null));
+      return Promise.resolve(/** @type {?SDK.CSSMatchedStyles} */ (null));
 
     return this.cssModel().cachedMatchedCascadeForNode(node).then(validateStyles.bind(this));
 
     /**
-     * @param {?WebInspector.CSSMatchedStyles} matchedStyles
-     * @return {?WebInspector.CSSMatchedStyles}
-     * @this {WebInspector.StylesSidebarPane}
+     * @param {?SDK.CSSMatchedStyles} matchedStyles
+     * @return {?SDK.CSSMatchedStyles}
+     * @this {Elements.StylesSidebarPane}
      */
     function validateStyles(matchedStyles) {
       return matchedStyles && matchedStyles.node() === this.node() ? matchedStyles : null;
     }
   }
 
   /**
    * @param {boolean} editing
    */
   setEditingStyle(editing) {
     if (this._isEditingStyle === editing)
       return;
     this.element.classList.toggle('is-editing-style', editing);
     this._isEditingStyle = editing;
   }
 
   /**
    * @override
-   * @param {!WebInspector.Event=} event
+   * @param {!Common.Event=} event
    */
   onCSSModelChanged(event) {
-    var edit = event && event.data ? /** @type {?WebInspector.CSSModel.Edit} */ (event.data.edit) : null;
+    var edit = event && event.data ? /** @type {?SDK.CSSModel.Edit} */ (event.data.edit) : null;
     if (edit) {
       for (var section of this.allSections())
         section._styleSheetEdited(edit);
       return;
     }
 
     if (this._userOperation || this._isEditingStyle)
       return;
 
     this._resetCache();
     this.update();
   }
 
   /**
-   * @param {?WebInspector.CSSMatchedStyles} matchedStyles
+   * @param {?SDK.CSSMatchedStyles} matchedStyles
    */
   _innerRebuildUpdate(matchedStyles) {
     this._linkifier.reset();
     this._sectionsContainer.removeChildren();
     this._sectionBlocks = [];
 
     var node = this.node();
     if (!matchedStyles || !node)
       return;
 
     this._sectionBlocks = this._rebuildSectionsForMatchedStyleRules(matchedStyles);
     var pseudoTypes = [];
     var keys = new Set(matchedStyles.pseudoStyles().keys());
     if (keys.delete(Protocol.DOM.PseudoType.Before))
       pseudoTypes.push(Protocol.DOM.PseudoType.Before);
     pseudoTypes = pseudoTypes.concat(keys.valuesArray().sort());
     for (var pseudoType of pseudoTypes) {
-      var block = WebInspector.SectionBlock.createPseudoTypeBlock(pseudoType);
+      var block = Elements.SectionBlock.createPseudoTypeBlock(pseudoType);
       var styles =
-          /** @type {!Array<!WebInspector.CSSStyleDeclaration>} */ (matchedStyles.pseudoStyles().get(pseudoType));
+          /** @type {!Array<!SDK.CSSStyleDeclaration>} */ (matchedStyles.pseudoStyles().get(pseudoType));
       for (var style of styles) {
-        var section = new WebInspector.StylePropertiesSection(this, matchedStyles, style);
+        var section = new Elements.StylePropertiesSection(this, matchedStyles, style);
         block.sections.push(section);
       }
       this._sectionBlocks.push(block);
     }
 
     for (var keyframesRule of matchedStyles.keyframes()) {
-      var block = WebInspector.SectionBlock.createKeyframesBlock(keyframesRule.name().text);
+      var block = Elements.SectionBlock.createKeyframesBlock(keyframesRule.name().text);
       for (var keyframe of keyframesRule.keyframes())
-        block.sections.push(new WebInspector.KeyframePropertiesSection(this, matchedStyles, keyframe.style));
+        block.sections.push(new Elements.KeyframePropertiesSection(this, matchedStyles, keyframe.style));
       this._sectionBlocks.push(block);
     }
 
     for (var block of this._sectionBlocks) {
       var titleElement = block.titleElement();
       if (titleElement)
         this._sectionsContainer.appendChild(titleElement);
       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;
     }
   }
 
   /**
-   * @param {!WebInspector.DOMNode} node
+   * @param {!SDK.DOMNode} node
    * @param {boolean} rebuild
    */
   _nodeStylesUpdatedForTest(node, rebuild) {
     // For sniffing in tests.
   }
 
   /**
-   * @param {!WebInspector.CSSMatchedStyles} matchedStyles
-   * @return {!Array.<!WebInspector.SectionBlock>}
+   * @param {!SDK.CSSMatchedStyles} matchedStyles
+   * @return {!Array.<!Elements.SectionBlock>}
    */
   _rebuildSectionsForMatchedStyleRules(matchedStyles) {
-    var blocks = [new WebInspector.SectionBlock(null)];
+    var blocks = [new Elements.SectionBlock(null)];
     var lastParentNode = null;
     for (var style of matchedStyles.nodeStyles()) {
       var parentNode = matchedStyles.isInherited(style) ? matchedStyles.nodeForStyle(style) : null;
       if (parentNode && parentNode !== lastParentNode) {
         lastParentNode = parentNode;
-        var block = WebInspector.SectionBlock.createInheritedNodeBlock(lastParentNode);
+        var block = Elements.SectionBlock.createInheritedNodeBlock(lastParentNode);
         blocks.push(block);
       }
 
-      var section = new WebInspector.StylePropertiesSection(this, matchedStyles, style);
+      var section = new Elements.StylePropertiesSection(this, matchedStyles, style);
       blocks.peekLast().sections.push(section);
     }
     return blocks;
   }
 
   _createNewRuleInViaInspectorStyleSheet() {
     var cssModel = this.cssModel();
     var node = this.node();
     if (!cssModel || !node)
       return;
     this._userOperation = true;
     cssModel.requestViaInspectorStylesheet(node, onViaInspectorStyleSheet.bind(this));
 
     /**
-     * @param {?WebInspector.CSSStyleSheetHeader} styleSheetHeader
-     * @this {WebInspector.StylesSidebarPane}
+     * @param {?SDK.CSSStyleSheetHeader} styleSheetHeader
+     * @this {Elements.StylesSidebarPane}
      */
     function onViaInspectorStyleSheet(styleSheetHeader) {
       delete this._userOperation;
       this._createNewRuleInStyleSheet(styleSheetHeader);
     }
   }
 
   /**
-   * @param {?WebInspector.CSSStyleSheetHeader} styleSheetHeader
+   * @param {?SDK.CSSStyleSheetHeader} styleSheetHeader
    */
   _createNewRuleInStyleSheet(styleSheetHeader) {
     if (!styleSheetHeader)
       return;
     styleSheetHeader.requestContent().then(onStyleSheetContent.bind(this, styleSheetHeader.id));
 
     /**
      * @param {string} styleSheetId
      * @param {?string} text
-     * @this {WebInspector.StylesSidebarPane}
+     * @this {Elements.StylesSidebarPane}
      */
     function onStyleSheetContent(styleSheetId, text) {
       text = text || '';
       var lines = text.split('\n');
-      var range = WebInspector.TextRange.createFromLocation(lines.length - 1, lines[lines.length - 1].length);
+      var range = Common.TextRange.createFromLocation(lines.length - 1, lines[lines.length - 1].length);
       this._addBlankSection(this._sectionBlocks[0].sections[0], styleSheetId, range);
     }
   }
 
   /**
-   * @param {!WebInspector.StylePropertiesSection} insertAfterSection
+   * @param {!Elements.StylePropertiesSection} insertAfterSection
    * @param {string} styleSheetId
-   * @param {!WebInspector.TextRange} ruleLocation
+   * @param {!Common.TextRange} ruleLocation
    */
   _addBlankSection(insertAfterSection, styleSheetId, ruleLocation) {
     var node = this.node();
-    var blankSection = new WebInspector.BlankStylePropertiesSection(
-        this, insertAfterSection._matchedStyles, node ? WebInspector.DOMPresentationUtils.simpleSelector(node) : '',
+    var blankSection = new Elements.BlankStylePropertiesSection(
+        this, insertAfterSection._matchedStyles, node ? Components.DOMPresentationUtils.simpleSelector(node) : '',
         styleSheetId, ruleLocation, insertAfterSection._style);
 
     this._sectionsContainer.insertBefore(blankSection.element, insertAfterSection.element.nextSibling);
 
     for (var block of this._sectionBlocks) {
       var index = block.sections.indexOf(insertAfterSection);
       if (index === -1)
         continue;
       block.sections.splice(index + 1, 0, blankSection);
       blankSection.startEditingSelector();
     }
   }
 
   /**
-   * @param {!WebInspector.StylePropertiesSection} section
+   * @param {!Elements.StylePropertiesSection} section
    */
   removeSection(section) {
     for (var block of this._sectionBlocks) {
       var index = block.sections.indexOf(section);
       if (index === -1)
         continue;
       block.sections.splice(index, 1);
       section.element.remove();
     }
   }
@@ skipping 12 matching lines @@
 
   /**
    * @override
    */
   willHide() {
     this._swatchPopoverHelper.hide();
     super.willHide();
   }
 
   /**
-   * @return {!Array<!WebInspector.StylePropertiesSection>}
+   * @return {!Array<!Elements.StylePropertiesSection>}
    */
   allSections() {
     var sections = [];
     for (var block of this._sectionBlocks)
       sections = sections.concat(block.sections);
     return sections;
   }
 };
 
-WebInspector.StylesSidebarPane._maxLinkLength = 30;
+Elements.StylesSidebarPane._maxLinkLength = 30;
 
 /**
  * @unrestricted
  */
-WebInspector.SectionBlock = class {
+Elements.SectionBlock = class {
   /**
    * @param {?Element} titleElement
    */
   constructor(titleElement) {
     this._titleElement = titleElement;
     this.sections = [];
   }
 
   /**
    * @param {!Protocol.DOM.PseudoType} pseudoType
-   * @return {!WebInspector.SectionBlock}
+   * @return {!Elements.SectionBlock}
    */
   static createPseudoTypeBlock(pseudoType) {
     var separatorElement = createElement('div');
     separatorElement.className = 'sidebar-separator';
-    separatorElement.textContent = WebInspector.UIString('Pseudo ::%s element', pseudoType);
-    return new WebInspector.SectionBlock(separatorElement);
+    separatorElement.textContent = Common.UIString('Pseudo ::%s element', pseudoType);
+    return new Elements.SectionBlock(separatorElement);
   }
 
   /**
    * @param {string} keyframesName
-   * @return {!WebInspector.SectionBlock}
+   * @return {!Elements.SectionBlock}
    */
   static createKeyframesBlock(keyframesName) {
     var separatorElement = createElement('div');
     separatorElement.className = 'sidebar-separator';
-    separatorElement.textContent = WebInspector.UIString('@keyframes ' + keyframesName);
-    return new WebInspector.SectionBlock(separatorElement);
+    separatorElement.textContent = Common.UIString('@keyframes ' + keyframesName);
+    return new Elements.SectionBlock(separatorElement);
   }
 
   /**
-   * @param {!WebInspector.DOMNode} node
-   * @return {!WebInspector.SectionBlock}
+   * @param {!SDK.DOMNode} node
+   * @return {!Elements.SectionBlock}
    */
   static createInheritedNodeBlock(node) {
     var separatorElement = createElement('div');
     separatorElement.className = 'sidebar-separator';
-    var link = WebInspector.DOMPresentationUtils.linkifyNodeReference(node);
-    separatorElement.createTextChild(WebInspector.UIString('Inherited from') + ' ');
+    var link = Components.DOMPresentationUtils.linkifyNodeReference(node);
+    separatorElement.createTextChild(Common.UIString('Inherited from') + ' ');
     separatorElement.appendChild(link);
-    return new WebInspector.SectionBlock(separatorElement);
+    return new Elements.SectionBlock(separatorElement);
   }
 
   updateFilter() {
     var hasAnyVisibleSection = false;
     for (var section of this.sections)
       hasAnyVisibleSection |= section._updateFilter();
     if (this._titleElement)
       this._titleElement.classList.toggle('hidden', !hasAnyVisibleSection);
   }
 
   /**
    * @return {?Element}
    */
   titleElement() {
     return this._titleElement;
   }
 };
 
 
 /**
  * @unrestricted
  */
-WebInspector.StylePropertiesSection = class {
+Elements.StylePropertiesSection = class {
   /**
-   * @param {!WebInspector.StylesSidebarPane} parentPane
-   * @param {!WebInspector.CSSMatchedStyles} matchedStyles
-   * @param {!WebInspector.CSSStyleDeclaration} style
+   * @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);
 
     var rule = style.parentRule;
     this.element = createElementWithClass('div', 'styles-section matched-styles monospace');
     this.element._section = this;
@@ skipping 28 matching lines @@
     this.element.addEventListener('mousedown', this._handleEmptySpaceMouseDown.bind(this), false);
     this.element.addEventListener('click', this._handleEmptySpaceClick.bind(this), false);
     this.element.addEventListener('mousemove', this._onMouseMove.bind(this), false);
     this.element.addEventListener('mouseleave', this._setSectionHovered.bind(this, false), false);
 
     if (rule) {
       // Prevent editing the user agent and user rules.
       if (rule.isUserAgent() || rule.isInjected()) {
         this.editable = false;
       } else {
-        // Check this is a real CSSRule, not a bogus object coming from WebInspector.BlankStylePropertiesSection.
+        // Check this is a real CSSRule, not a bogus object coming from Elements.BlankStylePropertiesSection.
         if (rule.styleSheetId)
           this.navigable = !!rule.resourceURL();
       }
     }
 
     this._mediaListElement = this._titleElement.createChild('div', 'media-list media-matches');
     this._selectorRefElement = this._titleElement.createChild('div', 'styles-section-subtitle');
     this._updateMediaList();
     this._updateRuleOrigin();
     this._titleElement.appendChild(selectorContainer);
     this._selectorContainer = selectorContainer;
 
     if (this.navigable)
       this.element.classList.add('navigable');
 
     if (!this.editable) {
       this.element.classList.add('read-only');
       this.propertiesTreeOutline.element.classList.add('read-only');
     }
 
     this._hoverableSelectorsMode = false;
     this._markSelectorMatches();
     this.onpopulate();
   }
 
   /**
-   * @param {!WebInspector.CSSMatchedStyles} matchedStyles
-   * @param {!WebInspector.Linkifier} linkifier
-   * @param {?WebInspector.CSSRule} rule
+   * @param {!SDK.CSSMatchedStyles} matchedStyles
+   * @param {!Components.Linkifier} linkifier
+   * @param {?SDK.CSSRule} rule
    * @return {!Node}
    */
   static createRuleOriginNode(matchedStyles, linkifier, rule) {
     if (!rule)
       return createTextNode('');
 
     var ruleLocation;
-    if (rule instanceof WebInspector.CSSStyleRule) {
+    if (rule instanceof SDK.CSSStyleRule) {
       var matchingSelectors = matchedStyles.matchingSelectors(rule);
       var firstMatchingIndex = matchingSelectors.length ? matchingSelectors[0] : 0;
       ruleLocation = rule.selectors[firstMatchingIndex].range;
-    } else if (rule instanceof WebInspector.CSSKeyframeRule) {
+    } else if (rule instanceof SDK.CSSKeyframeRule) {
       ruleLocation = rule.key().range;
     }
 
     var header = rule.styleSheetId ? matchedStyles.cssModel().styleSheetHeaderForId(rule.styleSheetId) : null;
     if (ruleLocation && rule.styleSheetId && header && header.resourceURL())
-      return WebInspector.StylePropertiesSection._linkifyRuleLocation(
+      return Elements.StylePropertiesSection._linkifyRuleLocation(
           matchedStyles.cssModel(), linkifier, rule.styleSheetId, ruleLocation);
 
     if (rule.isUserAgent())
-      return createTextNode(WebInspector.UIString('user agent stylesheet'));
+      return createTextNode(Common.UIString('user agent stylesheet'));
     if (rule.isInjected())
-      return createTextNode(WebInspector.UIString('injected stylesheet'));
+      return createTextNode(Common.UIString('injected stylesheet'));
     if (rule.isViaInspector())
-      return createTextNode(WebInspector.UIString('via inspector'));
+      return createTextNode(Common.UIString('via inspector'));
 
     if (header && header.ownerNode) {
-      var link = WebInspector.DOMPresentationUtils.linkifyDeferredNodeReference(header.ownerNode);
+      var link = Components.DOMPresentationUtils.linkifyDeferredNodeReference(header.ownerNode);
       link.textContent = '<style>…</style>';
       return link;
     }
 
     return createTextNode('');
   }
 
   /**
-   * @param {!WebInspector.CSSModel} cssModel
-   * @param {!WebInspector.Linkifier} linkifier
+   * @param {!SDK.CSSModel} cssModel
+   * @param {!Components.Linkifier} linkifier
    * @param {string} styleSheetId
-   * @param {!WebInspector.TextRange} ruleLocation
+   * @param {!Common.TextRange} ruleLocation
    * @return {!Node}
    */
   static _linkifyRuleLocation(cssModel, linkifier, styleSheetId, ruleLocation) {
     var styleSheetHeader = cssModel.styleSheetHeaderForId(styleSheetId);
     var lineNumber = styleSheetHeader.lineNumberInSource(ruleLocation.startLine);
     var columnNumber = styleSheetHeader.columnNumberInSource(ruleLocation.startLine, ruleLocation.startColumn);
-    var matchingSelectorLocation = new WebInspector.CSSLocation(styleSheetHeader, lineNumber, columnNumber);
+    var matchingSelectorLocation = new SDK.CSSLocation(styleSheetHeader, lineNumber, columnNumber);
     return linkifier.linkifyCSSLocation(matchingSelectorLocation);
   }
 
   /**
    * @param {boolean} isHovered
    */
   _setSectionHovered(isHovered) {
     this.element.classList.toggle('styles-panel-hovered', isHovered);
     this.propertiesTreeOutline.element.classList.toggle('styles-panel-hovered', isHovered);
     if (this._hoverableSelectorsMode !== isHovered) {
       this._hoverableSelectorsMode = isHovered;
       this._markSelectorMatches();
     }
   }
 
   /**
    * @param {!Event} event
    */
   _onMouseMove(event) {
-    var hasCtrlOrMeta = WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!MouseEvent} */ (event));
+    var hasCtrlOrMeta = UI.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!MouseEvent} */ (event));
     this._setSectionHovered(hasCtrlOrMeta);
   }
 
   /**
    * @param {!Element} container
    */
   _createHoverMenuToolbar(container) {
     if (!this.editable)
       return;
     var items = [];
 
     var textShadowButton =
-        new WebInspector.ToolbarButton(WebInspector.UIString('Add text-shadow'), 'largeicon-text-shadow');
+        new UI.ToolbarButton(Common.UIString('Add text-shadow'), 'largeicon-text-shadow');
     textShadowButton.addEventListener('click', this._onInsertShadowPropertyClick.bind(this, 'text-shadow'));
     items.push(textShadowButton);
 
     var boxShadowButton =
-        new WebInspector.ToolbarButton(WebInspector.UIString('Add box-shadow'), 'largeicon-box-shadow');
+        new UI.ToolbarButton(Common.UIString('Add box-shadow'), 'largeicon-box-shadow');
     boxShadowButton.addEventListener('click', this._onInsertShadowPropertyClick.bind(this, 'box-shadow'));
     items.push(boxShadowButton);
 
     var colorButton =
-        new WebInspector.ToolbarButton(WebInspector.UIString('Add color'), 'largeicon-foreground-color');
+        new UI.ToolbarButton(Common.UIString('Add color'), 'largeicon-foreground-color');
     colorButton.addEventListener('click', this._onInsertColorPropertyClick.bind(this));
     items.push(colorButton);
 
     var backgroundButton =
-        new WebInspector.ToolbarButton(WebInspector.UIString('Add background-color'), 'largeicon-background-color');
+        new UI.ToolbarButton(Common.UIString('Add background-color'), 'largeicon-background-color');
     backgroundButton.addEventListener('click', this._onInsertBackgroundColorPropertyClick.bind(this));
     items.push(backgroundButton);
 
     var newRuleButton = null;
     if (this._style.parentRule) {
       newRuleButton =
-          new WebInspector.ToolbarButton(WebInspector.UIString('Insert Style Rule Below'), 'largeicon-add');
+          new UI.ToolbarButton(Common.UIString('Insert Style Rule Below'), 'largeicon-add');
       newRuleButton.addEventListener('click', this._onNewRuleClick.bind(this));
       items.push(newRuleButton);
     }
 
-    var sectionToolbar = new WebInspector.Toolbar('sidebar-pane-section-toolbar', container);
+    var sectionToolbar = new UI.Toolbar('sidebar-pane-section-toolbar', container);
     for (var i = 0; i < items.length; ++i)
       sectionToolbar.appendToolbarItem(items[i]);
 
-    var menuButton = new WebInspector.ToolbarButton(WebInspector.UIString('More tools\u2026'), 'largeicon-menu');
+    var menuButton = new UI.ToolbarButton(Common.UIString('More tools\u2026'), 'largeicon-menu');
     sectionToolbar.appendToolbarItem(menuButton);
     setItemsVisibility.call(this, items, false);
     sectionToolbar.element.addEventListener('mouseenter', setItemsVisibility.bind(this, items, true));
     sectionToolbar.element.addEventListener('mouseleave', setItemsVisibility.bind(this, items, false));
 
     /**
-     * @param {!Array<!WebInspector.ToolbarButton>} items
+     * @param {!Array<!UI.ToolbarButton>} items
      * @param {boolean} value
-     * @this {WebInspector.StylePropertiesSection}
+     * @this {Elements.StylePropertiesSection}
      */
     function setItemsVisibility(items, value) {
       for (var i = 0; i < items.length; ++i)
         items[i].setVisible(value);
       menuButton.setVisible(!value);
       if (this._isSASSStyle())
         newRuleButton.setVisible(false);
     }
   }
 
   /**
    * @return {boolean}
    */
   _isSASSStyle() {
     var header =
         this._style.styleSheetId ? this._style.cssModel().styleSheetHeaderForId(this._style.styleSheetId) : null;
     if (!header)
       return false;
     var sourceMap = header.cssModel().sourceMapForHeader(header);
     return sourceMap ? sourceMap.editable() : false;
   }
 
   /**
-   * @return {!WebInspector.CSSStyleDeclaration}
+   * @return {!SDK.CSSStyleDeclaration}
    */
   style() {
     return this._style;
   }
 
   /**
    * @return {string}
    */
   _headerText() {
     var node = this._matchedStyles.nodeForStyle(this._style);
-    if (this._style.type === WebInspector.CSSStyleDeclaration.Type.Inline)
-      return this._matchedStyles.isInherited(this._style) ? WebInspector.UIString('Style Attribute') : 'element.style';
-    if (this._style.type === WebInspector.CSSStyleDeclaration.Type.Attributes)
-      return node.nodeNameInCorrectCase() + '[' + WebInspector.UIString('Attributes Style') + ']';
+    if (this._style.type === SDK.CSSStyleDeclaration.Type.Inline)
+      return this._matchedStyles.isInherited(this._style) ? Common.UIString('Style Attribute') : 'element.style';
+    if (this._style.type === SDK.CSSStyleDeclaration.Type.Attributes)
+      return node.nodeNameInCorrectCase() + '[' + Common.UIString('Attributes Style') + ']';
     return this._style.parentRule.selectorText();
   }
 
   _onMouseOutSelector() {
     if (this._hoverTimer)
       clearTimeout(this._hoverTimer);
-    WebInspector.DOMModel.hideDOMNodeHighlight();
+    SDK.DOMModel.hideDOMNodeHighlight();
   }
 
   _onMouseEnterSelector() {
     if (this._hoverTimer)
       clearTimeout(this._hoverTimer);
     this._hoverTimer = setTimeout(this._highlight.bind(this), 300);
   }
 
   _highlight() {
-    WebInspector.DOMModel.hideDOMNodeHighlight();
+    SDK.DOMModel.hideDOMNodeHighlight();
     var node = this._parentPane.node();
     var domModel = node.domModel();
     var selectors = this._style.parentRule ? this._style.parentRule.selectorText() : undefined;
     domModel.highlightDOMNodeWithConfig(node.id, {mode: 'all', showInfo: undefined, selectors: selectors});
   }
 
   /**
-   * @return {?WebInspector.StylePropertiesSection}
+   * @return {?Elements.StylePropertiesSection}
    */
   firstSibling() {
     var parent = this.element.parentElement;
     if (!parent)
       return null;
 
     var childElement = parent.firstChild;
     while (childElement) {
       if (childElement._section)
         return childElement._section;
       childElement = childElement.nextSibling;
     }
 
     return null;
   }
 
   /**
-   * @return {?WebInspector.StylePropertiesSection}
+   * @return {?Elements.StylePropertiesSection}
    */
   lastSibling() {
     var parent = this.element.parentElement;
     if (!parent)
       return null;
 
     var childElement = parent.lastChild;
     while (childElement) {
       if (childElement._section)
         return childElement._section;
       childElement = childElement.previousSibling;
     }
 
     return null;
   }
 
   /**
-   * @return {?WebInspector.StylePropertiesSection}
+   * @return {?Elements.StylePropertiesSection}
    */
   nextSibling() {
     var curElement = this.element;
     do {
       curElement = curElement.nextSibling;
     } while (curElement && !curElement._section);
 
     return curElement ? curElement._section : null;
   }
 
   /**
-   * @return {?WebInspector.StylePropertiesSection}
+   * @return {?Elements.StylePropertiesSection}
    */
   previousSibling() {
     var curElement = this.element;
     do {
       curElement = curElement.previousSibling;
     } while (curElement && !curElement._section);
 
     return curElement ? curElement._section : null;
   }
 
   /**
-   * @param {!WebInspector.Event} event
+   * @param {!Common.Event} event
    */
   _onNewRuleClick(event) {
     event.consume();
     var rule = this._style.parentRule;
-    var range = WebInspector.TextRange.createFromLocation(rule.style.range.endLine, rule.style.range.endColumn + 1);
+    var range = Common.TextRange.createFromLocation(rule.style.range.endLine, rule.style.range.endColumn + 1);
     this._parentPane._addBlankSection(this, /** @type {string} */ (rule.styleSheetId), range);
   }
 
   /**
    * @param {string} propertyName
-   * @param {!WebInspector.Event} event
+   * @param {!Common.Event} event
    */
   _onInsertShadowPropertyClick(propertyName, event) {
     event.consume(true);
     var treeElement = this.addNewBlankProperty();
     treeElement.property.name = propertyName;
     treeElement.property.value = '0 0 black';
     treeElement.updateTitle();
-    var shadowSwatchPopoverHelper = WebInspector.ShadowSwatchPopoverHelper.forTreeElement(treeElement);
+    var shadowSwatchPopoverHelper = Elements.ShadowSwatchPopoverHelper.forTreeElement(treeElement);
     if (shadowSwatchPopoverHelper)
       shadowSwatchPopoverHelper.showPopover();
   }
 
   /**
-   * @param {!WebInspector.Event} event
+   * @param {!Common.Event} event
    */
   _onInsertColorPropertyClick(event) {
     event.consume(true);
     var treeElement = this.addNewBlankProperty();
     treeElement.property.name = 'color';
     treeElement.property.value = 'black';
     treeElement.updateTitle();
-    var colorSwatch = WebInspector.ColorSwatchPopoverIcon.forTreeElement(treeElement);
+    var colorSwatch = Elements.ColorSwatchPopoverIcon.forTreeElement(treeElement);
     if (colorSwatch)
       colorSwatch.showPopover();
   }
 
   /**
-   * @param {!WebInspector.Event} event
+   * @param {!Common.Event} event
    */
   _onInsertBackgroundColorPropertyClick(event) {
     event.consume(true);
     var treeElement = this.addNewBlankProperty();
     treeElement.property.name = 'background-color';
     treeElement.property.value = 'white';
     treeElement.updateTitle();
-    var colorSwatch = WebInspector.ColorSwatchPopoverIcon.forTreeElement(treeElement);
+    var colorSwatch = Elements.ColorSwatchPopoverIcon.forTreeElement(treeElement);
     if (colorSwatch)
       colorSwatch.showPopover();
   }
 
   /**
-   * @param {!WebInspector.CSSModel.Edit} edit
+   * @param {!SDK.CSSModel.Edit} edit
    */
   _styleSheetEdited(edit) {
     var rule = this._style.parentRule;
     if (rule)
       rule.rebase(edit);
     else
       this._style.rebase(edit);
 
     this._updateMediaList();
     this._updateRuleOrigin();
   }
 
   /**
-   * @param {!Array.<!WebInspector.CSSMedia>} mediaRules
+   * @param {!Array.<!SDK.CSSMedia>} mediaRules
    */
   _createMediaList(mediaRules) {
     for (var i = mediaRules.length - 1; i >= 0; --i) {
       var media = mediaRules[i];
       // Don't display trivial non-print media types.
       if (!media.text.includes('(') && media.text !== 'print')
         continue;
       var mediaDataElement = this._mediaListElement.createChild('div', 'media');
       var mediaContainerElement = mediaDataElement.createChild('span');
       var mediaTextElement = mediaContainerElement.createChild('span', 'media-text');
       switch (media.source) {
-        case WebInspector.CSSMedia.Source.LINKED_SHEET:
-        case WebInspector.CSSMedia.Source.INLINE_SHEET:
+        case SDK.CSSMedia.Source.LINKED_SHEET:
+        case SDK.CSSMedia.Source.INLINE_SHEET:
           mediaTextElement.textContent = 'media="' + media.text + '"';
           break;
-        case WebInspector.CSSMedia.Source.MEDIA_RULE:
+        case SDK.CSSMedia.Source.MEDIA_RULE:
           var decoration = mediaContainerElement.createChild('span');
           mediaContainerElement.insertBefore(decoration, mediaTextElement);
           decoration.textContent = '@media ';
           mediaTextElement.textContent = media.text;
           if (media.styleSheetId) {
             mediaDataElement.classList.add('editable-media');
             mediaTextElement.addEventListener(
                 'click', this._handleMediaRuleClick.bind(this, media, mediaTextElement), false);
           }
           break;
-        case WebInspector.CSSMedia.Source.IMPORT_RULE:
+        case SDK.CSSMedia.Source.IMPORT_RULE:
           mediaTextElement.textContent = '@import ' + media.text;
           break;
       }
     }
   }
 
   _updateMediaList() {
     this._mediaListElement.removeChildren();
-    if (this._style.parentRule && this._style.parentRule instanceof WebInspector.CSSStyleRule)
+    if (this._style.parentRule && this._style.parentRule instanceof SDK.CSSStyleRule)
       this._createMediaList(this._style.parentRule.media);
   }
 
   /**
    * @param {string} propertyName
    * @return {boolean}
    */
   isPropertyInherited(propertyName) {
     if (this._matchedStyles.isInherited(this._style)) {
       // While rendering inherited stylesheet, reverse meaning of this property.
       // Render truly inherited properties with black, i.e. return them as non-inherited.
-      return !WebInspector.cssMetadata().isPropertyInherited(propertyName);
+      return !SDK.cssMetadata().isPropertyInherited(propertyName);
     }
     return false;
   }
 
   /**
-   * @return {?WebInspector.StylePropertiesSection}
+   * @return {?Elements.StylePropertiesSection}
    */
   nextEditableSibling() {
     var curSection = this;
     do {
       curSection = curSection.nextSibling();
     } while (curSection && !curSection.editable);
 
     if (!curSection) {
       curSection = this.firstSibling();
       while (curSection && !curSection.editable)
         curSection = curSection.nextSibling();
     }
 
     return (curSection && curSection.editable) ? curSection : null;
   }
 
   /**
-   * @return {?WebInspector.StylePropertiesSection}
+   * @return {?Elements.StylePropertiesSection}
    */
   previousEditableSibling() {
     var curSection = this;
     do {
       curSection = curSection.previousSibling();
     } while (curSection && !curSection.editable);
 
     if (!curSection) {
       curSection = this.lastSibling();
       while (curSection && !curSection.editable)
@@ skipping 32 matching lines @@
 
   _afterUpdateFinishedForTest() {
   }
 
   onpopulate() {
     var style = this._style;
     for (var property of style.leadingProperties()) {
       var isShorthand = !!style.longhandProperties(property.name).length;
       var inherited = this.isPropertyInherited(property.name);
       var overloaded = this._isPropertyOverloaded(property);
-      var item = new WebInspector.StylePropertyTreeElement(
+      var item = new Elements.StylePropertyTreeElement(
           this._parentPane, this._matchedStyles, property, isShorthand, inherited, overloaded);
       this.propertiesTreeOutline.appendChild(item);
     }
   }
 
   /**
-   * @param {!WebInspector.CSSProperty} property
+   * @param {!SDK.CSSProperty} property
    * @return {boolean}
    */
   _isPropertyOverloaded(property) {
-    return this._matchedStyles.propertyState(property) === WebInspector.CSSMatchedStyles.PropertyState.Overloaded;
+    return this._matchedStyles.propertyState(property) === SDK.CSSMatchedStyles.PropertyState.Overloaded;
   }
 
   /**
    * @return {boolean}
    */
   _updateFilter() {
     var hasMatchingChild = false;
     for (var child of this.propertiesTreeOutline.rootElement().children())
       hasMatchingChild |= child._updateFilter();
 
     var regex = this._parentPane.filterRegex();
     var hideRule = !hasMatchingChild && !!regex && !regex.test(this.element.deepTextContent());
     this.element.classList.toggle('hidden', hideRule);
     if (!hideRule && this._style.parentRule)
       this._markSelectorHighlights();
     return !hideRule;
   }
 
   _markSelectorMatches() {
     var rule = this._style.parentRule;
     if (!rule)
       return;
 
     this._mediaListElement.classList.toggle('media-matches', this._matchedStyles.mediaMatches(this._style));
 
     var selectorTexts = rule.selectors.map(selector => selector.text);
     var matchingSelectorIndexes =
-        this._matchedStyles.matchingSelectors(/** @type {!WebInspector.CSSStyleRule} */ (rule));
+        this._matchedStyles.matchingSelectors(/** @type {!SDK.CSSStyleRule} */ (rule));
     var matchingSelectors = new Array(selectorTexts.length).fill(false);
     for (var matchingIndex of matchingSelectorIndexes)
       matchingSelectors[matchingIndex] = true;
 
     var fragment = this._hoverableSelectorsMode ? this._renderHoverableSelectors(selectorTexts, matchingSelectors) :
                                                   this._renderSimplifiedSelectors(selectorTexts, matchingSelectors);
     this._selectorElement.removeChildren();
     this._selectorElement.appendChild(fragment);
     this._markSelectorHighlights();
   }
@@ skipping 75 matching lines @@
     if (this._checkWillCancelEditing() || !this.editable)
       return;
     if (event.target === this._selectorContainer) {
       this.addNewBlankProperty(0).startEditing();
       event.consume(true);
     }
   }
 
   /**
    * @param {number=} index
-   * @return {!WebInspector.StylePropertyTreeElement}
+   * @return {!Elements.StylePropertyTreeElement}
    */
   addNewBlankProperty(index) {
     var property = this._style.newBlankProperty(index);
     var item =
-        new WebInspector.StylePropertyTreeElement(this._parentPane, this._matchedStyles, property, false, false, false);
+        new Elements.StylePropertyTreeElement(this._parentPane, this._matchedStyles, property, false, false, false);
     index = property.index;
     this.propertiesTreeOutline.insertChild(item, index);
     item.listItemElement.textContent = '';
     item._newProperty = true;
     item.updateTitle();
     return item;
   }
 
   _handleEmptySpaceMouseDown() {
     this._willCauseCancelEditing = this._parentPane._isEditingStyle;
@@ skipping 22 matching lines @@
     if (event.target.classList.contains('header') || this.element.classList.contains('read-only') ||
         event.target.enclosingNodeOrSelfWithClass('media')) {
       event.consume();
       return;
     }
     this.addNewBlankProperty().startEditing();
     event.consume(true);
   }
 
   /**
-   * @param {!WebInspector.CSSMedia} media
+   * @param {!SDK.CSSMedia} media
    * @param {!Element} element
    * @param {!Event} event
    */
   _handleMediaRuleClick(media, element, event) {
-    if (WebInspector.isBeingEdited(element))
+    if (UI.isBeingEdited(element))
       return;
 
-    if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!MouseEvent} */ (event)) && this.navigable) {
+    if (UI.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!MouseEvent} */ (event)) && this.navigable) {
       var location = media.rawLocation();
       if (!location) {
         event.consume(true);
         return;
       }
-      var uiLocation = WebInspector.cssWorkspaceBinding.rawLocationToUILocation(location);
+      var uiLocation = Bindings.cssWorkspaceBinding.rawLocationToUILocation(location);
       if (uiLocation)
-        WebInspector.Revealer.reveal(uiLocation);
+        Common.Revealer.reveal(uiLocation);
       event.consume(true);
       return;
     }
 
     if (!this.editable || this._isSASSStyle())
       return;
 
-    var config = new WebInspector.InplaceEditor.Config(
+    var config = new UI.InplaceEditor.Config(
         this._editingMediaCommitted.bind(this, media), this._editingMediaCancelled.bind(this, element), undefined,
         this._editingMediaBlurHandler.bind(this));
-    WebInspector.InplaceEditor.startEditing(element, config);
+    UI.InplaceEditor.startEditing(element, config);
 
     element.getComponentSelection().setBaseAndExtent(element, 0, element, 1);
     this._parentPane.setEditingStyle(true);
     var parentMediaElement = element.enclosingNodeOrSelfWithClass('media');
     parentMediaElement.classList.add('editing-media');
 
     event.consume(true);
   }
 
   /**
@@ skipping 19 matching lines @@
   /**
    * @param {!Element} editor
    * @param {!Event} blurEvent
    * @return {boolean}
    */
   _editingMediaBlurHandler(editor, blurEvent) {
     return true;
   }
 
   /**
-   * @param {!WebInspector.CSSMedia} media
+   * @param {!SDK.CSSMedia} media
    * @param {!Element} element
    * @param {string} newContent
    * @param {string} oldContent
-   * @param {(!WebInspector.StylePropertyTreeElement.Context|undefined)} context
+   * @param {(!Elements.StylePropertyTreeElement.Context|undefined)} context
    * @param {string} moveDirection
    */
   _editingMediaCommitted(media, element, newContent, oldContent, context, moveDirection) {
     this._parentPane.setEditingStyle(false);
     this._editingMediaFinished(element);
 
     if (newContent)
       newContent = newContent.trim();
 
     /**
      * @param {boolean} success
-     * @this {WebInspector.StylePropertiesSection}
+     * @this {Elements.StylePropertiesSection}
      */
     function userCallback(success) {
       if (success) {
         this._matchedStyles.resetActiveProperties();
         this._parentPane._refreshUpdate(this);
       }
       delete this._parentPane._userOperation;
       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() {
   }
 
   /**
    * @param {!Event} event
    */
   _handleSelectorClick(event) {
-    if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!MouseEvent} */ (event)) && this.navigable &&
+    if (UI.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!MouseEvent} */ (event)) && this.navigable &&
         event.target.classList.contains('simple-selector')) {
       this._navigateToSelectorSource(event.target._selectorIndex, true);
       event.consume(true);
       return;
     }
     this._startEditingOnMouseEvent();
     event.consume(true);
   }
 
   /**
    * @param {number} index
    * @param {boolean} focus
    */
   _navigateToSelectorSource(index, focus) {
     var cssModel = this._parentPane.cssModel();
     var rule = this._style.parentRule;
     var header = cssModel.styleSheetHeaderForId(/** @type {string} */ (rule.styleSheetId));
     if (!header)
       return;
     var rawLocation =
-        new WebInspector.CSSLocation(header, rule.lineNumberInSource(index), rule.columnNumberInSource(index));
-    var uiLocation = WebInspector.cssWorkspaceBinding.rawLocationToUILocation(rawLocation);
+        new SDK.CSSLocation(header, rule.lineNumberInSource(index), rule.columnNumberInSource(index));
+    var uiLocation = Bindings.cssWorkspaceBinding.rawLocationToUILocation(rawLocation);
     if (uiLocation)
-      WebInspector.Revealer.reveal(uiLocation, !focus);
+      Common.Revealer.reveal(uiLocation, !focus);
   }
 
   _startEditingOnMouseEvent() {
     if (!this.editable || this._isSASSStyle())
       return;
 
     var rule = this._style.parentRule;
     if (!rule && !this.propertiesTreeOutline.rootElement().childCount()) {
       this.addNewBlankProperty().startEditing();
       return;
     }
 
     if (!rule)
       return;
 
     this.startEditingSelector();
   }
 
   startEditingSelector() {
     var element = this._selectorElement;
-    if (WebInspector.isBeingEdited(element))
+    if (UI.isBeingEdited(element))
       return;
 
     element.scrollIntoViewIfNeeded(false);
     element.textContent = element.textContent;  // Reset selector marks in group.
 
-    var config = new WebInspector.InplaceEditor.Config(
+    var config = new UI.InplaceEditor.Config(
         this.editingSelectorCommitted.bind(this), this.editingSelectorCancelled.bind(this));
-    WebInspector.InplaceEditor.startEditing(this._selectorElement, config);
+    UI.InplaceEditor.startEditing(this._selectorElement, config);
 
     element.getComponentSelection().setBaseAndExtent(element, 0, element, 1);
     this._parentPane.setEditingStyle(true);
     if (element.classList.contains('simple-selector'))
       this._navigateToSelectorSource(0, false);
   }
 
   /**
    * @param {string} moveDirection
    */
@@ skipping 17 matching lines @@
         return;
 
       previousSection.addNewBlankProperty().startEditing();
     }
   }
 
   /**
    * @param {!Element} element
    * @param {string} newContent
    * @param {string} oldContent
-   * @param {(!WebInspector.StylePropertyTreeElement.Context|undefined)} context
+   * @param {(!Elements.StylePropertyTreeElement.Context|undefined)} context
    * @param {string} moveDirection
    */
   editingSelectorCommitted(element, newContent, oldContent, context, moveDirection) {
     this._editingSelectorEnded();
     if (newContent)
       newContent = newContent.trim();
     if (newContent === oldContent) {
       // Revert to a trimmed version of the selector if need be.
       this._selectorElement.textContent = newContent;
       this._moveEditorFromSelector(moveDirection);
       return;
     }
     var rule = this._style.parentRule;
     if (!rule)
       return;
 
     /**
-     * @this {WebInspector.StylePropertiesSection}
+     * @this {Elements.StylePropertiesSection}
      */
     function headerTextCommitted() {
       delete this._parentPane._userOperation;
       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));
   }
 
   /**
-   * @param {!WebInspector.CSSRule} rule
+   * @param {!SDK.CSSRule} rule
    * @param {string} newContent
    * @return {!Promise}
    */
   _setHeaderText(rule, newContent) {
     /**
-     * @param {!WebInspector.CSSStyleRule} rule
+     * @param {!SDK.CSSStyleRule} rule
      * @param {boolean} success
      * @return {!Promise}
-     * @this {WebInspector.StylePropertiesSection}
+     * @this {Elements.StylePropertiesSection}
      */
     function onSelectorsUpdated(rule, success) {
       if (!success)
         return Promise.resolve();
       return this._matchedStyles.recomputeMatchingSelectors(rule).then(updateSourceRanges.bind(this, rule));
     }
 
     /**
-     * @param {!WebInspector.CSSStyleRule} rule
-     * @this {WebInspector.StylePropertiesSection}
+     * @param {!SDK.CSSStyleRule} rule
+     * @this {Elements.StylePropertiesSection}
      */
     function updateSourceRanges(rule) {
       var doesAffectSelectedNode = this._matchedStyles.matchingSelectors(rule).length > 0;
       this.propertiesTreeOutline.element.classList.toggle('no-affect', !doesAffectSelectedNode);
       this._matchedStyles.resetActiveProperties();
       this._parentPane._refreshUpdate(this);
     }
 
-    console.assert(rule instanceof WebInspector.CSSStyleRule);
+    console.assert(rule instanceof SDK.CSSStyleRule);
     var oldSelectorRange = rule.selectorRange();
     if (!oldSelectorRange)
       return Promise.resolve();
     var selectedNode = this._parentPane.node();
     return rule.setSelectorText(newContent)
-        .then(onSelectorsUpdated.bind(this, /** @type {!WebInspector.CSSStyleRule} */ (rule), oldSelectorRange));
+        .then(onSelectorsUpdated.bind(this, /** @type {!SDK.CSSStyleRule} */ (rule), oldSelectorRange));
   }
 
   _editingSelectorCommittedForTest() {
   }
 
   _updateRuleOrigin() {
     this._selectorRefElement.removeChildren();
-    this._selectorRefElement.appendChild(WebInspector.StylePropertiesSection.createRuleOriginNode(
+    this._selectorRefElement.appendChild(Elements.StylePropertiesSection.createRuleOriginNode(
         this._matchedStyles, this._parentPane._linkifier, this._style.parentRule));
   }
 
   _editingSelectorEnded() {
     this._parentPane.setEditingStyle(false);
   }
 
   editingSelectorCancelled() {
     this._editingSelectorEnded();
 
     // Mark the selectors in group if necessary.
     // This is overridden by BlankStylePropertiesSection.
     this._markSelectorMatches();
   }
 };
 
 
 /**
  * @unrestricted
  */
-WebInspector.BlankStylePropertiesSection = class extends WebInspector.StylePropertiesSection {
+Elements.BlankStylePropertiesSection = class extends Elements.StylePropertiesSection {
   /**
-   * @param {!WebInspector.StylesSidebarPane} stylesPane
-   * @param {!WebInspector.CSSMatchedStyles} matchedStyles
+   * @param {!Elements.StylesSidebarPane} stylesPane
+   * @param {!SDK.CSSMatchedStyles} matchedStyles
    * @param {string} defaultSelectorText
    * @param {string} styleSheetId
-   * @param {!WebInspector.TextRange} ruleLocation
-   * @param {!WebInspector.CSSStyleDeclaration} insertAfterStyle
+   * @param {!Common.TextRange} ruleLocation
+   * @param {!SDK.CSSStyleDeclaration} insertAfterStyle
    */
   constructor(stylesPane, matchedStyles, defaultSelectorText, styleSheetId, ruleLocation, insertAfterStyle) {
-    var cssModel = /** @type {!WebInspector.CSSModel} */ (stylesPane.cssModel());
-    var rule = WebInspector.CSSStyleRule.createDummyRule(cssModel, defaultSelectorText);
+    var cssModel = /** @type {!SDK.CSSModel} */ (stylesPane.cssModel());
+    var rule = SDK.CSSStyleRule.createDummyRule(cssModel, defaultSelectorText);
     super(stylesPane, matchedStyles, rule.style);
     this._ruleLocation = ruleLocation;
     this._styleSheetId = styleSheetId;
     this._selectorRefElement.removeChildren();
-    this._selectorRefElement.appendChild(WebInspector.StylePropertiesSection._linkifyRuleLocation(
+    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');
   }
 
   /**
-   * @return {!WebInspector.TextRange}
+   * @return {!Common.TextRange}
    */
   _actualRuleLocation() {
     var prefix = this._rulePrefix();
     var lines = prefix.split('\n');
-    var editRange = new WebInspector.TextRange(0, 0, lines.length - 1, lines.peekLast().length);
-    return this._ruleLocation.rebaseAfterTextEdit(WebInspector.TextRange.createFromLocation(0, 0), editRange);
+    var editRange = new Common.TextRange(0, 0, lines.length - 1, lines.peekLast().length);
+    return this._ruleLocation.rebaseAfterTextEdit(Common.TextRange.createFromLocation(0, 0), editRange);
   }
 
   /**
    * @return {string}
    */
   _rulePrefix() {
     return this._ruleLocation.startLine === 0 && this._ruleLocation.startColumn === 0 ? '' : '\n\n';
   }
 
   /**
    * @return {boolean}
    */
   get isBlank() {
     return !this._normal;
   }
 
   /**
    * @override
    * @param {!Element} element
    * @param {string} newContent
    * @param {string} oldContent
-   * @param {!WebInspector.StylePropertyTreeElement.Context|undefined} context
+   * @param {!Elements.StylePropertyTreeElement.Context|undefined} context
    * @param {string} moveDirection
    */
   editingSelectorCommitted(element, newContent, oldContent, context, moveDirection) {
     if (!this.isBlank) {
       super.editingSelectorCommitted(element, newContent, oldContent, context, moveDirection);
       return;
     }
 
     /**
-     * @param {?WebInspector.CSSStyleRule} newRule
+     * @param {?SDK.CSSStyleRule} newRule
      * @return {!Promise}
-     * @this {WebInspector.StylePropertiesSection}
+     * @this {Elements.StylePropertiesSection}
      */
     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 {!WebInspector.CSSStyleRule} newRule
-     * @this {WebInspector.StylePropertiesSection}
+     * @param {!SDK.CSSStyleRule} newRule
+     * @this {Elements.StylePropertiesSection}
      */
     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.
@@ skipping 23 matching lines @@
     if (!this.isBlank) {
       super.editingSelectorCancelled();
       return;
     }
 
     this._editingSelectorEnded();
     this._parentPane.removeSection(this);
   }
 
   /**
-   * @param {!WebInspector.CSSRule} newRule
+   * @param {!SDK.CSSRule} newRule
    */
   _makeNormal(newRule) {
     this.element.classList.remove('blank-section');
     this._style = newRule.style;
-    // FIXME: replace this instance by a normal WebInspector.StylePropertiesSection.
+    // FIXME: replace this instance by a normal Elements.StylePropertiesSection.
     this._normal = true;
   }
 };
 
 /**
  * @unrestricted
  */
-WebInspector.KeyframePropertiesSection = class extends WebInspector.StylePropertiesSection {
+Elements.KeyframePropertiesSection = class extends Elements.StylePropertiesSection {
   /**
-   * @param {!WebInspector.StylesSidebarPane} stylesPane
-   * @param {!WebInspector.CSSMatchedStyles} matchedStyles
-   * @param {!WebInspector.CSSStyleDeclaration} style
+   * @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';
   }
 
   /**
    * @override
    * @return {string}
    */
   _headerText() {
     return this._style.parentRule.key().text;
   }
 
   /**
    * @override
-   * @param {!WebInspector.CSSRule} rule
+   * @param {!SDK.CSSRule} rule
    * @param {string} newContent
    * @return {!Promise}
    */
   _setHeaderText(rule, newContent) {
     /**
      * @param {boolean} success
-     * @this {WebInspector.KeyframePropertiesSection}
+     * @this {Elements.KeyframePropertiesSection}
      */
     function updateSourceRanges(success) {
       if (!success)
         return;
       this._parentPane._refreshUpdate(this);
     }
 
-    console.assert(rule instanceof WebInspector.CSSKeyframeRule);
+    console.assert(rule instanceof SDK.CSSKeyframeRule);
     var oldRange = rule.key().range;
     if (!oldRange)
       return Promise.resolve();
     var selectedNode = this._parentPane.node();
     return rule.setKeyText(newContent).then(updateSourceRanges.bind(this));
   }
 
   /**
    * @override
    * @param {string} propertyName
    * @return {boolean}
    */
   isPropertyInherited(propertyName) {
     return false;
   }
 
   /**
    * @override
-   * @param {!WebInspector.CSSProperty} property
+   * @param {!SDK.CSSProperty} property
    * @return {boolean}
    */
   _isPropertyOverloaded(property) {
     return false;
   }
 
   /**
    * @override
    */
   _markSelectorHighlights() {
   }
 
   /**
    * @override
    */
   _markSelectorMatches() {
     this._selectorElement.textContent = this._style.parentRule.key().text;
   }
 
   /**
    * @override
    */
   _highlight() {
   }
 };
 
 /**
  * @unrestricted
  */
-WebInspector.StylePropertyTreeElement = class extends TreeElement {
+Elements.StylePropertyTreeElement = class extends TreeElement {
   /**
-   * @param {!WebInspector.StylesSidebarPane} stylesPane
-   * @param {!WebInspector.CSSMatchedStyles} matchedStyles
-   * @param {!WebInspector.CSSProperty} property
+   * @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 WebInspector.Throttler(0);
+    this._applyStyleThrottler = new Common.Throttler(0);
   }
 
   /**
    * @return {boolean}
    */
   _editable() {
     return this._style.styleSheetId && this._style.range;
   }
 
   /**
@@ skipping 54 matching lines @@
     }
     return matches;
   }
 
   /**
    * @param {string} text
    * @return {!Node}
    */
   _processColor(text) {
     // We can be called with valid non-color values of |text| (like 'none' from border style)
-    var color = WebInspector.Color.parse(text);
+    var color = Common.Color.parse(text);
     if (!color)
       return createTextNode(text);
 
     if (!this._editable()) {
-      var swatch = WebInspector.ColorSwatch.create();
+      var swatch = UI.ColorSwatch.create();
       swatch.setColor(color);
       return swatch;
     }
 
     var swatchPopoverHelper = this._parentPane._swatchPopoverHelper;
-    var swatch = WebInspector.ColorSwatch.create();
+    var swatch = UI.ColorSwatch.create();
     swatch.setColor(color);
-    swatch.setFormat(WebInspector.Color.detectColorFormat(swatch.color()));
-    var swatchIcon = new WebInspector.ColorSwatchPopoverIcon(this, swatchPopoverHelper, swatch);
+    swatch.setFormat(Common.Color.detectColorFormat(swatch.color()));
+    var swatchIcon = new Elements.ColorSwatchPopoverIcon(this, swatchPopoverHelper, swatch);
 
     /**
      * @param {?Array<string>} backgroundColors
      */
     function computedCallback(backgroundColors) {
       // TODO(aboxhall): distinguish between !backgroundColors (no text) and
       // !backgroundColors.length (no computed bg color)
       if (!backgroundColors || !backgroundColors.length)
         return;
       // TODO(samli): figure out what to do in the case of multiple background colors (i.e. gradients)
       var bgColorText = backgroundColors[0];
-      var bgColor = WebInspector.Color.parse(bgColorText);
+      var bgColor = Common.Color.parse(bgColorText);
       if (!bgColor)
         return;
 
       // If we have a semi-transparent background color over an unknown
       // background, draw the line for the "worst case" scenario: where
       // the unknown background is the same color as the text.
       if (bgColor.hasAlpha) {
         var blendedRGBA = [];
-        WebInspector.Color.blendColors(bgColor.rgba(), color.rgba(), blendedRGBA);
-        bgColor = new WebInspector.Color(blendedRGBA, WebInspector.Color.Format.RGBA);
+        Common.Color.blendColors(bgColor.rgba(), color.rgba(), blendedRGBA);
+        bgColor = new Common.Color(blendedRGBA, Common.Color.Format.RGBA);
       }
 
       swatchIcon.setContrastColor(bgColor);
     }
 
     if (Runtime.experiments.isEnabled('colorContrastRatio') && this.property.name === 'color' &&
         this._parentPane.cssModel() && this.node()) {
       var cssModel = this._parentPane.cssModel();
       cssModel.backgroundColorsPromise(this.node().id).then(computedCallback);
     }
 
     return swatch;
   }
 
   /**
    * @return {string}
    */
   renderedPropertyText() {
     return this.nameElement.textContent + ': ' + this.valueElement.textContent;
   }
 
   /**
    * @param {string} text
    * @return {!Node}
    */
   _processBezier(text) {
-    if (!this._editable() || !WebInspector.Geometry.CubicBezier.parse(text))
+    if (!this._editable() || !Common.Geometry.CubicBezier.parse(text))
       return createTextNode(text);
     var swatchPopoverHelper = this._parentPane._swatchPopoverHelper;
-    var swatch = WebInspector.BezierSwatch.create();
+    var swatch = UI.BezierSwatch.create();
     swatch.setBezierText(text);
-    new WebInspector.BezierPopoverIcon(this, swatchPopoverHelper, swatch);
+    new Elements.BezierPopoverIcon(this, swatchPopoverHelper, swatch);
     return swatch;
   }
 
   /**
    * @param {string} propertyValue
    * @param {string} propertyName
    * @return {!Node}
    */
   _processShadow(propertyValue, propertyName) {
     if (!this._editable())
       return createTextNode(propertyValue);
     var shadows;
     if (propertyName === 'text-shadow')
-      shadows = WebInspector.CSSShadowModel.parseTextShadow(propertyValue);
+      shadows = Common.CSSShadowModel.parseTextShadow(propertyValue);
     else
-      shadows = WebInspector.CSSShadowModel.parseBoxShadow(propertyValue);
+      shadows = Common.CSSShadowModel.parseBoxShadow(propertyValue);
     if (!shadows.length)
       return createTextNode(propertyValue);
     var container = createDocumentFragment();
     var swatchPopoverHelper = this._parentPane._swatchPopoverHelper;
     for (var i = 0; i < shadows.length; i++) {
       if (i !== 0)
         container.appendChild(createTextNode(', '));  // Add back commas and spaces between each shadow.
       // TODO(flandy): editing the property value should use the original value with all spaces.
-      var cssShadowSwatch = WebInspector.CSSShadowSwatch.create();
+      var cssShadowSwatch = UI.CSSShadowSwatch.create();
       cssShadowSwatch.setCSSShadow(shadows[i]);
-      new WebInspector.ShadowSwatchPopoverHelper(this, swatchPopoverHelper, cssShadowSwatch);
+      new Elements.ShadowSwatchPopoverHelper(this, swatchPopoverHelper, cssShadowSwatch);
       var colorSwatch = cssShadowSwatch.colorSwatch();
       if (colorSwatch)
-        new WebInspector.ColorSwatchPopoverIcon(this, swatchPopoverHelper, colorSwatch);
+        new Elements.ColorSwatchPopoverIcon(this, swatchPopoverHelper, colorSwatch);
       container.appendChild(cssShadowSwatch);
     }
     return container;
   }
 
   _updateState() {
     if (!this.listItemElement)
       return;
 
     if (this._style.isPropertyImplicit(this.name))
       this.listItemElement.classList.add('implicit');
     else
       this.listItemElement.classList.remove('implicit');
 
     var hasIgnorableError =
-        !this.property.parsedOk && WebInspector.StylesSidebarPane.ignoreErrorsForProperty(this.property);
+        !this.property.parsedOk && Elements.StylesSidebarPane.ignoreErrorsForProperty(this.property);
     if (hasIgnorableError)
       this.listItemElement.classList.add('has-ignorable-error');
     else
       this.listItemElement.classList.remove('has-ignorable-error');
 
     if (this.inherited())
       this.listItemElement.classList.add('inherited');
     else
       this.listItemElement.classList.remove('inherited');
 
     if (this.overloaded())
       this.listItemElement.classList.add('overloaded');
     else
       this.listItemElement.classList.remove('overloaded');
 
     if (this.property.disabled)
       this.listItemElement.classList.add('disabled');
     else
       this.listItemElement.classList.remove('disabled');
   }
 
   /**
-   * @return {?WebInspector.DOMNode}
+   * @return {?SDK.DOMNode}
    */
   node() {
     return this._parentPane.node();
   }
 
   /**
-   * @return {!WebInspector.StylesSidebarPane}
+   * @return {!Elements.StylesSidebarPane}
    */
   parentPane() {
     return this._parentPane;
   }
 
   /**
-   * @return {?WebInspector.StylePropertiesSection}
+   * @return {?Elements.StylePropertiesSection}
    */
   section() {
     return this.treeOutline && this.treeOutline.section;
   }
 
   _updatePane() {
     var section = this.section();
     if (section && section._parentPane)
       section._parentPane._refreshUpdate(section);
   }
 
   /**
    * @param {!Event} event
    */
   _toggleEnabled(event) {
     var disabled = !event.target.checked;
     var oldStyleRange = this._style.range;
     if (!oldStyleRange)
       return;
 
     /**
      * @param {boolean} success
-     * @this {WebInspector.StylePropertyTreeElement}
+     * @this {Elements.StylePropertyTreeElement}
      */
     function callback(success) {
       delete this._parentPane._userOperation;
 
       if (!success)
         return;
       this._matchedStyles.resetActiveProperties();
       this._updatePane();
       this.styleTextAppliedForTest();
     }
@@ skipping 14 matching lines @@
     var longhandProperties = this._style.longhandProperties(this.name);
     for (var i = 0; i < longhandProperties.length; ++i) {
       var name = longhandProperties[i].name;
       var inherited = false;
       var overloaded = false;
 
       var section = this.section();
       if (section) {
         inherited = section.isPropertyInherited(name);
         overloaded = this._matchedStyles.propertyState(longhandProperties[i]) ===
-            WebInspector.CSSMatchedStyles.PropertyState.Overloaded;
+            SDK.CSSMatchedStyles.PropertyState.Overloaded;
       }
 
-      var item = new WebInspector.StylePropertyTreeElement(
+      var item = new Elements.StylePropertyTreeElement(
           this._parentPane, this._matchedStyles, longhandProperties[i], false, inherited, overloaded);
       this.appendChild(item);
     }
   }
 
   /**
    * @override
    */
   onattach() {
     this.updateTitle();
@@ skipping 23 matching lines @@
       delete this._parentPane._mouseDownTreeElementIsValue;
     }
   }
 
   updateTitle() {
     this._updateState();
     this._expandElement = createElement('span');
     this._expandElement.className = 'expand-element';
 
     var propertyRenderer =
-        new WebInspector.StylesSidebarPropertyRenderer(this._style.parentRule, this.node(), this.name, this.value);
+        new Elements.StylesSidebarPropertyRenderer(this._style.parentRule, this.node(), this.name, this.value);
     if (this.property.parsedOk) {
       propertyRenderer.setColorHandler(this._processColor.bind(this));
       propertyRenderer.setBezierHandler(this._processBezier.bind(this));
       propertyRenderer.setShadowHandler(this._processShadow.bind(this));
     }
 
     this.listItemElement.removeChildren();
     this.nameElement = propertyRenderer.renderName();
     this.valueElement = propertyRenderer.renderValue();
     if (!this.treeOutline)
       return;
 
-    var indent = WebInspector.moduleSetting('textEditorIndent').get();
+    var indent = Common.moduleSetting('textEditorIndent').get();
     this.listItemElement.createChild('span', 'styles-clipboard-only')
         .createTextChild(indent + (this.property.disabled ? '/* ' : ''));
     this.listItemElement.appendChild(this.nameElement);
     this.listItemElement.createTextChild(': ');
     this.listItemElement.appendChild(this._expandElement);
     this.listItemElement.appendChild(this.valueElement);
     this.listItemElement.createTextChild(';');
     if (this.property.disabled)
       this.listItemElement.createChild('span', 'styles-clipboard-only').createTextChild(' */');
 
     if (!this.property.parsedOk) {
       // Avoid having longhands under an invalid shorthand.
       this.listItemElement.classList.add('not-parsed-ok');
 
       // Add a separate exclamation mark IMG element with a tooltip.
       this.listItemElement.insertBefore(
-          WebInspector.StylesSidebarPane.createExclamationMark(this.property), this.listItemElement.firstChild);
+          Elements.StylesSidebarPane.createExclamationMark(this.property), this.listItemElement.firstChild);
     }
     if (!this.property.activeInStyle())
       this.listItemElement.classList.add('inactive');
     this._updateFilter();
 
     if (this.property.parsedOk && this.section() && this.parent.root) {
       var enabledCheckboxElement = createElement('input');
       enabledCheckboxElement.className = 'enabled-button';
       enabledCheckboxElement.type = 'checkbox';
       enabledCheckboxElement.checked = !this.property.disabled;
@@ skipping 15 matching lines @@
       var section = this.section();
       if (!section || !section.editable)
         return;
 
       if (section._checkWillCancelEditing())
         return;
       section.addNewBlankProperty(this.property.index + 1).startEditing();
       return;
     }
 
-    if (WebInspector.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!MouseEvent} */ (event)) &&
+    if (UI.KeyboardShortcut.eventHasCtrlOrMeta(/** @type {!MouseEvent} */ (event)) &&
         this.section().navigable) {
       this._navigateToSource(/** @type {!Element} */ (event.target));
       return;
     }
 
     this.startEditing(/** @type {!Element} */ (event.target));
   }
 
   /**
    * @param {!Element} element
    * @param {boolean=} omitFocus
    */
   _navigateToSource(element, omitFocus) {
     if (!this.section().navigable)
       return;
     var propertyNameClicked = element === this.nameElement;
-    var uiLocation = WebInspector.cssWorkspaceBinding.propertyUILocation(this.property, propertyNameClicked);
+    var uiLocation = Bindings.cssWorkspaceBinding.propertyUILocation(this.property, propertyNameClicked);
     if (uiLocation)
-      WebInspector.Revealer.reveal(uiLocation, omitFocus);
+      Common.Revealer.reveal(uiLocation, omitFocus);
   }
 
   /**
    * @param {?Element=} selectElement
    */
   startEditing(selectElement) {
     // FIXME: we don't allow editing of longhand properties under a shorthand right now.
     if (this.parent.isShorthand)
       return;
 
     if (selectElement === this._expandElement)
       return;
 
     var section = this.section();
     if (section && !section.editable)
       return;
 
     if (selectElement)
       selectElement = selectElement.enclosingNodeOrSelfWithClass('webkit-css-property') ||
           selectElement.enclosingNodeOrSelfWithClass('value');
     if (!selectElement)
       selectElement = this.nameElement;
 
-    if (WebInspector.isBeingEdited(selectElement))
+    if (UI.isBeingEdited(selectElement))
       return;
 
     var isEditingName = selectElement === this.nameElement;
     if (!isEditingName)
       this.valueElement.textContent = restoreURLs(this.valueElement.textContent, this.value);
 
     /**
      * @param {string} fieldValue
      * @param {string} modelValue
      * @return {string}
      */
     function restoreURLs(fieldValue, modelValue) {
       const urlRegex = /\b(url\([^)]*\))/g;
       var splitFieldValue = fieldValue.split(urlRegex);
       if (splitFieldValue.length === 1)
         return fieldValue;
       var modelUrlRegex = new RegExp(urlRegex);
       for (var i = 1; i < splitFieldValue.length; i += 2) {
         var match = modelUrlRegex.exec(modelValue);
         if (match)
           splitFieldValue[i] = match[0];
       }
       return splitFieldValue.join('');
     }
 
-    /** @type {!WebInspector.StylePropertyTreeElement.Context} */
+    /** @type {!Elements.StylePropertyTreeElement.Context} */
     var context = {
       expanded: this.expanded,
       hasChildren: this.isExpandable(),
       isEditingName: isEditingName,
       previousContent: selectElement.textContent
     };
 
     // Lie about our children to prevent expanding on double click and to collapse shorthands.
     this.setExpandable(false);
 
     if (selectElement.parentElement)
       selectElement.parentElement.classList.add('child-editing');
     selectElement.textContent = selectElement.textContent;  // remove color swatch and the like
 
     /**
-     * @param {!WebInspector.StylePropertyTreeElement.Context} context
+     * @param {!Elements.StylePropertyTreeElement.Context} context
      * @param {!Event} event
-     * @this {WebInspector.StylePropertyTreeElement}
+     * @this {Elements.StylePropertyTreeElement}
      */
     function pasteHandler(context, event) {
       var data = event.clipboardData.getData('Text');
       if (!data)
         return;
       var colonIdx = data.indexOf(':');
       if (colonIdx < 0)
         return;
       var name = data.substring(0, colonIdx).trim();
       var value = data.substring(colonIdx + 1).trim();
 
       event.preventDefault();
 
       if (!('originalName' in context)) {
         context.originalName = this.nameElement.textContent;
         context.originalValue = this.valueElement.textContent;
       }
       this.property.name = name;
       this.property.value = value;
       this.nameElement.textContent = name;
       this.valueElement.textContent = value;
       this.nameElement.normalize();
       this.valueElement.normalize();
 
       this._editingCommitted(event.target.textContent, context, 'forward');
     }
 
     /**
-     * @param {!WebInspector.StylePropertyTreeElement.Context} context
+     * @param {!Elements.StylePropertyTreeElement.Context} context
      * @param {!Event} event
-     * @this {WebInspector.StylePropertyTreeElement}
+     * @this {Elements.StylePropertyTreeElement}
      */
     function blurListener(context, event) {
       var treeElement = this._parentPane._mouseDownTreeElement;
       var moveDirection = '';
       if (treeElement === this) {
         if (isEditingName && this._parentPane._mouseDownTreeElementIsValue)
           moveDirection = 'forward';
         if (!isEditingName && this._parentPane._mouseDownTreeElementIsName)
           moveDirection = 'backward';
       }
       var text = event.target.textContent;
       if (!context.isEditingName)
         text = this.value || text;
       this._editingCommitted(text, context, moveDirection);
     }
 
     this._originalPropertyText = this.property.propertyText;
 
     this._parentPane.setEditingStyle(true);
     if (selectElement.parentElement)
       selectElement.parentElement.scrollIntoViewIfNeeded(false);
 
     var applyItemCallback = !isEditingName ? this._applyFreeFlowStyleTextEdit.bind(this) : undefined;
-    var cssCompletions = isEditingName ? WebInspector.cssMetadata().allProperties() :
-                                         WebInspector.cssMetadata().propertyValues(this.nameElement.textContent);
-    this._prompt = new WebInspector.StylesSidebarPane.CSSPropertyPrompt(cssCompletions, this, isEditingName);
+    var cssCompletions = isEditingName ? SDK.cssMetadata().allProperties() :
+                                         SDK.cssMetadata().propertyValues(this.nameElement.textContent);
+    this._prompt = new Elements.StylesSidebarPane.CSSPropertyPrompt(cssCompletions, this, isEditingName);
     this._prompt.setAutocompletionTimeout(0);
     if (applyItemCallback) {
-      this._prompt.addEventListener(WebInspector.TextPrompt.Events.ItemApplied, applyItemCallback, this);
-      this._prompt.addEventListener(WebInspector.TextPrompt.Events.ItemAccepted, applyItemCallback, this);
+      this._prompt.addEventListener(UI.TextPrompt.Events.ItemApplied, applyItemCallback, this);
+      this._prompt.addEventListener(UI.TextPrompt.Events.ItemAccepted, applyItemCallback, this);
     }
     var proxyElement = this._prompt.attachAndStartEditing(selectElement, blurListener.bind(this, context));
     this._navigateToSource(selectElement, true);
 
     proxyElement.addEventListener('keydown', this._editingNameValueKeyDown.bind(this, context), false);
     proxyElement.addEventListener('keypress', this._editingNameValueKeyPress.bind(this, context), false);
     proxyElement.addEventListener('input', this._editingNameValueInput.bind(this, context), false);
     if (isEditingName)
       proxyElement.addEventListener('paste', pasteHandler.bind(this, context), false);
 
     selectElement.getComponentSelection().setBaseAndExtent(selectElement, 0, selectElement, 1);
   }
 
   /**
-   * @param {!WebInspector.StylePropertyTreeElement.Context} context
+   * @param {!Elements.StylePropertyTreeElement.Context} context
    * @param {!Event} event
    */
   _editingNameValueKeyDown(context, event) {
     if (event.handled)
       return;
 
     var result;
 
     if (isEnterKey(event)) {
       event.preventDefault();
       result = 'forward';
-    } else if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Esc.code || event.key === 'Escape')
+    } else if (event.keyCode === UI.KeyboardShortcut.Keys.Esc.code || event.key === 'Escape')
       result = 'cancel';
     else if (
         !context.isEditingName && this._newProperty &&
-        event.keyCode === WebInspector.KeyboardShortcut.Keys.Backspace.code) {
+        event.keyCode === UI.KeyboardShortcut.Keys.Backspace.code) {
       // For a new property, when Backspace is pressed at the beginning of new property value, move back to the property name.
       var selection = event.target.getComponentSelection();
       if (selection.isCollapsed && !selection.focusOffset) {
         event.preventDefault();
         result = 'backward';
       }
     } else if (event.key === 'Tab') {
       result = event.shiftKey ? 'backward' : 'forward';
       event.preventDefault();
     }
 
     if (result) {
       switch (result) {
         case 'cancel':
           this.editingCancelled(null, context);
           break;
         case 'forward':
         case 'backward':
           this._editingCommitted(event.target.textContent, context, result);
           break;
       }
 
       event.consume();
       return;
     }
   }
 
   /**
-   * @param {!WebInspector.StylePropertyTreeElement.Context} context
+   * @param {!Elements.StylePropertyTreeElement.Context} context
    * @param {!Event} event
    */
   _editingNameValueKeyPress(context, event) {
     /**
      * @param {string} text
      * @param {number} cursorPosition
      * @return {boolean}
      */
     function shouldCommitValueSemicolon(text, cursorPosition) {
       // FIXME: should this account for semicolons inside comments?
@@ skipping 17 matching lines @@
                  shouldCommitValueSemicolon(event.target.textContent, event.target.selectionLeftOffset()));
     if (isFieldInputTerminated) {
       // Enter or colon (for name)/semicolon outside of string (for value).
       event.consume(true);
       this._editingCommitted(event.target.textContent, context, 'forward');
       return;
     }
   }
 
   /**
-   * @param {!WebInspector.StylePropertyTreeElement.Context} context
+   * @param {!Elements.StylePropertyTreeElement.Context} context
    * @param {!Event} event
    */
   _editingNameValueInput(context, event) {
     // Do not live-edit "content" property of pseudo elements. crbug.com/433889
     if (!context.isEditingName && (!this._parentPane.node().pseudoType() || this.name !== 'content'))
       this._applyFreeFlowStyleTextEdit();
   }
 
   _applyFreeFlowStyleTextEdit() {
     var valueText = this._prompt.textWithCurrentSuggestion();
     if (valueText.indexOf(';') === -1)
       this.applyStyleText(this.nameElement.textContent + ': ' + valueText, false);
   }
 
   kickFreeFlowStyleEditForTest() {
     this._applyFreeFlowStyleTextEdit();
   }
 
   /**
-   * @param {!WebInspector.StylePropertyTreeElement.Context} context
+   * @param {!Elements.StylePropertyTreeElement.Context} context
    */
   editingEnded(context) {
     this._resetMouseDownElement();
 
     this.setExpandable(context.hasChildren);
     if (context.expanded)
       this.expand();
     var editedElement = context.isEditingName ? this.nameElement : this.valueElement;
     // The proxyElement has been deleted, no need to remove listener.
     if (editedElement.parentElement)
       editedElement.parentElement.classList.remove('child-editing');
 
     this._parentPane.setEditingStyle(false);
   }
 
   /**
    * @param {?Element} element
-   * @param {!WebInspector.StylePropertyTreeElement.Context} context
+   * @param {!Elements.StylePropertyTreeElement.Context} context
    */
   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;
     } else if (this._newProperty) {
       this.treeOutline.removeChild(this);
     } else {
       this.updateTitle();
     }
   }
 
   /**
    * @param {string} moveDirection
-   * @return {?WebInspector.StylePropertyTreeElement}
+   * @return {?Elements.StylePropertyTreeElement}
    */
   _findSibling(moveDirection) {
     var target = this;
     do {
       target = (moveDirection === 'forward' ? target.nextSibling : target.previousSibling);
     } while (target && target.inherited());
 
     return target;
   }
 
   /**
    * @param {string} userInput
-   * @param {!WebInspector.StylePropertyTreeElement.Context} context
+   * @param {!Elements.StylePropertyTreeElement.Context} context
    * @param {string} moveDirection
    */
   _editingCommitted(userInput, context, moveDirection) {
     this._removePrompt();
     this.editingEnded(context);
     var isEditingName = context.isEditingName;
 
     // Determine where to move to before making changes
     var createNewProperty, moveToPropertyName, moveToSelector;
     var isDataPasted = 'originalName' in context;
@@ skipping 12 matching lines @@
         createNewProperty = true;
       else if (moveDirection === 'backward')
         moveToSelector = true;
     }
 
     // Make the Changes and trigger the moveToNextCallback after updating.
     var moveToIndex = moveTo && this.treeOutline ? this.treeOutline.rootElement().indexOfChild(moveTo) : -1;
     var blankInput = userInput.isWhitespace();
     var shouldCommitNewProperty = this._newProperty &&
         (isPropertySplitPaste || moveToOther || (!moveDirection && !isEditingName) || (isEditingName && blankInput));
-    var section = /** @type {!WebInspector.StylePropertiesSection} */ (this.section());
+    var section = /** @type {!Elements.StylePropertiesSection} */ (this.section());
     if (((userInput !== context.previousContent || isDirtyViaPaste) && !this._newProperty) || shouldCommitNewProperty) {
       section._afterUpdate = moveToNextCallback.bind(this, this._newProperty, !blankInput, section);
       var propertyText;
       if (blankInput || (this._newProperty && this.valueElement.textContent.isWhitespace()))
         propertyText = '';
       else {
         if (isEditingName)
           propertyText = userInput + ': ' + this.property.value;
         else
           propertyText = this.property.name + ': ' + userInput;
       }
       this.applyStyleText(propertyText, true);
     } else {
       if (isEditingName)
         this.property.name = userInput;
       else
         this.property.value = userInput;
       if (!isDataPasted && !this._newProperty)
         this.updateTitle();
       moveToNextCallback.call(this, this._newProperty, false, section);
     }
 
     /**
      * The Callback to start editing the next/previous property/selector.
      * @param {boolean} alreadyNew
      * @param {boolean} valueChanged
-     * @param {!WebInspector.StylePropertiesSection} section
-     * @this {WebInspector.StylePropertyTreeElement}
+     * @param {!Elements.StylePropertiesSection} section
+     * @this {Elements.StylePropertyTreeElement}
      */
     function moveToNextCallback(alreadyNew, valueChanged, section) {
       if (!moveDirection)
         return;
 
       // User just tabbed through without changes.
       if (moveTo && moveTo.parent) {
         moveTo.startEditing(!isEditingName ? moveTo.nameElement : moveTo.valueElement);
         return;
       }
@@ skipping 89 matching lines @@
       this.parent.removeChild(this);
       section.afterUpdate();
       return Promise.resolve();
     }
 
     var currentNode = this._parentPane.node();
     this._parentPane._userOperation = true;
 
     /**
      * @param {boolean} success
-     * @this {WebInspector.StylePropertyTreeElement}
+     * @this {Elements.StylePropertyTreeElement}
      */
     function callback(success) {
       delete this._parentPane._userOperation;
 
       if (!success) {
         if (majorChange) {
           // It did not apply, cancel editing.
           this._revertStyleUponEditingCanceled();
         }
         this.styleTextAppliedForTest();
@@ skipping 31 matching lines @@
    * @override
    * @param {!Event} event
    * @return {boolean}
    */
   isEventWithinDisclosureTriangle(event) {
     return event.target === this._expandElement;
   }
 };
 
 /** @typedef {{expanded: boolean, hasChildren: boolean, isEditingName: boolean, previousContent: string}} */
-WebInspector.StylePropertyTreeElement.Context;
+Elements.StylePropertyTreeElement.Context;
 
 /**
  * @unrestricted
  */
-WebInspector.StylesSidebarPane.CSSPropertyPrompt = class extends WebInspector.TextPrompt {
+Elements.StylesSidebarPane.CSSPropertyPrompt = class extends UI.TextPrompt {
   /**
    * @param {!Array<string>} cssCompletions
-   * @param {!WebInspector.StylePropertyTreeElement} treeElement
+   * @param {!Elements.StylePropertyTreeElement} treeElement
    * @param {boolean} isEditingName
    */
   constructor(cssCompletions, treeElement, isEditingName) {
     // Use the same callback both for applyItemCallback and acceptItemCallback.
     super();
-    this.initialize(this._buildPropertyCompletions.bind(this), WebInspector.StyleValueDelimiters);
+    this.initialize(this._buildPropertyCompletions.bind(this), UI.StyleValueDelimiters);
     this.setSuggestBoxEnabled(true);
     this._cssCompletions = cssCompletions;
     this._treeElement = treeElement;
     this._isEditingName = isEditingName;
 
     if (!isEditingName) {
       this.disableDefaultSuggestionForEmptyInput();
 
       // If a CSS value is being edited that has a numeric or hex substring, hint that precision modifier shortcuts are available.
       if (treeElement && treeElement.valueElement) {
         var cssValueText = treeElement.valueElement.textContent;
         if (cssValueText.match(/#[\da-f]{3,6}$/i))
-          this.setTitle(WebInspector.UIString(
+          this.setTitle(Common.UIString(
               'Increment/decrement with mousewheel or up/down keys. %s: R ±1, Shift: G ±1, Alt: B ±1',
-              WebInspector.isMac() ? 'Cmd' : 'Ctrl'));
+              Host.isMac() ? 'Cmd' : 'Ctrl'));
         else if (cssValueText.match(/\d+/))
-          this.setTitle(WebInspector.UIString(
+          this.setTitle(Common.UIString(
               'Increment/decrement with mousewheel or up/down keys. %s: ±100, Shift: ±10, Alt: ±0.1',
-              WebInspector.isMac() ? 'Cmd' : 'Ctrl'));
+              Host.isMac() ? 'Cmd' : 'Ctrl'));
       }
     }
   }
 
   /**
    * @override
    * @param {!Event} event
    */
   onKeyDown(event) {
     switch (event.key) {
@@ skipping 42 matching lines @@
   }
 
   /**
    * @param {!Event} event
    * @return {boolean}
    */
   _handleNameOrValueUpDown(event) {
     /**
      * @param {string} originalValue
      * @param {string} replacementString
-     * @this {WebInspector.StylesSidebarPane.CSSPropertyPrompt}
+     * @this {Elements.StylesSidebarPane.CSSPropertyPrompt}
      */
     function finishHandler(originalValue, replacementString) {
       // Synthesize property text disregarding any comments, custom whitespace etc.
       this._treeElement.applyStyleText(
           this._treeElement.nameElement.textContent + ': ' + this._treeElement.valueElement.textContent, false);
     }
 
     /**
      * @param {string} prefix
      * @param {number} number
      * @param {string} suffix
      * @return {string}
-     * @this {WebInspector.StylesSidebarPane.CSSPropertyPrompt}
+     * @this {Elements.StylesSidebarPane.CSSPropertyPrompt}
      */
     function customNumberHandler(prefix, number, suffix) {
       if (number !== 0 && !suffix.length &&
-          WebInspector.cssMetadata().isLengthProperty(this._treeElement.property.name))
+          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 &&
-        WebInspector.handleElementValueModifications(
+        UI.handleElementValueModifications(
             event, this._treeElement.valueElement, finishHandler.bind(this), this._isValueSuggestion.bind(this),
             customNumberHandler.bind(this)))
       return true;
 
     return false;
   }
 
   /**
    * @param {string} word
    * @return {boolean}
@@ skipping 23 matching lines @@
     this._cssCompletions.forEach(filterCompletions);
     var results = prefixResults.concat(anywhereResults);
 
     if (!this._isEditingName && !results.length && query.length > 1 && '!important'.startsWith(query))
       results.push('!important');
     var userEnteredText = wordRange.toString().replace('-', '');
     if (userEnteredText && (userEnteredText === userEnteredText.toUpperCase())) {
       for (var i = 0; i < results.length; ++i)
         results[i] = results[i].toUpperCase();
     }
-    var selectedIndex = this._isEditingName ? WebInspector.cssMetadata().mostUsedProperty(prefixResults) : 0;
+    var selectedIndex = this._isEditingName ? SDK.cssMetadata().mostUsedProperty(prefixResults) : 0;
     completionsReadyCallback(results, selectedIndex);
 
     /**
      * @param {string} completion
      */
     function filterCompletions(completion) {
       var index = completion.indexOf(query);
       if (index === 0)
         prefixResults.push(completion);
       else if (index > -1)
         anywhereResults.push(completion);
     }
   }
 };
 
 /**
  * @unrestricted
  */
-WebInspector.StylesSidebarPropertyRenderer = class {
+Elements.StylesSidebarPropertyRenderer = class {
   /**
-   * @param {?WebInspector.CSSRule} rule
-   * @param {?WebInspector.DOMNode} node
+   * @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;
   }
 
@@ skipping 33 matching lines @@
    * @return {!Element}
    */
   renderValue() {
     var valueElement = createElement('span');
     valueElement.className = 'value';
     if (!this._propertyValue)
       return valueElement;
 
     if (this._shadowHandler && (this._propertyName === 'box-shadow' || this._propertyName === 'text-shadow' ||
                                 this._propertyName === '-webkit-box-shadow') &&
-        !WebInspector.CSSMetadata.VariableRegex.test(this._propertyValue)) {
+        !SDK.CSSMetadata.VariableRegex.test(this._propertyValue)) {
       valueElement.appendChild(this._shadowHandler(this._propertyValue, this._propertyName));
       valueElement.normalize();
       return valueElement;
     }
 
-    var regexes = [WebInspector.CSSMetadata.VariableRegex, WebInspector.CSSMetadata.URLRegex];
+    var regexes = [SDK.CSSMetadata.VariableRegex, SDK.CSSMetadata.URLRegex];
     var processors = [createTextNode, this._processURL.bind(this)];
-    if (this._bezierHandler && WebInspector.cssMetadata().isBezierAwareProperty(this._propertyName)) {
-      regexes.push(WebInspector.Geometry.CubicBezier.Regex);
+    if (this._bezierHandler && SDK.cssMetadata().isBezierAwareProperty(this._propertyName)) {
+      regexes.push(Common.Geometry.CubicBezier.Regex);
       processors.push(this._bezierHandler);
     }
-    if (this._colorHandler && WebInspector.cssMetadata().isColorAwareProperty(this._propertyName)) {
-      regexes.push(WebInspector.Color.Regex);
+    if (this._colorHandler && SDK.cssMetadata().isColorAwareProperty(this._propertyName)) {
+      regexes.push(Common.Color.Regex);
       processors.push(this._colorHandler);
     }
-    var results = WebInspector.TextUtils.splitStringByRegexes(this._propertyValue, regexes);
+    var results = Common.TextUtils.splitStringByRegexes(this._propertyValue, regexes);
     for (var i = 0; i < results.length; i++) {
       var result = results[i];
       var processor = result.regexIndex === -1 ? createTextNode : processors[result.regexIndex];
       valueElement.appendChild(processor(result.value));
     }
     valueElement.normalize();
     return valueElement;
   }
 
   /**
    * @param {string} text
    * @return {!Node}
    */
   _processURL(text) {
     // Strip "url(" and ")" along with whitespace.
     var url = text.substring(4, text.length - 1).trim();
     var isQuoted = /^'.*'$/.test(url) || /^".*"$/.test(url);
     if (isQuoted)
       url = url.substring(1, url.length - 1);
     var container = createDocumentFragment();
     container.createTextChild('url(');
     var hrefUrl = null;
     if (this._rule && this._rule.resourceURL())
-      hrefUrl = WebInspector.ParsedURL.completeURL(this._rule.resourceURL(), url);
+      hrefUrl = Common.ParsedURL.completeURL(this._rule.resourceURL(), url);
     else if (this._node)
       hrefUrl = this._node.resolveURL(url);
-    var hasResource = hrefUrl && !!WebInspector.resourceForURL(hrefUrl);
-    // FIXME: WebInspector.linkifyURLAsNode() should really use baseURI.
-    container.appendChild(WebInspector.linkifyURLAsNode(hrefUrl || url, url, undefined, !hasResource));
+    var hasResource = hrefUrl && !!Bindings.resourceForURL(hrefUrl);
+    // FIXME: UI.linkifyURLAsNode() should really use baseURI.
+    container.appendChild(UI.linkifyURLAsNode(hrefUrl || url, url, undefined, !hasResource));
     container.createTextChild(')');
     return container;
   }
 };
 
 /**
- * @implements {WebInspector.ToolbarItem.Provider}
+ * @implements {UI.ToolbarItem.Provider}
  * @unrestricted
  */
-WebInspector.StylesSidebarPane.ButtonProvider = class {
+Elements.StylesSidebarPane.ButtonProvider = class {
   constructor() {
-    this._button = new WebInspector.ToolbarButton(WebInspector.UIString('New Style Rule'), 'largeicon-add');
+    this._button = new UI.ToolbarButton(Common.UIString('New Style Rule'), 'largeicon-add');
     this._button.addEventListener('click', this._clicked, this);
-    var longclickTriangle = WebInspector.Icon.create('largeicon-longclick-triangle', 'long-click-glyph');
+    var longclickTriangle = UI.Icon.create('largeicon-longclick-triangle', 'long-click-glyph');
     this._button.element.appendChild(longclickTriangle);
 
-    new WebInspector.LongClickController(this._button.element, this._longClicked.bind(this));
-    WebInspector.context.addFlavorChangeListener(WebInspector.DOMNode, onNodeChanged.bind(this));
+    new UI.LongClickController(this._button.element, this._longClicked.bind(this));
+    UI.context.addFlavorChangeListener(SDK.DOMNode, onNodeChanged.bind(this));
     onNodeChanged.call(this);
 
     /**
-     * @this {WebInspector.StylesSidebarPane.ButtonProvider}
+     * @this {Elements.StylesSidebarPane.ButtonProvider}
      */
     function onNodeChanged() {
-      var node = WebInspector.context.flavor(WebInspector.DOMNode);
+      var node = UI.context.flavor(SDK.DOMNode);
       node = node ? node.enclosingElementOrSelf() : null;
       this._button.setEnabled(!!node);
     }
   }
 
   _clicked() {
-    WebInspector.StylesSidebarPane._instance._createNewRuleInViaInspectorStyleSheet();
+    Elements.StylesSidebarPane._instance._createNewRuleInViaInspectorStyleSheet();
   }
 
   /**
    * @param {!Event} e
    */
   _longClicked(e) {
-    WebInspector.StylesSidebarPane._instance._onAddButtonLongClick(e);
+    Elements.StylesSidebarPane._instance._onAddButtonLongClick(e);
   }
 
   /**
    * @override
-   * @return {!WebInspector.ToolbarItem}
+   * @return {!UI.ToolbarItem}
    */
   item() {
     return this._button;
   }
 };