DevTools: rename WebInspector into modules.

third_party/WebKit/Source/devtools/front_end/components/Spectrum.js

Index: third_party/WebKit/Source/devtools/front_end/components/Spectrum.js
diff --git a/third_party/WebKit/Source/devtools/front_end/components/Spectrum.js b/third_party/WebKit/Source/devtools/front_end/components/Spectrum.js
index e5c522163b2f15aa64b2351df9607e6291eb9179..ee5e40b0dd739739ec72e819a50abc8bfeb39324 100644
--- a/third_party/WebKit/Source/devtools/front_end/components/Spectrum.js
+++ b/third_party/WebKit/Source/devtools/front_end/components/Spectrum.js
@@ -29,7 +29,7 @@
 /**
  * @unrestricted
  */
-WebInspector.Spectrum = class extends WebInspector.VBox {
+Components.Spectrum = class extends UI.VBox {
   constructor() {
     /**
      * @param {!Element} parentElement
@@ -55,9 +55,9 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
     var contrastRatioSVG = this._colorElement.createSVGChild('svg', 'spectrum-contrast-container fill');
     this._contrastRatioLine = contrastRatioSVG.createSVGChild('path', 'spectrum-contrast-line');
 
-    var toolbar = new WebInspector.Toolbar('spectrum-eye-dropper', this.contentElement);
+    var toolbar = new UI.Toolbar('spectrum-eye-dropper', this.contentElement);
     this._colorPickerButton =
-        new WebInspector.ToolbarToggle(WebInspector.UIString('Toggle color picker'), 'largeicon-eyedropper');
+        new UI.ToolbarToggle(Common.UIString('Toggle color picker'), 'largeicon-eyedropper');
     this._colorPickerButton.setToggled(true);
     this._colorPickerButton.addEventListener('click', this._toggleColorPicker.bind(this, undefined));
     toolbar.appendToolbarItem(this._colorPickerButton);
@@ -100,48 +100,48 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
     var label = this._hexContainer.createChild('div', 'spectrum-text-label');
     label.textContent = 'HEX';
 
-    WebInspector.installDragHandle(
+    UI.installDragHandle(
         this._hueElement, dragStart.bind(this, positionHue.bind(this)), positionHue.bind(this), null, 'default');
-    WebInspector.installDragHandle(
+    UI.installDragHandle(
         this._alphaElement, dragStart.bind(this, positionAlpha.bind(this)), positionAlpha.bind(this), null, 'default');
-    WebInspector.installDragHandle(
+    UI.installDragHandle(
         this._colorElement, dragStart.bind(this, positionColor.bind(this)), positionColor.bind(this), null, 'default');
 
     this.element.classList.add('palettes-enabled');
-    /** @type {!Map.<string, !WebInspector.Spectrum.Palette>} */
+    /** @type {!Map.<string, !Components.Spectrum.Palette>} */
     this._palettes = new Map();
     this._palettePanel = this.contentElement.createChild('div', 'palette-panel');
     this._palettePanelShowing = false;
     this._paletteContainer = this.contentElement.createChild('div', 'spectrum-palette');
     this._paletteContainer.addEventListener('contextmenu', this._showPaletteColorContextMenu.bind(this, -1));
     this._shadesContainer = this.contentElement.createChild('div', 'palette-color-shades hidden');
-    WebInspector.installDragHandle(
+    UI.installDragHandle(
         this._paletteContainer, this._paletteDragStart.bind(this), this._paletteDrag.bind(this),
         this._paletteDragEnd.bind(this), 'default');
     var paletteSwitcher = this.contentElement.createChild('div', 'spectrum-palette-switcher spectrum-switcher');
     appendSwitcherIcon(paletteSwitcher);
     paletteSwitcher.addEventListener('click', this._togglePalettePanel.bind(this, true));
 
-    this._deleteIconToolbar = new WebInspector.Toolbar('delete-color-toolbar');
-    this._deleteButton = new WebInspector.ToolbarButton('', 'largeicon-trash-bin');
+    this._deleteIconToolbar = new UI.Toolbar('delete-color-toolbar');
+    this._deleteButton = new UI.ToolbarButton('', 'largeicon-trash-bin');
     this._deleteIconToolbar.appendToolbarItem(this._deleteButton);
 
     var overlay = this.contentElement.createChild('div', 'spectrum-overlay fill');
     overlay.addEventListener('click', this._togglePalettePanel.bind(this, false));
 
-    this._addColorToolbar = new WebInspector.Toolbar('add-color-toolbar');
-    var addColorButton = new WebInspector.ToolbarButton(WebInspector.UIString('Add to palette'), 'largeicon-add');
+    this._addColorToolbar = new UI.Toolbar('add-color-toolbar');
+    var addColorButton = new UI.ToolbarButton(Common.UIString('Add to palette'), 'largeicon-add');
     addColorButton.addEventListener('click', this._addColorToCustomPalette.bind(this));
     this._addColorToolbar.appendToolbarItem(addColorButton);
 
     this._loadPalettes();
-    new WebInspector.Spectrum.PaletteGenerator(this._generatedPaletteLoaded.bind(this));
+    new Components.Spectrum.PaletteGenerator(this._generatedPaletteLoaded.bind(this));
 
     /**
      * @param {function(!Event)} callback
      * @param {!Event} event
      * @return {boolean}
-     * @this {WebInspector.Spectrum}
+     * @this {Components.Spectrum}
      */
     function dragStart(callback, event) {
       this._hueAlphaLeft = this._hueElement.totalOffsetLeft();
@@ -152,48 +152,48 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
 
     /**
      * @param {!Event} event
-     * @this {WebInspector.Spectrum}
+     * @this {Components.Spectrum}
      */
     function positionHue(event) {
       var hsva = this._hsv.slice();
       hsva[0] = Number.constrain(1 - (event.x - this._hueAlphaLeft) / this._hueAlphaWidth, 0, 1);
-      this._innerSetColor(hsva, '', undefined, WebInspector.Spectrum._ChangeSource.Other);
+      this._innerSetColor(hsva, '', undefined, Components.Spectrum._ChangeSource.Other);
     }
 
     /**
      * @param {!Event} event
-     * @this {WebInspector.Spectrum}
+     * @this {Components.Spectrum}
      */
     function positionAlpha(event) {
       var newAlpha = Math.round((event.x - this._hueAlphaLeft) / this._hueAlphaWidth * 100) / 100;
       var hsva = this._hsv.slice();
       hsva[3] = Number.constrain(newAlpha, 0, 1);
       var colorFormat = undefined;
-      if (hsva[3] !== 1 && (this._colorFormat === WebInspector.Color.Format.ShortHEX ||
-                            this._colorFormat === WebInspector.Color.Format.HEX ||
-                            this._colorFormat === WebInspector.Color.Format.Nickname))
-        colorFormat = WebInspector.Color.Format.RGB;
-      this._innerSetColor(hsva, '', colorFormat, WebInspector.Spectrum._ChangeSource.Other);
+      if (hsva[3] !== 1 && (this._colorFormat === Common.Color.Format.ShortHEX ||
+                            this._colorFormat === Common.Color.Format.HEX ||
+                            this._colorFormat === Common.Color.Format.Nickname))
+        colorFormat = Common.Color.Format.RGB;
+      this._innerSetColor(hsva, '', colorFormat, Components.Spectrum._ChangeSource.Other);
     }
 
     /**
      * @param {!Event} event
-     * @this {WebInspector.Spectrum}
+     * @this {Components.Spectrum}
      */
     function positionColor(event) {
       var hsva = this._hsv.slice();
       hsva[1] = Number.constrain((event.x - this._colorOffset.left) / this.dragWidth, 0, 1);
       hsva[2] = Number.constrain(1 - (event.y - this._colorOffset.top) / this.dragHeight, 0, 1);
-      this._innerSetColor(hsva, '', undefined, WebInspector.Spectrum._ChangeSource.Other);
+      this._innerSetColor(hsva, '', undefined, Components.Spectrum._ChangeSource.Other);
     }
   }
 
   _updatePalettePanel() {
     this._palettePanel.removeChildren();
     var title = this._palettePanel.createChild('div', 'palette-title');
-    title.textContent = WebInspector.UIString('Color Palettes');
-    var toolbar = new WebInspector.Toolbar('', this._palettePanel);
-    var closeButton = new WebInspector.ToolbarButton('Return to color picker', 'largeicon-delete');
+    title.textContent = Common.UIString('Color Palettes');
+    var toolbar = new UI.Toolbar('', this._palettePanel);
+    var closeButton = new UI.ToolbarButton('Return to color picker', 'largeicon-delete');
     closeButton.addEventListener('click', this._togglePalettePanel.bind(this, false));
     toolbar.appendToolbarItem(closeButton);
     for (var palette of this._palettes.values())
@@ -233,7 +233,7 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
   }
 
   /**
-   * @param {!WebInspector.Spectrum.Palette} palette
+   * @param {!Components.Spectrum.Palette} palette
    * @param {boolean} animate
    * @param {!Event=} event
    */
@@ -249,14 +249,14 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
         colorElement.__mutable = true;
         colorElement.__color = palette.colors[i];
         colorElement.addEventListener('contextmenu', this._showPaletteColorContextMenu.bind(this, i));
-      } else if (palette === WebInspector.Spectrum.MaterialPalette) {
+      } else if (palette === Components.Spectrum.MaterialPalette) {
         colorElement.classList.add('has-material-shades');
         var shadow = colorElement.createChild('div', 'spectrum-palette-color spectrum-palette-color-shadow');
         shadow.style.background = palette.colors[i];
         shadow = colorElement.createChild('div', 'spectrum-palette-color spectrum-palette-color-shadow');
         shadow.style.background = palette.colors[i];
-        colorElement.title = WebInspector.UIString(palette.colors[i] + '. Long-click to show alternate shades.');
-        new WebInspector.LongClickController(
+        colorElement.title = Common.UIString(palette.colors[i] + '. Long-click to show alternate shades.');
+        new UI.LongClickController(
             colorElement, this._showLightnessShades.bind(this, colorElement, palette.colors[i]));
       }
       this._paletteContainer.appendChild(colorElement);
@@ -286,7 +286,7 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
   _showLightnessShades(colorElement, colorText, event) {
     /**
      * @param {!Element} element
-     * @this {!WebInspector.Spectrum}
+     * @this {!Components.Spectrum}
      */
     function closeLightnessShades(element) {
       this._shadesContainer.classList.add('hidden');
@@ -307,7 +307,7 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
     this._shadesContainer.style.left = colorElement.offsetLeft + 'px';
     colorElement.classList.add('spectrum-shades-shown');
 
-    var shades = WebInspector.Spectrum.MaterialPaletteShades[colorText];
+    var shades = Components.Spectrum.MaterialPaletteShades[colorText];
     for (var i = shades.length - 1; i >= 0; i--) {
       var shadeElement = this._createPaletteColor(shades[i], i * 200 / shades.length + 100);
       shadeElement.addEventListener('mousedown', this._paletteColorSelected.bind(this, shades[i], false));
@@ -327,10 +327,10 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
     var localX = e.pageX - this._paletteContainer.totalOffsetLeft();
     var localY = e.pageY - this._paletteContainer.totalOffsetTop();
     var col =
-        Math.min(localX / WebInspector.Spectrum._colorChipSize | 0, WebInspector.Spectrum._itemsPerPaletteRow - 1);
-    var row = (localY / WebInspector.Spectrum._colorChipSize) | 0;
+        Math.min(localX / Components.Spectrum._colorChipSize | 0, Components.Spectrum._itemsPerPaletteRow - 1);
+    var row = (localY / Components.Spectrum._colorChipSize) | 0;
     return Math.min(
-        row * WebInspector.Spectrum._itemsPerPaletteRow + col, this._customPaletteSetting.get().colors.length - 1);
+        row * Components.Spectrum._itemsPerPaletteRow + col, this._customPaletteSetting.get().colors.length - 1);
   }
 
   /**
@@ -353,9 +353,9 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
     var index = this._slotIndexForEvent(e);
     this._dragElement = element;
     this._dragHotSpotX =
-        e.pageX - (index % WebInspector.Spectrum._itemsPerPaletteRow) * WebInspector.Spectrum._colorChipSize;
+        e.pageX - (index % Components.Spectrum._itemsPerPaletteRow) * Components.Spectrum._colorChipSize;
     this._dragHotSpotY =
-        e.pageY - (index / WebInspector.Spectrum._itemsPerPaletteRow | 0) * WebInspector.Spectrum._colorChipSize;
+        e.pageY - (index / Components.Spectrum._itemsPerPaletteRow | 0) * Components.Spectrum._colorChipSize;
     return true;
   }
 
@@ -367,9 +367,9 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
       return;
     var newIndex = this._slotIndexForEvent(e);
     var offsetX =
-        e.pageX - (newIndex % WebInspector.Spectrum._itemsPerPaletteRow) * WebInspector.Spectrum._colorChipSize;
+        e.pageX - (newIndex % Components.Spectrum._itemsPerPaletteRow) * Components.Spectrum._colorChipSize;
     var offsetY =
-        e.pageY - (newIndex / WebInspector.Spectrum._itemsPerPaletteRow | 0) * WebInspector.Spectrum._colorChipSize;
+        e.pageY - (newIndex / Components.Spectrum._itemsPerPaletteRow | 0) * Components.Spectrum._colorChipSize;
 
     var isDeleting = this._isDraggingToBin(e);
     this._deleteIconToolbar.element.classList.add('dragging');
@@ -429,21 +429,21 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
   }
 
   _loadPalettes() {
-    this._palettes.set(WebInspector.Spectrum.MaterialPalette.title, WebInspector.Spectrum.MaterialPalette);
-    /** @type {!WebInspector.Spectrum.Palette} */
+    this._palettes.set(Components.Spectrum.MaterialPalette.title, Components.Spectrum.MaterialPalette);
+    /** @type {!Components.Spectrum.Palette} */
     var defaultCustomPalette = {title: 'Custom', colors: [], mutable: true};
-    this._customPaletteSetting = WebInspector.settings.createSetting('customColorPalette', defaultCustomPalette);
+    this._customPaletteSetting = Common.settings.createSetting('customColorPalette', defaultCustomPalette);
     this._palettes.set(this._customPaletteSetting.get().title, this._customPaletteSetting.get());
 
     this._selectedColorPalette =
-        WebInspector.settings.createSetting('selectedColorPalette', WebInspector.Spectrum.GeneratedPaletteTitle);
+        Common.settings.createSetting('selectedColorPalette', Components.Spectrum.GeneratedPaletteTitle);
     var palette = this._palettes.get(this._selectedColorPalette.get());
     if (palette)
       this._showPalette(palette, true);
   }
 
   /**
-   * @param {!WebInspector.Spectrum.Palette} generatedPalette
+   * @param {!Components.Spectrum.Palette} generatedPalette
    */
   _generatedPaletteLoaded(generatedPalette) {
     if (generatedPalette.colors.length)
@@ -451,14 +451,14 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
     if (this._selectedColorPalette.get() !== generatedPalette.title) {
       return;
     } else if (!generatedPalette.colors.length) {
-      this._paletteSelected(WebInspector.Spectrum.MaterialPalette);
+      this._paletteSelected(Components.Spectrum.MaterialPalette);
       return;
     }
     this._showPalette(generatedPalette, true);
   }
 
   /**
-   * @param {!WebInspector.Spectrum.Palette} palette
+   * @param {!Components.Spectrum.Palette} palette
    * @return {!Element}
    */
   _createPreviewPaletteElement(palette) {
@@ -475,7 +475,7 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
   }
 
   /**
-   * @param {!WebInspector.Spectrum.Palette} palette
+   * @param {!Components.Spectrum.Palette} palette
    */
   _paletteSelected(palette) {
     this._selectedColorPalette.set(palette.title);
@@ -489,7 +489,7 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
     var numColors = palette.colors.length;
     if (palette === this._customPaletteSetting.get())
       numColors++;
-    var rowsNeeded = Math.max(1, Math.ceil(numColors / WebInspector.Spectrum._itemsPerPaletteRow));
+    var rowsNeeded = Math.max(1, Math.ceil(numColors / Components.Spectrum._itemsPerPaletteRow));
     if (this._numPaletteRowsShown === rowsNeeded)
       return;
     this._numPaletteRowsShown = rowsNeeded;
@@ -497,7 +497,7 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
     var paletteMargin = 12;
     var paletteTop = 235;
     this.element.style.height = (paletteTop + paletteMargin + (paletteColorHeight + paletteMargin) * rowsNeeded) + 'px';
-    this.dispatchEventToListeners(WebInspector.Spectrum.Events.SizeChanged);
+    this.dispatchEventToListeners(Components.Spectrum.Events.SizeChanged);
   }
 
   /**
@@ -505,12 +505,12 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
    * @param {boolean} matchUserFormat
    */
   _paletteColorSelected(colorText, matchUserFormat) {
-    var color = WebInspector.Color.parse(colorText);
+    var color = Common.Color.parse(colorText);
     if (!color)
       return;
     this._innerSetColor(
         color.hsva(), colorText, matchUserFormat ? this._colorFormat : color.format(),
-        WebInspector.Spectrum._ChangeSource.Other);
+        Components.Spectrum._ChangeSource.Other);
   }
 
   _addColorToCustomPalette() {
@@ -527,14 +527,14 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
   _showPaletteColorContextMenu(colorIndex, event) {
     if (!this._paletteContainerMutable)
       return;
-    var contextMenu = new WebInspector.ContextMenu(event);
+    var contextMenu = new UI.ContextMenu(event);
     if (colorIndex !== -1) {
       contextMenu.appendItem(
-          WebInspector.UIString('Remove color'), this._deletePaletteColors.bind(this, colorIndex, false));
+          Common.UIString('Remove color'), this._deletePaletteColors.bind(this, colorIndex, false));
       contextMenu.appendItem(
-          WebInspector.UIString('Remove all to the right'), this._deletePaletteColors.bind(this, colorIndex, true));
+          Common.UIString('Remove all to the right'), this._deletePaletteColors.bind(this, colorIndex, true));
     }
-    contextMenu.appendItem(WebInspector.UIString('Clear palette'), this._deletePaletteColors.bind(this, -1, true));
+    contextMenu.appendItem(Common.UIString('Clear palette'), this._deletePaletteColors.bind(this, -1, true));
     contextMenu.show();
   }
 
@@ -553,12 +553,12 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
   }
 
   /**
-   * @param {!WebInspector.Color} color
+   * @param {!Common.Color} color
    * @param {string} colorFormat
    */
   setColor(color, colorFormat) {
     this._originalFormat = colorFormat;
-    this._innerSetColor(color.hsva(), '', colorFormat, WebInspector.Spectrum._ChangeSource.Model);
+    this._innerSetColor(color.hsva(), '', colorFormat, Components.Spectrum._ChangeSource.Model);
   }
 
   /**
@@ -573,25 +573,25 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
     if (colorString !== undefined)
       this._colorString = colorString;
     if (colorFormat !== undefined) {
-      console.assert(colorFormat !== WebInspector.Color.Format.Original, 'Spectrum\'s color format cannot be Original');
-      if (colorFormat === WebInspector.Color.Format.RGBA)
-        colorFormat = WebInspector.Color.Format.RGB;
-      else if (colorFormat === WebInspector.Color.Format.HSLA)
-        colorFormat = WebInspector.Color.Format.HSL;
+      console.assert(colorFormat !== Common.Color.Format.Original, 'Spectrum\'s color format cannot be Original');
+      if (colorFormat === Common.Color.Format.RGBA)
+        colorFormat = Common.Color.Format.RGB;
+      else if (colorFormat === Common.Color.Format.HSLA)
+        colorFormat = Common.Color.Format.HSL;
       this._colorFormat = colorFormat;
     }
 
     this._updateHelperLocations();
     this._updateUI();
 
-    if (changeSource !== WebInspector.Spectrum._ChangeSource.Input)
+    if (changeSource !== Components.Spectrum._ChangeSource.Input)
       this._updateInput();
-    if (changeSource !== WebInspector.Spectrum._ChangeSource.Model)
-      this.dispatchEventToListeners(WebInspector.Spectrum.Events.ColorChanged, this.colorString());
+    if (changeSource !== Components.Spectrum._ChangeSource.Model)
+      this.dispatchEventToListeners(Components.Spectrum.Events.ColorChanged, this.colorString());
   }
 
   /**
-   * @param {!WebInspector.Color} color
+   * @param {!Common.Color} color
    */
   setContrastColor(color) {
     this._contrastColor = color;
@@ -599,10 +599,10 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
   }
 
   /**
-   * @return {!WebInspector.Color}
+   * @return {!Common.Color}
    */
   _color() {
-    return WebInspector.Color.fromHSVA(this._hsv);
+    return Common.Color.fromHSVA(this._hsv);
   }
 
   /**
@@ -611,7 +611,7 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
   colorString() {
     if (this._colorString)
       return this._colorString;
-    var cf = WebInspector.Color.Format;
+    var cf = Common.Color.Format;
     var color = this._color();
     var colorString = color.asString(this._colorFormat);
     if (colorString)
@@ -655,7 +655,7 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
   }
 
   _updateInput() {
-    var cf = WebInspector.Color.Format;
+    var cf = Common.Color.Format;
     if (this._colorFormat === cf.HEX || this._colorFormat === cf.ShortHEX || this._colorFormat === cf.Nickname) {
       this._hexContainer.hidden = false;
       this._displayContainer.hidden = true;
@@ -696,21 +696,21 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
     /** const */ var A = 3;
 
     var fgRGBA = [];
-    WebInspector.Color.hsva2rgba(this._hsv, fgRGBA);
-    var fgLuminance = WebInspector.Color.luminance(fgRGBA);
+    Common.Color.hsva2rgba(this._hsv, fgRGBA);
+    var fgLuminance = Common.Color.luminance(fgRGBA);
     var bgRGBA = this._contrastColor.rgba();
-    var bgLuminance = WebInspector.Color.luminance(bgRGBA);
+    var bgLuminance = Common.Color.luminance(bgRGBA);
     var fgIsLighter = fgLuminance > bgLuminance;
-    var desiredLuminance = WebInspector.Color.desiredLuminance(bgLuminance, requiredContrast, fgIsLighter);
+    var desiredLuminance = Common.Color.desiredLuminance(bgLuminance, requiredContrast, fgIsLighter);
 
     var lastV = this._hsv[V];
     var currentSlope = 0;
     var candidateHSVA = [this._hsv[H], 0, 0, this._hsv[A]];
     var pathBuilder = [];
     var candidateRGBA = [];
-    WebInspector.Color.hsva2rgba(candidateHSVA, candidateRGBA);
+    Common.Color.hsva2rgba(candidateHSVA, candidateRGBA);
     var blendedRGBA = [];
-    WebInspector.Color.blendColors(candidateRGBA, bgRGBA, blendedRGBA);
+    Common.Color.blendColors(candidateRGBA, bgRGBA, blendedRGBA);
 
     /**
      * Approach the desired contrast ratio by modifying the given component
@@ -723,9 +723,9 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
     function approach(index, x, onAxis) {
       while (0 <= x && x <= 1) {
         candidateHSVA[index] = x;
-        WebInspector.Color.hsva2rgba(candidateHSVA, candidateRGBA);
-        WebInspector.Color.blendColors(candidateRGBA, bgRGBA, blendedRGBA);
-        var fgLuminance = WebInspector.Color.luminance(blendedRGBA);
+        Common.Color.hsva2rgba(candidateHSVA, candidateRGBA);
+        Common.Color.blendColors(candidateRGBA, bgRGBA, blendedRGBA);
+        var fgLuminance = Common.Color.luminance(blendedRGBA);
         var dLuminance = fgLuminance - desiredLuminance;
 
         if (Math.abs(dLuminance) < (onAxis ? epsilon / 10 : epsilon))
@@ -766,31 +766,31 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
   }
 
   _updateUI() {
-    var h = WebInspector.Color.fromHSVA([this._hsv[0], 1, 1, 1]);
-    this._colorElement.style.backgroundColor = /** @type {string} */ (h.asString(WebInspector.Color.Format.RGB));
+    var h = Common.Color.fromHSVA([this._hsv[0], 1, 1, 1]);
+    this._colorElement.style.backgroundColor = /** @type {string} */ (h.asString(Common.Color.Format.RGB));
     if (Runtime.experiments.isEnabled('colorContrastRatio')) {
       // TODO(samli): Determine size of text and switch between AA/AAA ratings.
       this._drawContrastRatioLine(4.5);
     }
     this._swatchInnerElement.style.backgroundColor =
-        /** @type {string} */ (this._color().asString(WebInspector.Color.Format.RGBA));
+        /** @type {string} */ (this._color().asString(Common.Color.Format.RGBA));
     // Show border if the swatch is white.
     this._swatchInnerElement.classList.toggle('swatch-inner-white', this._color().hsla()[2] > 0.9);
     this._colorDragElement.style.backgroundColor =
-        /** @type {string} */ (this._color().asString(WebInspector.Color.Format.RGBA));
-    var noAlpha = WebInspector.Color.fromHSVA(this._hsv.slice(0, 3).concat(1));
+        /** @type {string} */ (this._color().asString(Common.Color.Format.RGBA));
+    var noAlpha = Common.Color.fromHSVA(this._hsv.slice(0, 3).concat(1));
     this._alphaElementBackground.style.backgroundImage =
-        String.sprintf('linear-gradient(to right, rgba(0,0,0,0), %s)', noAlpha.asString(WebInspector.Color.Format.RGB));
+        String.sprintf('linear-gradient(to right, rgba(0,0,0,0), %s)', noAlpha.asString(Common.Color.Format.RGB));
   }
 
   _formatViewSwitch() {
-    var cf = WebInspector.Color.Format;
+    var cf = Common.Color.Format;
     var format = cf.RGB;
     if (this._colorFormat === cf.RGB)
       format = cf.HSL;
     else if (this._colorFormat === cf.HSL && !this._color().hasAlpha())
       format = this._originalFormat === cf.ShortHEX ? cf.ShortHEX : cf.HEX;
-    this._innerSetColor(undefined, '', format, WebInspector.Spectrum._ChangeSource.Other);
+    this._innerSetColor(undefined, '', format, Components.Spectrum._ChangeSource.Other);
   }
 
   /**
@@ -806,7 +806,7 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
     }
 
     var inputElement = /** @type {!Element} */ (event.currentTarget);
-    var newValue = WebInspector.createReplacementString(inputElement.value, event);
+    var newValue = UI.createReplacementString(inputElement.value, event);
     if (newValue) {
       inputElement.value = newValue;
       inputElement.selectionStart = 0;
@@ -814,7 +814,7 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
       event.consume(true);
     }
 
-    const cf = WebInspector.Color.Format;
+    const cf = Common.Color.Format;
     var colorString;
     if (this._colorFormat === cf.HEX || this._colorFormat === cf.ShortHEX) {
       colorString = this._hexValue.value;
@@ -824,13 +824,13 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
       colorString = String.sprintf('%s(%s)', format, values);
     }
 
-    var color = WebInspector.Color.parse(colorString);
+    var color = Common.Color.parse(colorString);
     if (!color)
       return;
     var hsv = color.hsva();
     if (this._colorFormat === cf.HEX || this._colorFormat === cf.ShortHEX)
       this._colorFormat = color.canBeShortHex() ? cf.ShortHEX : cf.HEX;
-    this._innerSetColor(hsv, colorString, undefined, WebInspector.Spectrum._ChangeSource.Input);
+    this._innerSetColor(hsv, colorString, undefined, Components.Spectrum._ChangeSource.Input);
   }
 
   /**
@@ -842,10 +842,10 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
     this.dragWidth = this._colorElement.offsetWidth;
     this.dragHeight = this._colorElement.offsetHeight;
     this._colorDragElementHeight = this._colorDragElement.offsetHeight / 2;
-    this._innerSetColor(undefined, undefined, undefined, WebInspector.Spectrum._ChangeSource.Model);
+    this._innerSetColor(undefined, undefined, undefined, Components.Spectrum._ChangeSource.Model);
     this._toggleColorPicker(true);
-    WebInspector.targetManager.addModelListener(
-        WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.Events.ColorPicked, this._colorPicked, this);
+    SDK.targetManager.addModelListener(
+        SDK.ResourceTreeModel, SDK.ResourceTreeModel.Events.ColorPicked, this._colorPicked, this);
   }
 
   /**
@@ -853,67 +853,67 @@ WebInspector.Spectrum = class extends WebInspector.VBox {
    */
   willHide() {
     this._toggleColorPicker(false);
-    WebInspector.targetManager.removeModelListener(
-        WebInspector.ResourceTreeModel, WebInspector.ResourceTreeModel.Events.ColorPicked, this._colorPicked, this);
+    SDK.targetManager.removeModelListener(
+        SDK.ResourceTreeModel, SDK.ResourceTreeModel.Events.ColorPicked, this._colorPicked, this);
   }
 
   /**
    * @param {boolean=} enabled
-   * @param {!WebInspector.Event=} event
+   * @param {!Common.Event=} event
    */
   _toggleColorPicker(enabled, event) {
     if (enabled === undefined)
       enabled = !this._colorPickerButton.toggled();
     this._colorPickerButton.setToggled(enabled);
-    for (var target of WebInspector.targetManager.targets())
+    for (var target of SDK.targetManager.targets())
       target.pageAgent().setColorPickerEnabled(enabled);
   }
 
   /**
-   * @param {!WebInspector.Event} event
+   * @param {!Common.Event} event
    */
   _colorPicked(event) {
     var rgbColor = /** @type {!Protocol.DOM.RGBA} */ (event.data);
     var rgba = [rgbColor.r, rgbColor.g, rgbColor.b, (rgbColor.a / 2.55 | 0) / 100];
-    var color = WebInspector.Color.fromRGBA(rgba);
-    this._innerSetColor(color.hsva(), '', undefined, WebInspector.Spectrum._ChangeSource.Other);
+    var color = Common.Color.fromRGBA(rgba);
+    this._innerSetColor(color.hsva(), '', undefined, Components.Spectrum._ChangeSource.Other);
     InspectorFrontendHost.bringToFront();
   }
 };
 
-WebInspector.Spectrum._ChangeSource = {
+Components.Spectrum._ChangeSource = {
   Input: 'Input',
   Model: 'Model',
   Other: 'Other'
 };
 
 /** @enum {symbol} */
-WebInspector.Spectrum.Events = {
+Components.Spectrum.Events = {
   ColorChanged: Symbol('ColorChanged'),
   SizeChanged: Symbol('SizeChanged')
 };
 
-WebInspector.Spectrum._colorChipSize = 24;
-WebInspector.Spectrum._itemsPerPaletteRow = 8;
+Components.Spectrum._colorChipSize = 24;
+Components.Spectrum._itemsPerPaletteRow = 8;
 
 /** @typedef {{ title: string, colors: !Array.<string>, mutable: boolean }} */
-WebInspector.Spectrum.Palette;
-WebInspector.Spectrum.GeneratedPaletteTitle = 'Page colors';
+Components.Spectrum.Palette;
+Components.Spectrum.GeneratedPaletteTitle = 'Page colors';
 
 /**
  * @unrestricted
  */
-WebInspector.Spectrum.PaletteGenerator = class {
+Components.Spectrum.PaletteGenerator = class {
   /**
-   * @param {function(!WebInspector.Spectrum.Palette)} callback
+   * @param {function(!Components.Spectrum.Palette)} callback
    */
   constructor(callback) {
     this._callback = callback;
     /** @type {!Map.<string, number>} */
     this._frequencyMap = new Map();
     var stylesheetPromises = [];
-    for (var target of WebInspector.targetManager.targets(WebInspector.Target.Capability.DOM)) {
-      var cssModel = WebInspector.CSSModel.fromTarget(target);
+    for (var target of SDK.targetManager.targets(SDK.Target.Capability.DOM)) {
+      var cssModel = SDK.CSSModel.fromTarget(target);
       for (var stylesheet of cssModel.allStyleSheets())
         stylesheetPromises.push(new Promise(this._processStylesheet.bind(this, stylesheet)));
     }
@@ -956,33 +956,33 @@ WebInspector.Spectrum.PaletteGenerator = class {
 
     var colors = this._frequencyMap.keysArray();
     colors = colors.sort(this._frequencyComparator.bind(this));
-    /** @type {!Map.<string, !WebInspector.Color>} */
+    /** @type {!Map.<string, !Common.Color>} */
     var paletteColors = new Map();
     var colorsPerRow = 24;
     while (paletteColors.size < colorsPerRow && colors.length) {
       var colorText = colors.shift();
-      var color = WebInspector.Color.parse(colorText);
+      var color = Common.Color.parse(colorText);
       if (!color || color.nickname() === 'white' || color.nickname() === 'black')
         continue;
       paletteColors.set(colorText, color);
     }
 
     this._callback({
-      title: WebInspector.Spectrum.GeneratedPaletteTitle,
+      title: Components.Spectrum.GeneratedPaletteTitle,
       colors: paletteColors.keysArray().sort(hueComparator),
       mutable: false
     });
   }
 
   /**
-   * @param {!WebInspector.CSSStyleSheetHeader} stylesheet
+   * @param {!SDK.CSSStyleSheetHeader} stylesheet
    * @param {function(?)} resolve
-   * @this {WebInspector.Spectrum.PaletteGenerator}
+   * @this {Components.Spectrum.PaletteGenerator}
    */
   _processStylesheet(stylesheet, resolve) {
     /**
      * @param {?string} text
-     * @this {WebInspector.Spectrum.PaletteGenerator}
+     * @this {Components.Spectrum.PaletteGenerator}
      */
     function parseContent(text) {
       text = text.toLowerCase();
@@ -998,7 +998,7 @@ WebInspector.Spectrum.PaletteGenerator = class {
   }
 };
 
-WebInspector.Spectrum.MaterialPaletteShades = {
+Components.Spectrum.MaterialPaletteShades = {
   '#F44336':
       ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'],
   '#E91E63':
@@ -1039,9 +1039,9 @@ WebInspector.Spectrum.MaterialPaletteShades = {
       ['#ECEFF1', '#CFD8DC', '#B0BEC5', '#90A4AE', '#78909C', '#607D8B', '#546E7A', '#455A64', '#37474F', '#263238']
 };
 
-WebInspector.Spectrum.MaterialPalette = {
+Components.Spectrum.MaterialPalette = {
   title: 'Material',
   mutable: false,
   matchUserFormat: true,
-  colors: Object.keys(WebInspector.Spectrum.MaterialPaletteShades)
+  colors: Object.keys(Components.Spectrum.MaterialPaletteShades)
 };