DevTools: extract modules (with extensions)

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

 /*
  * Copyright (C) 2011 Brian Grinstead All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
  * 2.  Redistributions in binary form must reproduce the above copyright
@@ skipping 11 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
  */
-Components.Spectrum = class extends UI.VBox {
+Spectrum.Spectrum = class extends UI.VBox {
   constructor() {
     /**
      * @param {!Element} parentElement
      */
     function appendSwitcherIcon(parentElement) {
       var icon = parentElement.createSVGChild('svg');
       icon.setAttribute('height', 16);
       icon.setAttribute('width', 16);
       var path = icon.createSVGChild('path');
       path.setAttribute('d', 'M5,6 L11,6 L8,2 Z M5,10 L11,10 L8,14 Z');
       return icon;
     }
 
     super(true);
-    this.registerRequiredCSS('components/spectrum.css');
+    this.registerRequiredCSS('spectrum/spectrum.css');
     this.contentElement.tabIndex = 0;
     this.setDefaultFocusedElement(this.contentElement);
 
     this._colorElement = this.contentElement.createChild('div', 'spectrum-color');
     this._colorDragElement = this._colorElement.createChild('div', 'spectrum-sat fill')
                                  .createChild('div', 'spectrum-val fill')
                                  .createChild('div', 'spectrum-dragger');
     var contrastRatioSVG = this._colorElement.createSVGChild('svg', 'spectrum-contrast-container fill');
     this._contrastRatioLine = contrastRatioSVG.createSVGChild('path', 'spectrum-contrast-line');
 
@@ skipping 49 matching lines @@
     label.textContent = 'HEX';
 
     UI.installDragHandle(
         this._hueElement, dragStart.bind(this, positionHue.bind(this)), positionHue.bind(this), null, 'default');
     UI.installDragHandle(
         this._alphaElement, dragStart.bind(this, positionAlpha.bind(this)), positionAlpha.bind(this), null, 'default');
     UI.installDragHandle(
         this._colorElement, dragStart.bind(this, positionColor.bind(this)), positionColor.bind(this), null, 'default');
 
     this.element.classList.add('palettes-enabled');
-    /** @type {!Map.<string, !Components.Spectrum.Palette>} */
+    /** @type {!Map.<string, !Spectrum.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');
     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 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 UI.Toolbar('add-color-toolbar');
     var addColorButton = new UI.ToolbarButton(Common.UIString('Add to palette'), 'largeicon-add');
     addColorButton.addEventListener(UI.ToolbarButton.Events.Click, this._addColorToCustomPalette, this);
     this._addColorToolbar.appendToolbarItem(addColorButton);
 
     this._loadPalettes();
-    new Components.Spectrum.PaletteGenerator(this._generatedPaletteLoaded.bind(this));
+    new Spectrum.Spectrum.PaletteGenerator(this._generatedPaletteLoaded.bind(this));
 
     /**
      * @param {function(!Event)} callback
      * @param {!Event} event
      * @return {boolean}
-     * @this {Components.Spectrum}
+     * @this {Spectrum.Spectrum}
      */
     function dragStart(callback, event) {
       this._hueAlphaLeft = this._hueElement.totalOffsetLeft();
       this._colorOffset = this._colorElement.totalOffset();
       callback(event);
       return true;
     }
 
     /**
      * @param {!Event} event
-     * @this {Components.Spectrum}
+     * @this {Spectrum.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, Components.Spectrum._ChangeSource.Other);
+      this._innerSetColor(hsva, '', undefined, Spectrum.Spectrum._ChangeSource.Other);
     }
 
     /**
      * @param {!Event} event
-     * @this {Components.Spectrum}
+     * @this {Spectrum.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 === 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);
+      this._innerSetColor(hsva, '', colorFormat, Spectrum.Spectrum._ChangeSource.Other);
     }
 
     /**
      * @param {!Event} event
-     * @this {Components.Spectrum}
+     * @this {Spectrum.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, Components.Spectrum._ChangeSource.Other);
+      this._innerSetColor(hsva, '', undefined, Spectrum.Spectrum._ChangeSource.Other);
     }
   }
 
   _onCopyIconClick() {
     this._swatchCopyIcon.setIconType('largeicon-checkmark');
     InspectorFrontendHost.copyText(this.colorString());
   }
 
   _onCopyIconMouseout() {
     this._swatchCopyIcon.setIconType('largeicon-copy');
@@ skipping 37 matching lines @@
   _createPaletteColor(colorText, animationDelay) {
     var element = createElementWithClass('div', 'spectrum-palette-color');
     element.style.background = String.sprintf('linear-gradient(%s, %s), url(Images/checker.png)', colorText, colorText);
     if (animationDelay)
       element.animate([{opacity: 0}, {opacity: 1}], {duration: 100, delay: animationDelay, fill: 'backwards'});
     element.title = colorText;
     return element;
   }
 
   /**
-   * @param {!Components.Spectrum.Palette} palette
+   * @param {!Spectrum.Spectrum.Palette} palette
    * @param {boolean} animate
    * @param {!Event=} event
    */
   _showPalette(palette, animate, event) {
     this._resizeForSelectedPalette();
     this._paletteContainer.removeChildren();
     for (var i = 0; i < palette.colors.length; i++) {
       var animationDelay = animate ? i * 100 / palette.colors.length : 0;
       var colorElement = this._createPaletteColor(palette.colors[i], animationDelay);
       colorElement.addEventListener(
           'mousedown', this._paletteColorSelected.bind(this, palette.colors[i], palette.matchUserFormat));
       if (palette.mutable) {
         colorElement.__mutable = true;
         colorElement.__color = palette.colors[i];
         colorElement.addEventListener('contextmenu', this._showPaletteColorContextMenu.bind(this, i));
-      } else if (palette === Components.Spectrum.MaterialPalette) {
+      } else if (palette === Spectrum.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 = 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);
     }
@@ skipping 12 matching lines @@
   }
 
   /**
    * @param {!Element} colorElement
    * @param {string} colorText
    * @param {!Event} event
    */
   _showLightnessShades(colorElement, colorText, event) {
     /**
      * @param {!Element} element
-     * @this {!Components.Spectrum}
+     * @this {!Spectrum.Spectrum}
      */
     function closeLightnessShades(element) {
       this._shadesContainer.classList.add('hidden');
       element.classList.remove('spectrum-shades-shown');
       this._shadesContainer.ownerDocument.removeEventListener('mousedown', this._shadesCloseHandler, true);
       delete this._shadesCloseHandler;
     }
 
     if (this._shadesCloseHandler)
       this._shadesCloseHandler();
 
     this._shadesContainer.classList.remove('hidden');
     this._shadesContainer.removeChildren();
     this._shadesContainer.animate(
         [{transform: 'scaleY(0)', opacity: '0'}, {transform: 'scaleY(1)', opacity: '1'}],
         {duration: 200, easing: 'cubic-bezier(0.4, 0, 0.2, 1)'});
     this._shadesContainer.style.top = colorElement.offsetTop + colorElement.parentElement.offsetTop + 'px';
     this._shadesContainer.style.left = colorElement.offsetLeft + 'px';
     colorElement.classList.add('spectrum-shades-shown');
 
-    var shades = Components.Spectrum.MaterialPaletteShades[colorText];
+    var shades = Spectrum.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));
       this._shadesContainer.appendChild(shadeElement);
     }
 
     this._shadesContainer.focus();
     this._shadesCloseHandler = closeLightnessShades.bind(this, colorElement);
     this._shadesContainer.ownerDocument.addEventListener('mousedown', this._shadesCloseHandler, true);
   }
 
   /**
    * @param {!Event} e
    * @return {number}
    */
   _slotIndexForEvent(e) {
     var localX = e.pageX - this._paletteContainer.totalOffsetLeft();
     var localY = e.pageY - this._paletteContainer.totalOffsetTop();
-    var col = Math.min(localX / Components.Spectrum._colorChipSize | 0, Components.Spectrum._itemsPerPaletteRow - 1);
-    var row = (localY / Components.Spectrum._colorChipSize) | 0;
+    var col = Math.min(localX / Spectrum.Spectrum._colorChipSize | 0, Spectrum.Spectrum._itemsPerPaletteRow - 1);
+    var row = (localY / Spectrum.Spectrum._colorChipSize) | 0;
     return Math.min(
-        row * Components.Spectrum._itemsPerPaletteRow + col, this._customPaletteSetting.get().colors.length - 1);
+        row * Spectrum.Spectrum._itemsPerPaletteRow + col, this._customPaletteSetting.get().colors.length - 1);
   }
 
   /**
    * @param {!Event} e
    * @return {boolean}
    */
   _isDraggingToBin(e) {
     return e.pageX > this._deleteIconToolbar.element.totalOffsetLeft();
   }
 
   /**
    * @param {!Event} e
    * @return {boolean}
    */
   _paletteDragStart(e) {
     var element = e.deepElementFromPoint();
     if (!element || !element.__mutable)
       return false;
 
     var index = this._slotIndexForEvent(e);
     this._dragElement = element;
-    this._dragHotSpotX =
-        e.pageX - (index % Components.Spectrum._itemsPerPaletteRow) * Components.Spectrum._colorChipSize;
+    this._dragHotSpotX = e.pageX - (index % Spectrum.Spectrum._itemsPerPaletteRow) * Spectrum.Spectrum._colorChipSize;
     this._dragHotSpotY =
-        e.pageY - (index / Components.Spectrum._itemsPerPaletteRow | 0) * Components.Spectrum._colorChipSize;
+        e.pageY - (index / Spectrum.Spectrum._itemsPerPaletteRow | 0) * Spectrum.Spectrum._colorChipSize;
     return true;
   }
 
   /**
    * @param {!Event} e
    */
   _paletteDrag(e) {
     if (e.pageX < this._paletteContainer.totalOffsetLeft() || e.pageY < this._paletteContainer.totalOffsetTop())
       return;
     var newIndex = this._slotIndexForEvent(e);
-    var offsetX = e.pageX - (newIndex % Components.Spectrum._itemsPerPaletteRow) * Components.Spectrum._colorChipSize;
-    var offsetY =
-        e.pageY - (newIndex / Components.Spectrum._itemsPerPaletteRow | 0) * Components.Spectrum._colorChipSize;
+    var offsetX = e.pageX - (newIndex % Spectrum.Spectrum._itemsPerPaletteRow) * Spectrum.Spectrum._colorChipSize;
+    var offsetY = e.pageY - (newIndex / Spectrum.Spectrum._itemsPerPaletteRow | 0) * Spectrum.Spectrum._colorChipSize;
 
     var isDeleting = this._isDraggingToBin(e);
     this._deleteIconToolbar.element.classList.add('dragging');
     this._deleteIconToolbar.element.classList.toggle('delete-color-toolbar-active', isDeleting);
     var dragElementTransform =
         'translateX(' + (offsetX - this._dragHotSpotX) + 'px) translateY(' + (offsetY - this._dragHotSpotY) + 'px)';
     this._dragElement.style.transform = isDeleting ? dragElementTransform + ' scale(0.8)' : dragElementTransform;
     var children = Array.prototype.slice.call(this._paletteContainer.children);
     var index = children.indexOf(this._dragElement);
     /** @type {!Map.<!Element, {left: number, top: number}>} */
@@ skipping 39 matching lines @@
     var palette = this._customPaletteSetting.get();
     palette.colors = colors;
     this._customPaletteSetting.set(palette);
     this._showPalette(this._customPaletteSetting.get(), false);
 
     this._deleteIconToolbar.element.classList.remove('dragging');
     this._deleteIconToolbar.element.classList.remove('delete-color-toolbar-active');
   }
 
   _loadPalettes() {
-    this._palettes.set(Components.Spectrum.MaterialPalette.title, Components.Spectrum.MaterialPalette);
-    /** @type {!Components.Spectrum.Palette} */
+    this._palettes.set(Spectrum.Spectrum.MaterialPalette.title, Spectrum.Spectrum.MaterialPalette);
+    /** @type {!Spectrum.Spectrum.Palette} */
     var defaultCustomPalette = {title: 'Custom', colors: [], mutable: true};
     this._customPaletteSetting = Common.settings.createSetting('customColorPalette', defaultCustomPalette);
     this._palettes.set(this._customPaletteSetting.get().title, this._customPaletteSetting.get());
 
     this._selectedColorPalette =
-        Common.settings.createSetting('selectedColorPalette', Components.Spectrum.GeneratedPaletteTitle);
+        Common.settings.createSetting('selectedColorPalette', Spectrum.Spectrum.GeneratedPaletteTitle);
     var palette = this._palettes.get(this._selectedColorPalette.get());
     if (palette)
       this._showPalette(palette, true);
   }
 
   /**
-   * @param {!Components.Spectrum.Palette} generatedPalette
+   * @param {!Spectrum.Spectrum.Palette} generatedPalette
    */
   _generatedPaletteLoaded(generatedPalette) {
     if (generatedPalette.colors.length)
       this._palettes.set(generatedPalette.title, generatedPalette);
     if (this._selectedColorPalette.get() !== generatedPalette.title) {
       return;
     } else if (!generatedPalette.colors.length) {
-      this._paletteSelected(Components.Spectrum.MaterialPalette);
+      this._paletteSelected(Spectrum.Spectrum.MaterialPalette);
       return;
     }
     this._showPalette(generatedPalette, true);
   }
 
   /**
-   * @param {!Components.Spectrum.Palette} palette
+   * @param {!Spectrum.Spectrum.Palette} palette
    * @return {!Element}
    */
   _createPreviewPaletteElement(palette) {
     var colorsPerPreviewRow = 5;
     var previewElement = createElementWithClass('div', 'palette-preview');
     var titleElement = previewElement.createChild('div', 'palette-preview-title');
     titleElement.textContent = palette.title;
     for (var i = 0; i < colorsPerPreviewRow && i < palette.colors.length; i++)
       previewElement.appendChild(this._createPaletteColor(palette.colors[i]));
     for (; i < colorsPerPreviewRow; i++)
       previewElement.createChild('div', 'spectrum-palette-color empty-color');
     previewElement.addEventListener('click', this._paletteSelected.bind(this, palette));
     return previewElement;
   }
 
   /**
-   * @param {!Components.Spectrum.Palette} palette
+   * @param {!Spectrum.Spectrum.Palette} palette
    */
   _paletteSelected(palette) {
     this._selectedColorPalette.set(palette.title);
     this._showPalette(palette, true);
   }
 
   _resizeForSelectedPalette() {
     var palette = this._palettes.get(this._selectedColorPalette.get());
     if (!palette)
       return;
     var numColors = palette.colors.length;
     if (palette === this._customPaletteSetting.get())
       numColors++;
-    var rowsNeeded = Math.max(1, Math.ceil(numColors / Components.Spectrum._itemsPerPaletteRow));
+    var rowsNeeded = Math.max(1, Math.ceil(numColors / Spectrum.Spectrum._itemsPerPaletteRow));
     if (this._numPaletteRowsShown === rowsNeeded)
       return;
     this._numPaletteRowsShown = rowsNeeded;
     var paletteColorHeight = 12;
     var paletteMargin = 12;
     var paletteTop = 235;
     this.element.style.height = (paletteTop + paletteMargin + (paletteColorHeight + paletteMargin) * rowsNeeded) + 'px';
-    this.dispatchEventToListeners(Components.Spectrum.Events.SizeChanged);
+    this.dispatchEventToListeners(Spectrum.Spectrum.Events.SizeChanged);
   }
 
   /**
    * @param {string} colorText
    * @param {boolean} matchUserFormat
    */
   _paletteColorSelected(colorText, matchUserFormat) {
     var color = Common.Color.parse(colorText);
     if (!color)
       return;
     this._innerSetColor(
         color.hsva(), colorText, matchUserFormat ? this._colorFormat : color.format(),
-        Components.Spectrum._ChangeSource.Other);
+        Spectrum.Spectrum._ChangeSource.Other);
   }
 
   /**
    * @param {!Common.Event} event
    */
   _addColorToCustomPalette(event) {
     var palette = this._customPaletteSetting.get();
     palette.colors.push(this.colorString());
     this._customPaletteSetting.set(palette);
     this._showPalette(this._customPaletteSetting.get(), false);
@@ skipping 29 matching lines @@
     this._customPaletteSetting.set(palette);
     this._showPalette(this._customPaletteSetting.get(), false);
   }
 
   /**
    * @param {!Common.Color} color
    * @param {string} colorFormat
    */
   setColor(color, colorFormat) {
     this._originalFormat = colorFormat;
-    this._innerSetColor(color.hsva(), '', colorFormat, Components.Spectrum._ChangeSource.Model);
+    this._innerSetColor(color.hsva(), '', colorFormat, Spectrum.Spectrum._ChangeSource.Model);
   }
 
   /**
    * @param {!Array<number>|undefined} hsva
    * @param {string|undefined} colorString
    * @param {string|undefined} colorFormat
    * @param {string} changeSource
    */
   _innerSetColor(hsva, colorString, colorFormat, changeSource) {
     if (hsva !== undefined)
       this._hsv = hsva;
     if (colorString !== undefined)
       this._colorString = colorString;
     if (colorFormat !== undefined) {
       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 !== Components.Spectrum._ChangeSource.Input)
+    if (changeSource !== Spectrum.Spectrum._ChangeSource.Input)
       this._updateInput();
-    if (changeSource !== Components.Spectrum._ChangeSource.Model)
-      this.dispatchEventToListeners(Components.Spectrum.Events.ColorChanged, this.colorString());
+    if (changeSource !== Spectrum.Spectrum._ChangeSource.Model)
+      this.dispatchEventToListeners(Spectrum.Spectrum.Events.ColorChanged, this.colorString());
   }
 
   /**
    * @param {!Common.Color} color
    */
   setContrastColor(color) {
     this._contrastColor = color;
     this._updateUI();
   }
 
@@ skipping 182 matching lines @@
         String.sprintf('linear-gradient(to right, rgba(0,0,0,0), %s)', noAlpha.asString(Common.Color.Format.RGB));
   }
 
   _formatViewSwitch() {
     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, Components.Spectrum._ChangeSource.Other);
+    this._innerSetColor(undefined, '', format, Spectrum.Spectrum._ChangeSource.Other);
   }
 
   /**
    * @param {!Event} event
    */
   _inputChanged(event) {
     /**
      * @param {!Element} element
      * @return {string}
      */
@@ skipping 19 matching lines @@
       var values = this._textValues.map(elementValue).join(', ');
       colorString = String.sprintf('%s(%s)', format, values);
     }
 
     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, Components.Spectrum._ChangeSource.Input);
+    this._innerSetColor(hsv, colorString, undefined, Spectrum.Spectrum._ChangeSource.Input);
   }
 
   /**
    * @override
    */
   wasShown() {
     this._hueAlphaWidth = this._hueElement.offsetWidth;
     this.slideHelperWidth = this._hueSlider.offsetWidth / 2;
     this.dragWidth = this._colorElement.offsetWidth;
     this.dragHeight = this._colorElement.offsetHeight;
     this._colorDragElementHeight = this._colorDragElement.offsetHeight / 2;
-    this._innerSetColor(undefined, undefined, undefined, Components.Spectrum._ChangeSource.Model);
+    this._innerSetColor(undefined, undefined, undefined, Spectrum.Spectrum._ChangeSource.Model);
     this._toggleColorPicker(true);
     SDK.targetManager.addModelListener(
         SDK.ResourceTreeModel, SDK.ResourceTreeModel.Events.ColorPicked, this._colorPicked, this);
   }
 
   /**
    * @override
    */
   willHide() {
     this._toggleColorPicker(false);
@@ skipping 13 matching lines @@
       target.pageAgent().setColorPickerEnabled(enabled);
   }
 
   /**
    * @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 = Common.Color.fromRGBA(rgba);
-    this._innerSetColor(color.hsva(), '', undefined, Components.Spectrum._ChangeSource.Other);
+    this._innerSetColor(color.hsva(), '', undefined, Spectrum.Spectrum._ChangeSource.Other);
     InspectorFrontendHost.bringToFront();
   }
 };
 
-Components.Spectrum._ChangeSource = {
+Spectrum.Spectrum._ChangeSource = {
   Input: 'Input',
   Model: 'Model',
   Other: 'Other'
 };
 
 /** @enum {symbol} */
-Components.Spectrum.Events = {
+Spectrum.Spectrum.Events = {
   ColorChanged: Symbol('ColorChanged'),
   SizeChanged: Symbol('SizeChanged')
 };
 
-Components.Spectrum._colorChipSize = 24;
-Components.Spectrum._itemsPerPaletteRow = 8;
+Spectrum.Spectrum._colorChipSize = 24;
+Spectrum.Spectrum._itemsPerPaletteRow = 8;
 
 /** @typedef {{ title: string, colors: !Array.<string>, mutable: boolean }} */
-Components.Spectrum.Palette;
-Components.Spectrum.GeneratedPaletteTitle = 'Page colors';
+Spectrum.Spectrum.Palette;
+Spectrum.Spectrum.GeneratedPaletteTitle = 'Page colors';
 
 /**
  * @unrestricted
  */
-Components.Spectrum.PaletteGenerator = class {
+Spectrum.Spectrum.PaletteGenerator = class {
   /**
-   * @param {function(!Components.Spectrum.Palette)} callback
+   * @param {function(!Spectrum.Spectrum.Palette)} callback
    */
   constructor(callback) {
     this._callback = callback;
     /** @type {!Map.<string, number>} */
     this._frequencyMap = new Map();
     var stylesheetPromises = [];
     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)));
@@ skipping 42 matching lines @@
     var colorsPerRow = 24;
     while (paletteColors.size < colorsPerRow && colors.length) {
       var colorText = colors.shift();
       var color = Common.Color.parse(colorText);
       if (!color || color.nickname() === 'white' || color.nickname() === 'black')
         continue;
       paletteColors.set(colorText, color);
     }
 
     this._callback({
-      title: Components.Spectrum.GeneratedPaletteTitle,
+      title: Spectrum.Spectrum.GeneratedPaletteTitle,
       colors: paletteColors.keysArray().sort(hueComparator),
       mutable: false
     });
   }
 
   /**
    * @param {!SDK.CSSStyleSheetHeader} stylesheet
    * @param {function(?)} resolve
-   * @this {Components.Spectrum.PaletteGenerator}
+   * @this {Spectrum.Spectrum.PaletteGenerator}
    */
   _processStylesheet(stylesheet, resolve) {
     /**
      * @param {?string} text
-     * @this {Components.Spectrum.PaletteGenerator}
+     * @this {Spectrum.Spectrum.PaletteGenerator}
      */
     function parseContent(text) {
       text = text.toLowerCase();
       var regexResult = text.match(/((?:rgb|hsl)a?\([^)]+\)|#[0-9a-f]{6}|#[0-9a-f]{3})/g) || [];
       for (var c of regexResult) {
         var frequency = this._frequencyMap.get(c) || 0;
         this._frequencyMap.set(c, ++frequency);
       }
       resolve(null);
     }
 
     stylesheet.requestContent().then(parseContent.bind(this));
   }
 };
 
-Components.Spectrum.MaterialPaletteShades = {
+Spectrum.Spectrum.MaterialPaletteShades = {
   '#F44336':
       ['#FFEBEE', '#FFCDD2', '#EF9A9A', '#E57373', '#EF5350', '#F44336', '#E53935', '#D32F2F', '#C62828', '#B71C1C'],
   '#E91E63':
       ['#FCE4EC', '#F8BBD0', '#F48FB1', '#F06292', '#EC407A', '#E91E63', '#D81B60', '#C2185B', '#AD1457', '#880E4F'],
   '#9C27B0':
       ['#F3E5F5', '#E1BEE7', '#CE93D8', '#BA68C8', '#AB47BC', '#9C27B0', '#8E24AA', '#7B1FA2', '#6A1B9A', '#4A148C'],
   '#673AB7':
       ['#EDE7F6', '#D1C4E9', '#B39DDB', '#9575CD', '#7E57C2', '#673AB7', '#5E35B1', '#512DA8', '#4527A0', '#311B92'],
   '#3F51B5':
       ['#E8EAF6', '#C5CAE9', '#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5', '#3949AB', '#303F9F', '#283593', '#1A237E'],
@@ skipping 20 matching lines @@
   '#FF5722':
       ['#FBE9E7', '#FFCCBC', '#FFAB91', '#FF8A65', '#FF7043', '#FF5722', '#F4511E', '#E64A19', '#D84315', '#BF360C'],
   '#795548':
       ['#EFEBE9', '#D7CCC8', '#BCAAA4', '#A1887F', '#8D6E63', '#795548', '#6D4C41', '#5D4037', '#4E342E', '#3E2723'],
   '#9E9E9E':
       ['#FAFAFA', '#F5F5F5', '#EEEEEE', '#E0E0E0', '#BDBDBD', '#9E9E9E', '#757575', '#616161', '#424242', '#212121'],
   '#607D8B':
       ['#ECEFF1', '#CFD8DC', '#B0BEC5', '#90A4AE', '#78909C', '#607D8B', '#546E7A', '#455A64', '#37474F', '#263238']
 };
 
-Components.Spectrum.MaterialPalette = {
+Spectrum.Spectrum.MaterialPalette = {
   title: 'Material',
   mutable: false,
   matchUserFormat: true,
-  colors: Object.keys(Components.Spectrum.MaterialPaletteShades)
+  colors: Object.keys(Spectrum.Spectrum.MaterialPaletteShades)
 };