ColorPicker.js

// Copyright (C) 2019 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

/**
 * @fileoverview Color picker used by <input type='color' />
 */

function initializeColorPicker() {
  if (global.params.selectedColor === undefined) {
    global.params.selectedColor = DefaultColor;
  }
  const colorPicker = new ColorPicker(new Color(global.params.selectedColor));
  main.append(colorPicker);
  const width = colorPicker.offsetWidth;
  const height = colorPicker.offsetHeight;
  resizeWindow(width, height);
}

/**
 * @param {!Object} args
 * @return {?string} An error message, or null if the argument has no errors.
 */
function validateColorPickerArguments(args) {
  if (args.shouldShowColorSuggestionPicker)
    return 'Should be showing the color suggestion picker.';
  if (!args.selectedColor)
    return 'No selectedColor.';
  return null;
}

/**
 * Supported movement directions.
 * @enum {number}
 */
const Direction = {
  UNDEFINED: 0,
  LEFT: 1,
  RIGHT: 2,
  UP: 3,
  DOWN: 4,
}

/**
 * Supported color channels.
 * @enum {number}
 */
const ColorChannel = {
  HEX: 0,
  R: 1,
  G: 2,
  B: 3,
  H: 4,
  S: 5,
  L: 6,
};

/**
 * Supported color formats.
 * @enum {number}
 */
const ColorFormat = {
  HEX: 0,
  RGB: 1,
  HSL: 2,
};

/**
 * Color: Helper class to get color values in different color formats.
 */
class Color {
  /**
   * @param {string|!ColorFormat} colorStringOrFormat
   * @param  {...number} colorValues ignored if colorStringOrFormat is a string
   */
  constructor(colorStringOrFormat, ...colorValues) {
    if (typeof colorStringOrFormat === 'string') {
      colorStringOrFormat = colorStringOrFormat.toLowerCase();
      if (colorStringOrFormat.startsWith('#')) {
        this.hexValue_ = colorStringOrFormat.substr(1);
      } else if (colorStringOrFormat.startsWith('rgb')) {
        // Ex. 'rgb(255, 255, 255)' => [255,255,255]
        colorStringOrFormat = colorStringOrFormat.replace(/\s+/g, '');
        [this.rValue_, this.gValue_, this.bValue_] =
            colorStringOrFormat.substring(4, colorStringOrFormat.length - 1)
                .split(',')
                .map(Number);
      } else if (colorStringOrFormat.startsWith('hsl')) {
        colorStringOrFormat = colorStringOrFormat.replace(/%|\s+/g, '');
        [this.hValue_, this.sValue_, this.lValue_] =
            colorStringOrFormat.substring(4, colorStringOrFormat.length - 1)
                .split(',')
                .map(Number);
      }
    } else {
      switch (colorStringOrFormat) {
        case ColorFormat.HEX:
          this.hexValue_ = colorValues[0].toLowerCase();
          break;
        case ColorFormat.RGB:
          [this.rValue_, this.gValue_, this.bValue_] = colorValues.map(Number);
          break;
        case ColorFormat.HSL:
          [this.hValue_, this.sValue_, this.lValue_] = colorValues.map(Number);
          break;
      }
    }
  }

  /**
   * @param {!Color} other
   */
  equals(other) {
    return (this.hexValue === other.hexValue);
  }

  /**
   * @returns {string}
   */
  get hexValue() {
    this.computeHexValue_();
    return this.hexValue_;
  }

  computeHexValue_() {
    if (this.hexValue_ !== undefined) {
      // Already computed.
    } else if (this.rValue_ !== undefined) {
      this.hexValue_ = Color.rgbToHex(this.rValue_, this.gValue_, this.bValue_);
    } else if (this.hValue_ !== undefined) {
      this.hexValue_ = Color.hslToHex(this.hValue_, this.sValue_, this.lValue_);
    }
  }

  asHex() {
    return '#' + this.hexValue;
  }

  /**
   * @returns {number} between 0 and 255
   */
  get rValue() {
    this.computeRGBValues_();
    return this.rValue_;
  }

  /**
   * @returns {number} between 0 and 255
   */
  get gValue() {
    this.computeRGBValues_();
    return this.gValue_;
  }

  /**
   * @returns {number} between 0 and 255
   */
  get bValue() {
    this.computeRGBValues_();
    return this.bValue_;
  }

  computeRGBValues_() {
    if (this.rValue_ !== undefined) {
      // Already computed.
    } else if (this.hexValue_ !== undefined) {
      [this.rValue_, this.gValue_, this.bValue_] =
          Color.hexToRGB(this.hexValue_);
    } else if (this.hValue_ !== undefined) {
      [this.rValue_, this.gValue_, this.bValue_] =
          Color.hslToRGB(this.hValue_, this.sValue_, this.lValue_);
    }
  }

  rgbValues() {
    return [this.rValue, this.gValue, this.bValue];
  }

  asRGB() {
    return 'rgb(' + this.rgbValues().join() + ')';
  }

  /**
   * @returns {number} between 0 and 359
   */
  get hValue() {
    this.computeHSLValues_();
    return this.hValue_;
  }

  /**
   * @returns {number} between 0 and 100
   */
  get sValue() {
    this.computeHSLValues_();
    return this.sValue_;
  }

  /**
   * @returns {number} between 0 and 100
   */
  get lValue() {
    this.computeHSLValues_();
    return this.lValue_;
  }

  computeHSLValues_() {
    if (this.hValue_ !== undefined) {
      // Already computed.
    } else if (this.rValue_ !== undefined) {
      [this.hValue_, this.sValue_, this.lValue_] =
          Color.rgbToHSL(this.rValue_, this.gValue_, this.bValue_);
    } else if (this.hexValue_ !== undefined) {
      [this.hValue_, this.sValue_, this.lValue_] =
          Color.hexToHSL(this.hexValue_);
    }
  }

  hslValues() {
    return [this.hValue, this.sValue, this.lValue];
  }

  asHSL() {
    return 'hsl(' + this.hValue + ',' + this.sValue + '%,' + this.lValue + '%)';
  }

  /**
   * @param {string} hexValue
   * @returns {number[]}
   */
  static hexToRGB(hexValue) {
    // Ex. 'ffffff' => '[255,255,255]'
    const colorValue = parseInt(hexValue, 16);
    return [
      (colorValue >> 16) & 255, (colorValue >> 8) & 255, colorValue & 255
    ];
  }

  /**
   * @param {...number} rgbValues
   * @returns {string}
   */
  static rgbToHex(...rgbValues) {
    // Ex. '[255,255,255]' => 'ffffff'
    return rgbValues.reduce((cumulativeHexValue, rgbValue) => {
      let hexValue = Number(rgbValue).toString(16);
      if (hexValue.length == 1) {
        hexValue = '0' + hexValue;
      }
      return (cumulativeHexValue + hexValue);
    }, '');
  }

  /**
   * The algorithm has been written based on the mathematical formula found at:
   * https://en.wikipedia.org/wiki/HSL_and_HSV#HSL_to_RGB.
   * @param {...number} hslValues
   * @returns {number[]}
   */
  static hslToRGB(...hslValues) {
    let [hValue, sValue, lValue] = hslValues;
    hValue /= 60;
    sValue /= 100;
    lValue /= 100;

    let rValue = lValue;
    let gValue = lValue;
    let bValue = lValue;
    let match = 0;
    if (sValue !== 0) {
      const chroma = (1 - Math.abs(2 * lValue - 1)) * sValue;
      const x = chroma * (1 - Math.abs(hValue % 2 - 1));
      match = lValue - chroma / 2;
      if ((0 <= hValue) && (hValue <= 1)) {
        rValue = chroma;
        gValue = x;
        bValue = 0;
      } else if ((1 < hValue) && (hValue <= 2)) {
        rValue = x;
        gValue = chroma;
        bValue = 0;
      } else if ((2 < hValue) && (hValue <= 3)) {
        rValue = 0;
        gValue = chroma;
        bValue = x;
      } else if ((3 < hValue) && (hValue <= 4)) {
        rValue = 0;
        gValue = x;
        bValue = chroma;
      } else if ((4 < hValue) && (hValue <= 5)) {
        rValue = x;
        gValue = 0;
        bValue = chroma;
      } else {
        // (5 < hValue) && (hValue < 6)
        rValue = chroma;
        gValue = 0;
        bValue = x;
      }
    }
    rValue = Math.round((rValue + match) * 255);
    gValue = Math.round((gValue + match) * 255);
    bValue = Math.round((bValue + match) * 255);
    return [rValue, gValue, bValue];
  }

  /**
   * The algorithm has been written based on the mathematical formula found at:
   * https://en.wikipedia.org/wiki/HSL_and_HSV#From_RGB.
   * @param {...number} rgbValues
   * @returns {number[]}
   */
  static rgbToHSL(...rgbValues) {
    const [rValue, gValue, bValue] = rgbValues.map((value) => value / 255);
    const max = Math.max(rValue, gValue, bValue);
    const min = Math.min(rValue, gValue, bValue);
    let hValue = 0;
    let sValue = 0;
    let lValue = (max + min) / 2;
    if (max !== min) {
      const diff = max - min;
      if (max === rValue) {
        hValue = ((gValue - bValue) / diff);
      } else if (max === gValue) {
        hValue = ((bValue - rValue) / diff) + 2;
      } else {
        // max === bValue
        hValue = ((rValue - gValue) / diff) + 4;
      }
      hValue = Math.round(hValue * 60);
      if (hValue < 0) {
        hValue += 360;
      }
      sValue = Math.round((diff / (1 - Math.abs(2 * lValue - 1))) * 100);
    }
    lValue = Math.round(lValue * 100);
    return [hValue, sValue, lValue];
  }

  /**
   * @param {...number} rgbValues
   * @returns {string}
   */
  static hslToHex(...hslValues) {
    return Color.rgbToHex(...Color.hslToRGB(...hslValues));
  }

  /**
   * @param {string} hexValue
   * @returns {...number}
   */
  static hexToHSL(hexValue) {
    return Color.rgbToHSL(...Color.hexToRGB(hexValue));
  }

  /**
   * @param {number[]} colorTripleA RGB or HSL values
   * @param {number[]} colorTripleB RGB or HSL values
   * Both color triples must be of the same color format.
   */
  static distance(colorTripleA, colorTripleB) {
    return Math.sqrt(
        Math.pow(colorTripleA[0] - colorTripleB[0], 2) +
        Math.pow(colorTripleA[1] - colorTripleB[1], 2) +
        Math.pow(colorTripleA[2] - colorTripleB[2], 2));
  }
}

/**
 * Point: Helper class to get/set coordinates for two dimensional points.
 */
class Point {
  /**
   * @param {number} x
   * @param {number} y
   */
  constructor(x, y) {
    this.set(x, y);
  }

  /**
   * @param {number} x
   * @param {number} y
   */
  set(x, y) {
    this.x = x;
    this.y = y;
  }

  get x() {
    return this.x_;
  }

  /**
   * @param {number} x
   */
  set x(x) {
    this.x_ = x;
  }

  get y() {
    return this.y_;
  }

  /**
   * @param {number} y
   */
  set y(y) {
    this.y_ = y;
  }
}

/**
 * ColorPicker: Custom element providing a color picker implementation.
 *              A color picker is comprised of three main parts: a visual color
 *              picker to allow visual selection of colors, a manual color
 *              picker to allow numeric selection of colors, and submission
 *              controls to save/discard new color selections.
 */
class ColorPicker extends HTMLElement {
  /**
   * @param {!Color} initialColor
   */
  constructor(initialColor) {
    super();

    if (global.params.isBorderTransparent) {
      this.style.borderColor = 'transparent';
    }

    this.selectedColor_ = initialColor;
    this.colorWhenOpened_ = initialColor;

    this.visualColorPicker_ = new VisualColorPicker(initialColor);
    this.manualColorPicker_ = new ManualColorPicker(initialColor);
    this.colorValueAXAnnouncer_ = new ColorValueAXAnnouncer();
    this.append(
        this.visualColorPicker_, this.manualColorPicker_,
        this.colorValueAXAnnouncer_);

    this.visualColorPicker_.addEventListener(
        'visual-color-picker-initialized', this.initializeListeners_);

    window.addEventListener('resize', this.onWindowResize_, {once: true});
  }

  initializeListeners_ = () => {
    this.manualColorPicker_
        .addEventListener('manual-color-change', this.onManualColorChange_);

    this.addEventListener('visual-color-change', this.onVisualColorChange_);

    this.addEventListener('format-change', this.onFormatChange_);

    this.addEventListener('focusin', this.onFocusin_);

    window.addEventListener('message', this.onMessageReceived_);

    document.documentElement.addEventListener('keydown', this.onKeyDown_);
  }

  get selectedColor() {
    return this.selectedColor_;
  }

  /**
   * @param {!Color} newColor
   */
  set selectedColor(newColor) {
    this.selectedColor_ = newColor;
  }

  /**
   * @param {!Event} event
   */
  onManualColorChange_ = (event) => {
    const newColor = event.detail.color;
    if (!this.selectedColor.equals(newColor)) {
      this.selectedColor = newColor;

      // There may not be an exact match for newColor in the HueSlider or
      // ColorWell, in which case we will display the closest match. When this
      // happens though, we want the manually chosen values to remain the
      // selected values (as they were explicitly specified by the user).
      // Therefore, we need to prevent them from getting overwritten when
      // onVisualColorChange_ runs. We do this by setting the
      // processingManualColorChange_ flag here and checking for it inside
      // onVisualColorChange_. If the flag is set, the manual color values
      // will not be updated with the color shown in the visual color picker.
      this.processingManualColorChange_ = true;
      this.visualColorPicker_.color = newColor;
      this.processingManualColorChange_ = false;

      const selectedValue = newColor.asHex();
      window.pagePopupController.setValue(selectedValue);
    }
  };

  /**
   * @param {!Event} event
   */
  onVisualColorChange_ = (event) => {
    const newColor = event.detail.color;
    if (!this.selectedColor.equals(newColor)) {
      if (!this.processingManualColorChange_) {
        this.selectedColor = newColor;
        this.manualColorPicker_.color = newColor;

        this.colorValueAXAnnouncer_.announceColor(newColor);

        const selectedValue = newColor.asHex();
        window.pagePopupController.setValue(selectedValue);
      } else {
        // We are making a visual color change in response to a manual color
        // change. So we do not overwrite the manually specified values and do
        // not change the selected color.
      }
    }
  };

  /**
   * @param {!Event} event
   */
  onKeyDown_ = (event) => {
    switch (event.key) {
      case 'Enter':
        window.pagePopupController.closePopup();
        break;
      case 'Escape':
        if (this.selectedColor.equals(this.colorWhenOpened_)) {
          window.pagePopupController.closePopup();
        } else {
          this.manualColorPicker_.dispatchEvent(new CustomEvent(
              'manual-color-change',
              {bubbles: true, detail: {color: this.colorWhenOpened_}}));
        }
        break;
      case 'Tab':
        event.preventDefault();
        if (this.focusableElements_ === undefined) {
          this.updateFocusableElements_();
        }
        const length = this.focusableElements_.length;
        if (length > 0) {
          const currentFocusIndex =
              this.focusableElements_.indexOf(document.activeElement);
          let nextFocusIndex;
          if (event.shiftKey) {
            nextFocusIndex =
                (currentFocusIndex > 0) ? currentFocusIndex - 1 : length - 1;
          } else {
            nextFocusIndex = (currentFocusIndex + 1) % length;
          }
          this.focusableElements_[nextFocusIndex].focus({preventScroll: true});
        }
        break;
    }
  };

  onFormatChange_ = (event) => {
    this.updateFocusableElements_();
    this.colorValueAXAnnouncer_.updateColorFormat(event.detail.colorFormat);
  };

  onFocusin_ = (event) => {
    if (event.target instanceof ColorSelectionRing) {
      // Announce the current color when the user focuses the ColorWell or the
      // HueSlider.
      this.colorValueAXAnnouncer_.announceColor(this.selectedColor);
    } else if (event.target instanceof FormatToggler) {
      // Announce the current color format when the user focuses the
      // FormatToggler.
      this.colorValueAXAnnouncer_.announceColorFormat();
    }
  };

  updateFocusableElements_ = () => {
    this.focusableElements_ = Array.from(this.querySelectorAll(
        'color-value-container:not(.hidden-color-value-container) > input,' +
        '[tabindex]:not([tabindex=\'-1\'])'));
  };

  onWindowResize_ = () => {
    // Set focus on the first focusable element.
    if (this.focusableElements_ === undefined) {
      this.updateFocusableElements_();
    }
    this.focusableElements_[0].focus({preventScroll: true});
  };

  onMessageReceived_ = (event) => {
    eval(event.data);
    if (window.updateData && window.updateData.success) {
      // Update the popup with the color selected using the eye dropper.
      const selectedValue = new Color(window.updateData.color);
      this.selectedColor = selectedValue;
      this.manualColorPicker_.color = selectedValue;
      this.visualColorPicker_.color = selectedValue;

      const hexValue = selectedValue.asHex();
      window.pagePopupController.setValue(hexValue);
    }
    this.visualColorPicker_.eyeDropper.finished();
    delete window.updateData;
  }
}
window.customElements.define('color-picker', ColorPicker);

/**
 * VisualColorPicker: Provides functionality to see the selected color and
 *                    select a different color visually.
 */
class VisualColorPicker extends HTMLElement {
  /**
   * @param {!Color} initialColor
   */
  constructor(initialColor) {
    super();

    let visualColorPickerStrip = document.createElement('span');
    visualColorPickerStrip.setAttribute('id', 'visual-color-picker-strip');
    this.eyeDropper_ = new EyeDropper();
    this.colorViewer_ = new ColorViewer(initialColor);
    this.hueSlider_ = new HueSlider(initialColor);
    visualColorPickerStrip.append(
        this.eyeDropper_, this.colorViewer_, this.hueSlider_);
    this.append(visualColorPickerStrip);

    this.colorWell_ = new ColorWell(initialColor);
    this.prepend(this.colorWell_);

    this.colorWell_.addEventListener('color-well-initialized', () => {
      this.initializeListeners_();
    });

    this.hueSlider_.addEventListener('hue-slider-initialized', () => {
      this.initializeListeners_();
    });
  }

  initializeListeners_ = () => {
    if (this.colorWell_.initialized && this.hueSlider_.initialized) {
      this.addEventListener('hue-slider-update', this.onHueSliderUpdate_);
      this.addEventListener('visual-color-change', this.onVisualColorChange_);
      this.colorWell_
          .addEventListener('mousedown', this.onColorWellMouseDown_);
      this.hueSlider_
          .addEventListener('mousedown', this.onHueSliderMouseDown_);
      document.documentElement
          .addEventListener('mousedown', this.onMouseDown_);
      document.documentElement
          .addEventListener('mousemove', this.onMouseMove_);
      document.documentElement.addEventListener('mouseup', this.onMouseUp_);
      this.colorWell_
          .addEventListener('touchstart', this.onColorWellTouchStart_);
      this.hueSlider_
          .addEventListener('touchstart', this.onHueSliderTouchStart_);
      document.documentElement
          .addEventListener('touchstart', this.onTouchStart_);
      document.documentElement
          .addEventListener('touchmove', this.onTouchMove_);
      document.documentElement.addEventListener('touchend', this.onTouchEnd_);
      document.documentElement.addEventListener('keydown', this.onKeyDown_);

      this.dispatchEvent(new CustomEvent('visual-color-picker-initialized'));
    }
  }

  onHueSliderUpdate_ = () => {
    this.colorWell_.fillColor = this.hueSlider_.color;
  }

  /**
   * @param {!Event} event
   */
  onVisualColorChange_ = (event) => {
    this.colorViewer_.color = event.detail.color;
  }

  /**
   * @param {!Event} event
   */
  onColorWellMouseDown_ = (event) => {
    event.preventDefault();
    event.stopPropagation();
    this.hueSlider_.focused = false;
    this.colorWell_.pointerDown(new Point(event.clientX, event.clientY));
  }

  /**
   * @param {!Event} event
   */
  onHueSliderMouseDown_ = (event) => {
    event.preventDefault();
    event.stopPropagation();
    this.colorWell_.focused = false;
    this.hueSlider_.pointerDown(new Point(event.clientX, event.clientY));
  }

  onMouseDown_ = () => {
    this.colorWell_.focused = false;
    this.hueSlider_.focused = false;
  }

  /**
   * @param {!Event} event
   */
  onMouseMove_ = (event) => {
    var point = new Point(event.clientX, event.clientY);
    this.colorWell_.pointerMove(point);
    this.hueSlider_.pointerMove(point);
  }

  onMouseUp_ = () => {
    this.colorWell_.pointerUp();
    this.hueSlider_.pointerUp();
  }

    /**
   * @param {!Event} event
   */
  onColorWellTouchStart_ = (event) => {
    event.preventDefault();
    event.stopPropagation();
    this.hueSlider_.focused = false;
    this.colorWell_.pointerDown(new Point(Math.round(event.touches[0].clientX), Math.round(event.touches[0].clientY)));
  }

  /**
   * @param {!Event} event
   */
  onHueSliderTouchStart_ = (event) => {
    event.preventDefault();
    event.stopPropagation();
    this.colorWell_.focused = false;
    this.hueSlider_.pointerDown(new Point(Math.round(event.touches[0].clientX), Math.round(event.touches[0].clientY)));
  }

  onTouchStart_ = () => {
    this.colorWell_.focused = false;
    this.hueSlider_.focused = false;
  }

  /**
   * @param {!Event} event
   */
  onTouchMove_ = (event) => {
    var point = new Point(Math.round(event.touches[0].clientX), Math.round(event.touches[0].clientY));
    this.colorWell_.pointerMove(point);
    this.hueSlider_.pointerMove(point);
  }

  onTouchEnd_ = () => {
    this.colorWell_.pointerUp();
    this.hueSlider_.pointerUp();
  }

  /**
   * @param {!Event} event
   */
  onKeyDown_ = (event) => {
    let moveDirection = Direction.UNDEFINED;
    switch(event.key) {
      case 'ArrowUp':
        moveDirection = Direction.UP;
        break;
      case 'ArrowDown':
        moveDirection = Direction.DOWN;
        break;
      case 'ArrowLeft':
        moveDirection = Direction.LEFT;
        break;
      case 'ArrowRight':
        moveDirection = Direction.RIGHT;
        break;
    }
    if (moveDirection !== Direction.UNDEFINED) {
      const acceleratedMove = event.ctrlKey;
      this.hueSlider_.move(moveDirection, acceleratedMove);
      this.colorWell_.move(moveDirection, acceleratedMove);
    }
  }

  /**
   * @param {!Color} newColor
   */
  set color(newColor) {
    this.hueSlider_.color = newColor;
    this.colorWell_.selectedColor = newColor;
  }

  get eyeDropper() {
    return this.eyeDropper_;
  }
}
window.customElements.define('visual-color-picker', VisualColorPicker);

/**
 * EyeDropper: Allows color selection from content outside the color picker.
 *             (This is currently just a placeholder for a future
 *             implementation.)
 * TODO(http://crbug.com/992297): Implement eye dropper
 */
class EyeDropper extends HTMLElement {
  constructor() {
    super();

    if (!global.params.isEyeDropperEnabled) {
      this.classList.add('hidden');
      return;
    }

    this.setAttribute('tabIndex', 0);
    this.innerHTML =
        '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" ' +
        'xmlns="http://www.w3.org/2000/svg"><path d="M13.7344 0C14.0469 0 ' +
        '14.3411 0.0598958 14.6172 0.179688C14.8932 0.299479 15.1328 ' +
        '0.460938 15.3359 0.664062C15.5391 0.867188 15.7005 1.10677 15.8203 ' +
        '1.38281C15.9401 1.65885 16 1.95312 16 2.26562C16 2.56771 15.9427 ' +
        '2.85938 15.8281 3.14062C15.7135 3.41667 15.5495 3.66146 15.3359 ' +
        '3.875L13.4609 5.75C13.6328 5.91667 13.7656 6.10677 13.8594 ' +
        '6.32031C13.9531 6.52865 14 6.75521 14 7C14 7.23958 13.9531 7.46354 ' +
        '13.8594 7.67188C13.7708 7.88021 13.6432 8.06771 13.4766 ' +
        '8.23438L12.25 9.46094L11 8.20312L4.71094 14.4922L4.50781 ' +
        '14.5C4.24219 14.5104 4.01302 14.5547 3.82031 14.6328C3.63281 ' +
        '14.7109 3.46615 14.8073 3.32031 14.9219C3.17969 15.0312 3.04948 ' +
        '15.1484 2.92969 15.2734C2.8151 15.3984 2.69271 15.5156 2.5625 ' +
        '15.625C2.43229 15.7344 2.28906 15.8255 2.13281 15.8984C1.97656 ' +
        '15.9661 1.78646 16 1.5625 16C1.34896 16 1.14583 15.9583 0.953125 ' +
        '15.875C0.765625 15.7917 0.601562 15.6797 0.460938 15.5391C0.320312 ' +
        '15.3984 0.208333 15.2344 0.125 15.0469C0.0416667 14.8542 0 14.651 0 ' +
        '14.4375C0 14.2135 0.0338542 14.0234 0.101562 13.8672C0.174479 ' +
        '13.7057 0.265625 13.5625 0.375 13.4375C0.484375 13.3073 0.601562 ' +
        '13.1849 0.726562 13.0703C0.851562 12.9505 0.96875 12.8203 1.07812 ' +
        '12.6797C1.19271 12.5339 1.28906 12.3672 1.36719 12.1797C1.44531 ' +
        '11.9922 1.48958 11.763 1.5 11.4922L1.50781 11.2891L7.79688 ' +
        '5L6.53906 3.75L7.76562 2.52344C7.93229 2.35677 8.11979 2.22917 ' +
        '8.32812 2.14062C8.53646 2.04688 8.76042 2 9 2C9.24479 2 9.47135 ' +
        '2.04688 9.67969 2.14062C9.89323 2.23438 10.0833 2.36719 10.25 ' +
        '2.53906L12.125 0.664062C12.3385 0.450521 12.5833 0.286458 12.8594 ' +
        '0.171875C13.1406 0.0572917 13.4323 0 13.7344 0ZM10.2891 7.5L8.5 ' +
        '5.71094L2.49219 11.7188C2.46615 11.9844 2.41667 12.2214 2.34375 ' +
        '12.4297C2.27083 12.638 2.17708 12.8333 2.0625 13.0156C1.94792 ' +
        '13.1927 1.8125 13.3646 1.65625 13.5312C1.50521 13.6927 1.34115 ' +
        '13.8646 1.16406 14.0469C1.05469 14.1562 1 14.2891 1 14.4453C1 ' +
        '14.5964 1.05469 14.7266 1.16406 14.8359C1.27344 14.9453 1.40365 15 ' +
        '1.55469 15C1.71094 15 1.84375 14.9453 1.95312 14.8359C2.13542 ' +
        '14.6589 2.3099 14.4948 2.47656 14.3438C2.64323 14.1875 2.8151 ' +
        '14.0521 2.99219 13.9375C3.16927 13.8229 3.36198 13.7292 3.57031 ' +
        '13.6562C3.77865 13.5833 4.01562 13.5339 4.28125 13.5078L10.2891 ' +
        '7.5ZM14.625 3.16406C14.875 2.91406 15 2.61719 15 2.27344C15 2.10156 ' +
        '14.9661 1.9375 14.8984 1.78125C14.8307 1.625 14.7396 1.48958 14.625 ' +
        '1.375C14.5104 1.26042 14.375 1.16927 14.2188 1.10156C14.0625 ' +
        '1.03385 13.8984 1 13.7266 1C13.3828 1 13.0859 1.125 12.8359 ' +
        '1.375L10.25 3.95312L9.51562 3.21875C9.36979 3.07292 9.19792 3 9 ' +
        '3C8.89062 3 8.78646 3.02604 8.6875 3.07812C8.59375 3.13021 8.5026 ' +
        '3.19531 8.41406 3.27344C8.33073 3.35156 8.25 3.4349 8.17188 ' +
        '3.52344C8.09375 3.60677 8.02083 3.68229 7.95312 3.75L12.25 ' +
        '8.04688L12.7812 7.51562C12.9271 7.36979 13 7.19792 13 7C13 6.89583 ' +
        '12.9792 6.80208 12.9375 6.71875C12.901 6.63021 12.8464 6.54948 ' +
        '12.7734 6.47656L12.0469 5.75L14.625 3.16406Z" fill="WindowText"/> ' +
        '</svg>';

    this.addEventListener('click', this.onClick_);
    this.addEventListener('keydown', this.onKeyDown_);
  }

  onClick_ = () => {
    event.preventDefault();
    event.stopPropagation();
    this.classList.add('selected');
    window.pagePopupController.openEyeDropper();
  };

  /**
   * @param {!Event} event
   */
  onKeyDown_ = (event) => {
    switch (event.key) {
      case 'Enter':
        this.onClick_();
        break;
    }
  };

  finished = () => {
    this.classList.remove('selected');
  }
}
window.customElements.define('eye-dropper', EyeDropper);

/**
 * ColorViewer: Provides a view of the selected color.
 */
class ColorViewer extends HTMLElement {
  /**
   * @param {!Color} initialColor
   */
  constructor(initialColor) {
    super();

    this.color = initialColor;

    // Leave the ColorViewer out of the accessibility tree; it's redundant
    // with the updates from ColorValueAXAnnouncer.
    this.setAttribute('aria-hidden', 'true');
  }

  get color() {
    return this.color_;
  }

  /**
   * @param {!Color} color
   */
  set color(color) {
    if (this.color_ === undefined || !this.color_.equals(color)) {
      this.color_ = color;
      this.style.backgroundColor = color.asRGB();
    }
  }
}
window.customElements.define('color-viewer', ColorViewer);

/**
 * ColorSelectionArea: Base class for ColorWell and HueSlider that encapsulates
 *                     a ColorPalette and a ColorSelectionRing.
 */
class ColorSelectionArea extends HTMLElement {
  constructor() {
    super();

    this.colorPalette_ = new ColorPalette();
    this.colorSelectionRing_ = new ColorSelectionRing(this.colorPalette_);
    this.append(this.colorPalette_, this.colorSelectionRing_);
    this.initialized_ = false;

    this.colorSelectionRing_.addEventListener(
        'focus', this.onColorSelectionRingFocus_);
    this.colorSelectionRing_.addEventListener(
        'blur', this.onColorSelectionRingBlur_);
  }

  get initialized() {
    return this.initialized_;
  }

  onColorSelectionRingFocus_ = () => {
    this.focused_ = true;
  };

  onColorSelectionRingBlur_ = () => {
    this.focused_ = false;
  };

  /**
   * @param {!Point} point
   */
  pointerDown(point) {
    this.colorSelectionRing_.focus({preventScroll: true});
    this.colorSelectionRing_.drag = true;
    this.moveColorSelectionRingTo_(point);
  }

  /**
   * @param {!Point} point
   */
  pointerMove(point) {
    if (this.colorSelectionRing_.drag) {
      this.moveColorSelectionRingTo_(point);
    }
  }

  pointerUp() {
    this.colorSelectionRing_.drag = false;
  }

  /**
   * @param {!Direction} direction
   * @param {bool} accelerated
   */
  move(direction, accelerated) {
    if (this.focused) {
      this.colorSelectionRing_.move(direction, accelerated);
    }
  }

  get focused() {
    return this.focused_;
  }

  /**
   * @param {bool} focused
   */
  set focused(focused) {
    this.focused_ = focused;
  }
}
window.customElements.define('color-selection-area', ColorSelectionArea);

/**
 * ColorPalette: Displays a range of colors.
 */
class ColorPalette extends HTMLCanvasElement {
  constructor() {
    super();

    this.gradients_ = [];
  }

  /**
   * @param {...CanvasGradient} gradients
   */
  initialize(...gradients) {
    this.width = this.offsetWidth;
    this.height = this.offsetHeight;
    this.renderingContext.rect(0, 0, this.width, this.height);
    this.gradients_.push(...gradients);
    this.fillColor = new Color('hsl(0, 100%, 50%)');
  }

  get hslImageData() {
    if (this.pendingColorChange_) {
      const rgbaImageData =
          this.renderingContext.getImageData(0, 0, this.width, this.height)
              .data;
      this.hslImageData_ =
          rgbaImageData.reduce((hslArray, {}, currentIndex, rgbaArray) => {
            if ((currentIndex % 4) === 0) {
              hslArray.push(...Color.rgbToHSL(
                  rgbaArray[currentIndex], rgbaArray[currentIndex + 1],
                  rgbaArray[currentIndex + 2]));
            }
            return hslArray;
          }, []);
      this.pendingColorChange_ = false;
    }
    if (this.pendingHueChange_) {
      const hValueToSet = this.fillColor.hValue;
      this.hslImageData_.forEach(({}, currentIndex, hslArray) => {
        if ((currentIndex % 3) === 0) {
          hslArray[currentIndex] = hValueToSet;
        }
      });

      this.pendingHueChange_ = false;
    }
    return this.hslImageData_;
  }

  /**
   * @param {!Point} point
   */
  colorAtPoint(point) {
    const hslImageDataAtPoint =
        this.hslImageDataAtPoint_(point.x - this.left, point.y - this.top);
    return new Color(
        ColorFormat.HSL, hslImageDataAtPoint[0], hslImageDataAtPoint[1],
        hslImageDataAtPoint[2]);
  }

  /**
   * @param {number} x
   * @param {number} y
   */
  hslImageDataAtPoint_(x, y) {
    let offset = (y * this.width + x) * 3;
    // It is possible that the computed offset is larger than the hslImageData
    // array's length. This can happen at certain zoom levels (ex. 150%), where
    // the height of the color well is not a round number. The getImageData API
    // only works with integer values and will truncate decimal values. As
    // such, if the color well's selection ring is placed at the bottom of the
    // color well at such a zoom level, a valid data point for the ring's
    // position will not be found in the hslImageData array. When this happens,
    // we just report the color at the end of the hslImageData array. This will
    // be the same color that is seen at the bottom of the color well (black).
    offset = Math.min(offset, this.hslImageData.length - 3);
    return this.hslImageData.slice(offset, offset + 3);
  }

  get renderingContext() {
    return this.getContext('2d');
  }

  get fillColor() {
    return this.fillColor_;
  }

  /**
   * @param {!Color} color
   */
  set fillColor(color) {
    this.fillColor_ = color;
    this.fillColorAndGradients_();
    this.pendingColorChange_ = true;
  }

  /**
   * @param {!Color} color
   */
  fillHue(color) {
    this.fillColor_ = new Color(
        ColorFormat.HSL, color.hValue, this.fillColor_.sValue,
        this.fillColor_.lValue);
    this.fillColorAndGradients_();
    this.pendingHueChange_ = true;
  }

  fillColorAndGradients_() {
    this.fillWithStyle_(this.fillColor_.asRGB());
    this.gradients_.forEach((gradient) => this.fillWithStyle_(gradient));
  }

  /**
   * @param {string|!CanvasGradient} fillStyle
   */
  fillWithStyle_(fillStyle) {
    let colorPaletteCtx = this.renderingContext;
    colorPaletteCtx.fillStyle = fillStyle;
    colorPaletteCtx.fill();
  }

  /**
   * @param {!Point} point
   */
  nearestPointOnColorPalette(point) {
    if (!this.isXCoordinateOnColorPalette_(point)) {
      if (point.x > this.right) {
        point.x = this.right;
      } else if (point.x < this.left) {
        point.x = this.left;
      }
    }
    if (!this.isYCoordinateOnColorPalette_(point)) {
      if (point.y > this.bottom) {
        point.y = this.bottom;
      } else if (point.y < this.top) {
        point.y = this.top;
      }
    }
    return point;
  }

  /**
   * @param {!Point} point
   */
  isXCoordinateOnColorPalette_(point) {
    return (point.x >= this.left) && (point.x <= this.right);
  }

  /**
   * @param {!Point} point
   */
  isYCoordinateOnColorPalette_(point) {
    return (point.y >= this.top) && (point.y <= this.bottom);
  }

  get left() {
    return Math.ceil(this.getBoundingClientRect().left);
  }

  get right() {
    return Math.ceil(this.getBoundingClientRect().right - 1);
  }

  get top() {
    return Math.ceil(this.getBoundingClientRect().top);
  }

  get bottom() {
    return Math.ceil(this.getBoundingClientRect().bottom - 1);
  }
}
window.customElements.define(
    'color-palette', ColorPalette, {extends: 'canvas'});

/**
 * ColorSelectionRing: Provides movement and color selection functionality to
 *                     pick colors from a given ColorPalette.
 */
class ColorSelectionRing extends HTMLElement {
  /**
   * @param {!ColorPalette} backingColorPalette
   */
  constructor(backingColorPalette) {
    super();

    this.setAttribute('tabIndex', 0);
    this.backingColorPalette_ = backingColorPalette;
    this.position_ = new Point(0, 0);
    this.drag_ = false;
  }

  static get ACCELERATED_MOVE_DISTANCE() {
    return 20;
  }

  static get MOVE_DISTANCE() {
    return 1;
  }

  initialize() {
    this.set(this.backingColorPalette_.left, this.backingColorPalette_.top);
    this.onPositionChange_();
  }

  /**
   * @param {!Point} newPosition
   */
  moveTo(newPosition) {
    this.set(newPosition.x, newPosition.y);
  }

  /**
   * @param {number} x
   * @param {number} y
   */
  set(x, y) {
    if ((x !== this.position_.x) || (y !== this.position_.y)) {
      this.position_.x = x;
      this.position_.y = y;
      this.onPositionChange_();
    }
  }

  /**
   * @param {number} x
   */
  setX(x) {
    if (x !== this.position_.x) {
      this.position_.x = x;
      this.onPositionChange_();
    }
  }

  /**
   * @param {number} x
   */
  setY(y) {
    if (y !== this.position_.y) {
      this.position_.y = y;
      this.onPositionChange_();
    }
  }

  /**
   * @param {number} shiftFactor
   */
  shiftX(shiftFactor) {
    this.setX(this.position_.x + shiftFactor);
  }

  onPositionChange_() {
    this.setElementPosition_();
    this.updatePositionForAria_();
    this.updateColor();
  }

  initializeAria(isForColorWell) {
    this.setAttribute('role', 'slider');
    this.isForColorWell = isForColorWell;
    this.setAttribute('aria-valuemin', 0);
    if (isForColorWell) {
      this.setAttribute('aria-label', global.params.axColorWellLabel);
      this.setAttribute(
          'aria-roledescription', global.params.axColorWellRoleDescription);
      this.setAttribute(
          'aria-valuemax',
          this.backingColorPalette_.offsetHeight *
              this.backingColorPalette_.offsetWidth);
    } else {
      this.setAttribute('aria-label', global.params.axHueSliderLabel);
      this.setAttribute(
          'aria-valuemax',
          this.backingColorPalette_.right - this.backingColorPalette_.left);
    }
    this.updatePositionForAria_();
  }

  updatePositionForAria_() {
    if (this.isForColorWell) {
      let positionX = (this.position_.x - this.backingColorPalette_.left);
      let positionY = (this.position_.y - this.backingColorPalette_.top);
      let colorWellWidth =
          (this.backingColorPalette_.right - this.backingColorPalette_.left);

      // aria-valuenow only takes a single numeric value, so we use this
      // scheme to collapse the 2-D coordinates into a 1-D slider value.
      this.setAttribute(
          'aria-valuenow', (positionY * colorWellWidth) + positionX);

      this.setAttribute('aria-valuetext', `X: ${positionX}, Y: ${positionY}`);
    } else {
      this.setAttribute(
          'aria-valuenow', this.position_.x - this.backingColorPalette_.left);
    }
  }

  setElementPosition_() {
    if (this.height > this.backingColorPalette_.height) {
      this.style.top = this.top -
          (this.height - this.backingColorPalette_.height) / 2 -
          this.backingColorPalette_.top + 'px';
    } else {
      this.style.top =
          this.top - this.radius - this.backingColorPalette_.top + 'px';
    }
    if (this.width > this.backingColorPalette_.width) {
      this.style.left = this.left -
          (this.width - this.backingColorPalette_.width) / 2 -
          this.backingColorPalette_.left + 'px';
    } else {
      this.style.left =
          this.left - this.radius - this.backingColorPalette_.left + 'px';
    }
  }

  updateColor() {
    this.color = this.backingColorPalette_.colorAtPoint(this.position_);
    this.dispatchEvent(new CustomEvent('color-selection-ring-update'));
  }

  get color() {
    return this.color_;
  }

  /**
   * @param {!Color} color
   */
  set color(color) {
    if (this.color_ === undefined || !this.color_.equals(color)) {
      this.color_ = color;
      this.style.backgroundColor = color.asRGB();
    }
  }

  get canMoveHorizontally_() {
    return this.width < this.backingColorPalette_.width;
  }

  get canMoveVertically_() {
    return this.height < this.backingColorPalette_.height;
  }

  /**
   * @param {!Direction} direction
   * @param {bool} accelerated
   */
  move(direction, accelerated) {
    let shiftFactor = accelerated ?
        ColorSelectionRing.ACCELERATED_MOVE_DISTANCE :
        ColorSelectionRing.MOVE_DISTANCE;
    if ((direction === Direction.UP) || (direction === Direction.LEFT)) {
      shiftFactor *= -1;
    }
    if (this.canMoveHorizontally_ &&
        ((direction === Direction.LEFT) || (direction === Direction.RIGHT))) {
      let newX = this.position_.x + shiftFactor;
      if (direction === Direction.LEFT) {
        if (this.position_.x + shiftFactor < this.backingColorPalette_.left) {
          newX = this.backingColorPalette_.left;
        }
      } else {
        // direction === Direction.RIGHT
        if (this.position_.x + shiftFactor > this.backingColorPalette_.right) {
          newX = this.backingColorPalette_.right;
        }
      }
      this.setX(newX);
    } else if (
        this.canMoveVertically_ &&
        ((direction === Direction.UP) || (direction === Direction.DOWN))) {
      let newY = this.position_.y + shiftFactor;
      if (direction === Direction.UP) {
        if (this.position_.y + shiftFactor < this.backingColorPalette_.top) {
          newY = this.backingColorPalette_.top;
        }
      } else {
        // direction === Direction.DOWN
        if (this.position_.y + shiftFactor > this.backingColorPalette_.bottom) {
          newY = this.backingColorPalette_.bottom;
        }
      }
      this.setY(newY);
    }
  }

  get drag() {
    return this.drag_;
  }

  /**
   * @param {boolean} drag
   */
  set drag(drag) {
    this.drag_ = drag;
  }

  get radius() {
    return this.width / 2;
  }

  get width() {
    return Math.floor(this.getBoundingClientRect().width);
  }

  get height() {
    return Math.floor(this.getBoundingClientRect().height);
  }

  get left() {
    return this.position_.x;
  }

  get top() {
    return this.position_.y;
  }
}
window.customElements.define('color-selection-ring', ColorSelectionRing);

/**
 * ColorWell: Allows selection from a range of colors, between black and white,
 *            that have the same hue value.
 */
class ColorWell extends ColorSelectionArea {
  /**
   * @param {!Color} initialColor
   */
  constructor(initialColor) {
    super();

    this.fillColor_ = new Color(ColorFormat.HSL, initialColor.hValue, 100, 50);
    this.selectedColor_ = initialColor;

    this.resizeObserver_ = new ResizeObserver(() => {
      let whiteGradient =
          this.colorPalette_.renderingContext.createLinearGradient(
              0, 0, this.colorPalette_.offsetWidth, 0);
      whiteGradient.addColorStop(0.01, 'hsla(0, 0%, 100%, 1)');
      whiteGradient.addColorStop(0.99, 'hsla(0, 0%, 100%, 0)');
      let blackGradient =
          this.colorPalette_.renderingContext.createLinearGradient(
              0, this.colorPalette_.offsetHeight, 0, 0);
      blackGradient.addColorStop(0.01, 'hsla(0, 0%, 0%, 1)');
      blackGradient.addColorStop(0.99, 'hsla(0, 0%, 0%, 0)');
      this.colorPalette_.initialize(whiteGradient, blackGradient);
      this.colorPalette_.fillHue(this.fillColor_);
      this.colorSelectionRing_.initialize();

      this.colorSelectionRing_.addEventListener(
          'color-selection-ring-update', this.onColorSelectionRingUpdate_);

      this.moveColorSelectionRingTo_(this.selectedColor_);
      this.colorSelectionRing_.initializeAria(/*isForColorWell*/ true);

      this.resizeObserver_.disconnect();
      this.resizeObserver_ = null;

      this.initialized_ = true;
      this.dispatchEvent(new CustomEvent('color-well-initialized'));
    });
    this.resizeObserver_.observe(this);
  }

  /**
   * @param {!Point|!Color} newPositionOrColor
   */
  moveColorSelectionRingTo_(newPositionOrColor) {
    if (newPositionOrColor instanceof Point) {
      const point =
          this.colorPalette_.nearestPointOnColorPalette(newPositionOrColor);
      this.colorSelectionRing_.moveTo(point);
    } else {
      const closestHSLValueIndex = this.colorPalette_.hslImageData.reduce(
          (closestSoFar, {}, index, array) => {
            if ((index % 3) === 0) {
              const currentHSLValueDistance = Color.distance(
                  [array[index], array[index + 1], array[index + 2]],
                  newPositionOrColor.hslValues());
              const closestHSLValueDistance = Color.distance(
                  [
                    array[closestSoFar], array[closestSoFar + 1],
                    array[closestSoFar + 2]
                  ],
                  newPositionOrColor.hslValues());
              if (currentHSLValueDistance < closestHSLValueDistance) {
                return index;
              }
            }
            return closestSoFar;
          },
          0);
      const offsetX = (closestHSLValueIndex / 3) % this.colorPalette_.width;
      const offsetY =
          Math.floor((closestHSLValueIndex / 3) / this.colorPalette_.width);
      this.colorSelectionRing_.set(
          this.colorPalette_.left + offsetX, this.colorPalette_.top + offsetY);
    }
  }

  get selectedColor() {
    return this.selectedColor_;
  }

  /**
   * @param {!Color} newColor
   */
  set selectedColor(newColor) {
    if (!this.selectedColor_.equals(newColor)) {
      this.selectedColor_ = newColor;
      this.moveColorSelectionRingTo_(newColor);
    }
  }

  get fillColor() {
    return this.fillColor_;
  }

  /**
   * @param {!Color} color
   */
  set fillColor(color) {
    if (!this.fillColor_.equals(color)) {
      this.fillColor_ = color;
      this.colorPalette_.fillHue(color);
      this.colorSelectionRing_.updateColor();
    }
  }

  onColorSelectionRingUpdate_ = () => {
    this.selectedColor_ = this.colorSelectionRing_.color;
    this.dispatchEvent(new CustomEvent(
        'visual-color-change',
        {bubbles: true, detail: {color: this.selectedColor}}));
  }
}
window.customElements.define('color-well', ColorWell);

/**
 * HueSlider: Allows selection from a range of colors with distinct hue values.
 */
class HueSlider extends ColorSelectionArea {
  /**
   * @param {!Color} initialColor
   */
  constructor(initialColor) {
    super();

    this.color_ = new Color(ColorFormat.HSL, initialColor.hValue, 100, 50);

    this.resizeObserver_ = new ResizeObserver(() => {
      let hueSliderPaletteGradient =
          this.colorPalette_.renderingContext.createLinearGradient(
              0, 0, this.colorPalette_.offsetWidth, 0);
      hueSliderPaletteGradient.addColorStop(0.01, 'hsl(0, 100%, 50%)');
      hueSliderPaletteGradient.addColorStop(0.17, 'hsl(300, 100%, 50%)');
      hueSliderPaletteGradient.addColorStop(0.33, 'hsl(240, 100%, 50%)');
      hueSliderPaletteGradient.addColorStop(0.5, 'hsl(180, 100%, 50%)');
      hueSliderPaletteGradient.addColorStop(0.67, 'hsl(120, 100%, 50%)');
      hueSliderPaletteGradient.addColorStop(0.83, 'hsl(60, 100%, 50%)');
      hueSliderPaletteGradient.addColorStop(0.99, 'hsl(0, 100%, 50%)');
      this.colorPalette_.initialize(hueSliderPaletteGradient);
      this.colorSelectionRing_.initialize();

      this.colorSelectionRing_.addEventListener(
          'color-selection-ring-update', this.onColorSelectionRingUpdate_);

      this.moveColorSelectionRingTo_(this.color_);
      this.colorSelectionRing_.initializeAria(/*isForColorWell*/ false);

      this.resizeObserver_.disconnect();
      this.resizeObserver_ = null;

      this.initialized_ = true;
      this.dispatchEvent(new CustomEvent('hue-slider-initialized'));
    });
    this.resizeObserver_.observe(this);
  }

  /**
   * @param {!Point|!Color} newPositionOrColor
   */
  moveColorSelectionRingTo_(newPositionOrColor) {
    if (newPositionOrColor instanceof Point) {
      const point =
          this.colorPalette_.nearestPointOnColorPalette(newPositionOrColor);
      this.colorSelectionRing_.shiftX(point.x - this.colorSelectionRing_.left);
    } else {
      const targetHValue = newPositionOrColor.hValue;
      if (targetHValue !== this.colorSelectionRing_.color.hValue) {
        const closestHValueIndex = this.colorPalette_.hslImageData.reduce(
            (closestHValueIndexSoFar, currentHValue, index, array) => {
              if ((index % 3 === 0) &&
                  (Math.abs(currentHValue - targetHValue) <
                   Math.abs(array[closestHValueIndexSoFar] - targetHValue))) {
                return index;
              }
              return closestHValueIndexSoFar;
            },
            0);
        const offsetX = (closestHValueIndex / 3) % this.colorPalette_.width;
        this.colorSelectionRing_.setX(this.colorPalette_.left + offsetX);
      }
    }
  }

  get color() {
    return this.color_;
  }

  /**
   * @param {!Color} newColor
   */
  set color(newColor) {
    if (this.color_.hValue !== newColor.hValue) {
      this.color_ = new Color(ColorFormat.HSL, newColor.hValue, 100, 50);
      this.moveColorSelectionRingTo_(this.color_);
    }
  }

  onColorSelectionRingUpdate_ = () => {
    this.color_ = this.colorSelectionRing_.color;
    this.dispatchEvent(new CustomEvent('hue-slider-update', {bubbles: true}));
  }
}
window.customElements.define('hue-slider', HueSlider);

/**
 * ManualColorPicker: Provides functionality to change the selected color by
 *                    manipulating its numeric values.
 */
class ManualColorPicker extends HTMLElement {
  /**
   * @param {!Color} initialColor
   */
  constructor(initialColor) {
    super();

    this.hexValueContainer_ =
        new ColorValueContainer(ColorChannel.HEX, initialColor);
    this.rgbValueContainer_ =
        new ColorValueContainer(ColorFormat.RGB, initialColor);
    this.hslValueContainer_ =
        new ColorValueContainer(ColorFormat.HSL, initialColor);
    this.colorValueContainers_ = [
      this.hexValueContainer_,
      this.rgbValueContainer_,
      this.hslValueContainer_,
    ];
    this.currentColorFormat_ = ColorFormat.RGB;
    this.adjustValueContainerVisibility_();
    this.formatToggler_ = new FormatToggler(this.currentColorFormat_);
    this.append(...this.colorValueContainers_, this.formatToggler_);

    this.formatToggler_.addEventListener('format-change', this.onFormatChange_);

    this.addEventListener('manual-color-change', this.onManualColorChange_);
  }

  adjustValueContainerVisibility_() {
    this.colorValueContainers_.forEach((colorValueContainer) => {
      if (colorValueContainer.colorFormat === this.currentColorFormat_) {
        colorValueContainer.show();
      } else {
        colorValueContainer.hide();
      }
    });
  }

  /**
   * @param {!Event} event
   */
  onFormatChange_ = (event) => {
    this.currentColorFormat_ = event.detail.colorFormat;
    this.adjustValueContainerVisibility_();
  }

  /**
   * @param {!Event} event
   */
  onManualColorChange_ = (event) => {
    this.color = event.detail.color;
  }

  /**
   * @param {!Color} newColor
   */
  set color(newColor) {
    this.colorValueContainers_.forEach(
        (colorValueContainer) => colorValueContainer.color = newColor);
  }
}
window.customElements.define('manual-color-picker', ManualColorPicker);

/**
 * ColorValueContainer: Maintains a set of channel values that make up a given
 *                      color format, and tracks value changes.
 */
class ColorValueContainer extends HTMLElement {
  /**
   * @param {!ColorFormat} colorFormat
   * @param {!Color} initialColor
   */
  constructor(colorFormat, initialColor) {
    super();

    this.colorFormat_ = colorFormat;
    this.channelValueContainers_ = [];
    if (this.colorFormat_ === ColorFormat.HEX) {
      const hexValueContainer =
          new ChannelValueContainer(ColorChannel.HEX, initialColor);
      this.channelValueContainers_.push(hexValueContainer);
    } else if (this.colorFormat_ === ColorFormat.RGB) {
      const rValueContainer =
          new ChannelValueContainer(ColorChannel.R, initialColor);
      const gValueContainer =
          new ChannelValueContainer(ColorChannel.G, initialColor);
      const bValueContainer =
          new ChannelValueContainer(ColorChannel.B, initialColor);
      this.channelValueContainers_.push(
          rValueContainer, gValueContainer, bValueContainer);
    } else if (this.colorFormat_ === ColorFormat.HSL) {
      const hValueContainer =
          new ChannelValueContainer(ColorChannel.H, initialColor);
      const sValueContainer =
          new ChannelValueContainer(ColorChannel.S, initialColor);
      const lValueContainer =
          new ChannelValueContainer(ColorChannel.L, initialColor);
      this.channelValueContainers_.push(
          hValueContainer, sValueContainer, lValueContainer);
    }
    this.append(...this.channelValueContainers_);

    this.channelValueContainers_.forEach(
        (channelValueContainer) => channelValueContainer.addEventListener(
            'input', this.onChannelValueChange_));
  }

  get colorFormat() {
    return this.colorFormat_;
  }

  get color() {
    return new Color(
        this.colorFormat_,
        ...this.channelValueContainers_.map(
            (channelValueContainer) => channelValueContainer.channelValue));
  }

  /**
   * @param {!Color} color
   */
  set color(color) {
    this.channelValueContainers_.forEach(
        (channelValueContainer) => channelValueContainer.setValue(color));
  }

  show() {
    return this.classList.remove('hidden-color-value-container');
  }

  hide() {
    return this.classList.add('hidden-color-value-container');
  }

  onChannelValueChange_ = () => {
    this.dispatchEvent(new CustomEvent(
        'manual-color-change', {bubbles: true, detail: {color: this.color}}));
  }
}
window.customElements.define('color-value-container', ColorValueContainer);

/**
 * ChannelValueContainer: Maintains and displays the numeric value
 *                        for a given color channel.
 */
class ChannelValueContainer extends HTMLInputElement {
  /**
   * @param {!ColorChannel} colorChannel
   * @param {!Color} initialColor
   */
  constructor(colorChannel, initialColor) {
    super();

    this.setAttribute('type', 'text');
    this.colorChannel_ = colorChannel;

    switch (colorChannel) {
      case ColorChannel.HEX:
        this.setAttribute('id', 'hexValueContainer');
        this.setAttribute('maxlength', '7');
        this.setAttribute('aria-label', global.params.axHexadecimalEditLabel);
        break;
      case ColorChannel.R:
        this.setAttribute('id', 'rValueContainer');
        this.setAttribute('maxlength', '3');
        this.setAttribute('aria-label', global.params.axRedEditLabel);
        break;
      case ColorChannel.G:
        this.setAttribute('id', 'gValueContainer');
        this.setAttribute('maxlength', '3');
        this.setAttribute('aria-label', global.params.axGreenEditLabel);
        break;
      case ColorChannel.B:
        this.setAttribute('id', 'bValueContainer');
        this.setAttribute('maxlength', '3');
        this.setAttribute('aria-label', global.params.axBlueEditLabel);
        break;
      case ColorChannel.H:
        this.setAttribute('id', 'hValueContainer');
        this.setAttribute('maxlength', '3');
        this.setAttribute('aria-label', global.params.axHueEditLabel);
        break;
      case ColorChannel.S:
        // up to 3 digits plus '%'
        this.setAttribute('id', 'sValueContainer');
        this.setAttribute('maxlength', '4');
        this.setAttribute('aria-label', global.params.axSaturationEditLabel);
        break;
      case ColorChannel.L:
        // up to 3 digits plus '%'
        this.setAttribute('id', 'lValueContainer');
        this.setAttribute('maxlength', '4');
        this.setAttribute('aria-label', global.params.axLightnessEditLabel);
        break;
    }
    this.setValue(initialColor);

    this.addEventListener('input', this.onValueChange_);
    this.addEventListener('blur', this.onBlur_);
  }

  get channelValue() {
    return this.channelValue_;
  }

  /**
   * @param {!Color} color
   */
  setValue(color) {
    switch (this.colorChannel_) {
      case ColorChannel.HEX:
        if (this.channelValue_ !== color.hexValue) {
          this.channelValue_ = color.hexValue;
          this.value = '#' + this.channelValue_;
        }
        break;
      case ColorChannel.R:
        if (this.channelValue_ !== color.rValue) {
          this.channelValue_ = color.rValue;
          this.value = this.channelValue_;
        }
        break;
      case ColorChannel.G:
        if (this.channelValue_ !== color.gValue) {
          this.channelValue_ = color.gValue;
          this.value = this.channelValue_;
        }
        break;
      case ColorChannel.B:
        if (this.channelValue_ !== color.bValue) {
          this.channelValue_ = color.bValue;
          this.value = this.channelValue_;
        }
        break;
      case ColorChannel.H:
        if (this.channelValue_ !== color.hValue) {
          this.channelValue_ = color.hValue;
          this.value = this.channelValue_;
        }
        break;
      case ColorChannel.S:
        if (this.channelValue_ !== color.sValue) {
          this.channelValue_ = color.sValue;
          this.value = this.channelValue_ + '%';
        }
        break;
      case ColorChannel.L:
        if (this.channelValue_ !== color.lValue) {
          this.channelValue_ = color.lValue;
          this.value = this.channelValue_ + '%';
        }
        break;
    }
  }

  onValueChange_ = () => {
    // Set this.channelValue_ based on the element's new value.
    let value = this.value;
    if (value) {
      switch (this.colorChannel_) {
        case ColorChannel.HEX:
          if (value.startsWith('#')) {
            value = value.substr(1).toLowerCase();
            if (value.match(/^[0-9a-f]+$/)) {
              // Ex. 'ffffff' => this.channelValue_ == 'ffffff'
              // Ex. 'ff' => this.channelValue_ == '0000ff'
              this.channelValue_ = ('000000' + value).slice(-6);
            }
          }
          break;
        case ColorChannel.R:
        case ColorChannel.G:
        case ColorChannel.B:
          if (value.match(/^\d+$/) && (0 <= value) && (value <= 255)) {
            this.channelValue_ = Number(value);
          }
          break;
        case ColorChannel.H:
          if (value.match(/^\d+$/) && (0 <= value) && (value < 360)) {
            this.channelValue_ = Number(value);
          }
          break;
        case ColorChannel.S:
        case ColorChannel.L:
          if (value.endsWith('%')) {
            value = value.substring(0, value.length - 1);
            if (value.match(/^\d+$/) && (0 <= value) && (value <= 100)) {
              this.channelValue_ = Number(value);
            }
          }
          break;
      }
    }
  }

  onBlur_ = () => {
    switch (this.colorChannel_) {
      case ColorChannel.HEX:
        if (this.channelValue_ !== Number(this.value.substr(1))) {
          this.value = '#' + this.channelValue_;
        }
        break;
      case ColorChannel.R:
      case ColorChannel.G:
      case ColorChannel.B:
      case ColorChannel.H:
        if (this.channelValue_ !== Number(this.value)) {
          this.value = this.channelValue_;
        }
        break;
      case ColorChannel.S:
      case ColorChannel.L:
        if (this.channelValue_ !==
            Number(this.value.substring(0, this.value.length - 1))) {
          this.value = this.channelValue_ + '%';
        }
        break;
    }
  }
}
window.customElements.define(
    'channel-value-container', ChannelValueContainer, {extends: 'input'});

/**
 * FormatToggler: Button that powers switching between different color formats.
 */
class FormatToggler extends HTMLElement {
  /**
   * @param {!ColorFormat} initialColorFormat
   */
  constructor(initialColorFormat) {
    super();

    this.setAttribute('tabIndex', 0);
    this.setAttribute('role', 'spinbutton');
    this.setAttribute('aria-label', global.params.axFormatTogglerLabel);
    this.setAttribute('aria-valuenow', '1');
    this.setAttribute('aria-valuemin', '1');
    this.setAttribute('aria-valuemax', '3');
    this.currentColorFormat_ = initialColorFormat;
    this.rgbFormatLabel_ = new FormatLabel(ColorFormat.RGB);
    this.hexFormatLabel_ = new FormatLabel(ColorFormat.HEX);
    this.hslFormatLabel_ = new FormatLabel(ColorFormat.HSL);
    this.colorFormatLabels_ = [
      this.rgbFormatLabel_,
      this.hexFormatLabel_,
      this.hslFormatLabel_,
    ];
    this.adjustFormatLabelVisibility_();

    this.upDownIcon_ = document.createElement('span');
    this.upDownIcon_.setAttribute('id', 'up-down-icon');
    this.upDownIcon_.innerHTML =
        '<svg width="6" height="8" viewBox="0 0 6 8" fill="none" ' +
        'xmlns="http://www.w3.org/2000/svg"><path d="M1.18359 ' +
        '3.18359L0.617188 2.61719L3 0.234375L5.38281 2.61719L4.81641 ' +
        '3.18359L3 1.36719L1.18359 3.18359ZM4.81641 4.81641L5.38281 ' +
        '5.38281L3 7.76562L0.617188 5.38281L1.18359 4.81641L3 ' +
        '6.63281L4.81641 4.81641Z" fill="WindowText"/></svg>';

    this.append(...this.colorFormatLabels_, this.upDownIcon_);

    this.addEventListener('click', this.onClick_);
    this.addEventListener('keydown', this.onKeyDown_);
    this.addEventListener('mousedown', (event) => event.preventDefault());
  }

  /**
   * @param {bool} choosePreviousFormat if true, choose previous format
   *                                    instead of next
   */
  updateColorFormat_(choosePreviousFormat) {
    const numFormats = Object.keys(ColorFormat).length;
    const newValue = choosePreviousFormat ? this.currentColorFormat_ - 1 :
                                            this.currentColorFormat_ + 1;
    const newColorFormatKey = Object.keys(ColorFormat).filter((key) => {
      return ColorFormat[key] ===
          (((newValue % numFormats) + numFormats) % numFormats);
    });
    this.currentColorFormat_ = ColorFormat[newColorFormatKey];

    if (this.currentColorFormat_ === ColorFormat.RGB) {
      this.setAttribute('aria-valuenow', '1');
    } else if (this.currentColorFormat_ === ColorFormat.HSL) {
      this.setAttribute('aria-valuenow', '2');
    } else if (this.currentColorFormat_ === ColorFormat.HEX) {
      this.setAttribute('aria-valuenow', '3');
    }

    this.adjustFormatLabelVisibility_();

    this.dispatchEvent(new CustomEvent(
        'format-change',
        {bubbles: true, detail: {colorFormat: this.currentColorFormat_}}));
  }

  adjustFormatLabelVisibility_() {
    this.colorFormatLabels_.forEach((colorFormatLabel) => {
      if (colorFormatLabel.colorFormat === this.currentColorFormat_) {
        colorFormatLabel.show();
      } else {
        colorFormatLabel.hide();
      }
    });
  }

  onClick_ = () => {
    this.focus();
    this.updateColorFormat_(false);
  };

  /**
   * @param {!Event} event
   */
  onKeyDown_ = (event) => {
    switch (event.key) {
      case 'ArrowUp':
        this.updateColorFormat_(true);
        break;
      case 'ArrowDown':
      case ' ':
        this.updateColorFormat_(false);
        break;
    }
  }
}
window.customElements.define('format-toggler', FormatToggler);

/**
 * FormatLabel: Label for a given color format.
 */
class FormatLabel extends HTMLElement {
  /**
   * @param {!ColorFormat} colorFormat
   */
  constructor(colorFormat) {
    super();

    this.colorFormat_ = colorFormat;
    if (colorFormat === ColorFormat.HEX) {
      this.hexChannelLabel_ = new ChannelLabel(ColorChannel.HEX);
      this.append(this.hexChannelLabel_);
    } else if (colorFormat === ColorFormat.RGB) {
      this.rChannelLabel_ = new ChannelLabel(ColorChannel.R);
      this.gChannelLabel_ = new ChannelLabel(ColorChannel.G);
      this.bChannelLabel_ = new ChannelLabel(ColorChannel.B);
      this.append(
          this.rChannelLabel_, this.gChannelLabel_, this.bChannelLabel_);
    } else if (colorFormat === ColorFormat.HSL) {
      this.hChannelLabel_ = new ChannelLabel(ColorChannel.H);
      this.sChannelLabel_ = new ChannelLabel(ColorChannel.S);
      this.lChannelLabel_ = new ChannelLabel(ColorChannel.L);
      this.append(
          this.hChannelLabel_, this.sChannelLabel_, this.lChannelLabel_);
    }
  }

  get colorFormat() {
    return this.colorFormat_;
  }

  show() {
    return this.classList.remove('hidden-format-label');
  }

  hide() {
    return this.classList.add('hidden-format-label');
  }
}
window.customElements.define('format-label', FormatLabel);

/**
 * ChannelLabel: Label for a color channel, to be used within a FormatLabel.
 */
class ChannelLabel extends HTMLElement {
  /**
   * @param {!ColorChannel} colorChannel
   */
  constructor(colorChannel) {
    super();

    if (colorChannel === ColorChannel.HEX) {
      this.textContent = 'HEX';
    } else if (colorChannel === ColorChannel.R) {
      this.textContent = 'R';
    } else if (colorChannel === ColorChannel.G) {
      this.textContent = 'G';
    } else if (colorChannel === ColorChannel.B) {
      this.textContent = 'B';
    } else if (colorChannel === ColorChannel.H) {
      this.textContent = 'H';
    } else if (colorChannel === ColorChannel.S) {
      this.textContent = 'S';
    } else if (colorChannel === ColorChannel.L) {
      this.textContent = 'L';
    }
  }
}
window.customElements.define('channel-label', ChannelLabel);

/**
 * ColorValueAXAnnouncer: Make announcements to be read out by accessibility tools
 * when the color value is changed by the ColorWell or HueSlider.
 * Ideally it would be sufficient to just set the right ARIA attributes on the elements
 * themselves, but the color control does not fit neatly into existing ARIA roles.
 * ColorValueAXAnnouncer fills this gap by reading out color value changes using an
 * ARIA live region.
 */
class ColorValueAXAnnouncer extends HTMLElement {
  constructor() {
    super();
    this.setAttribute('aria-live', 'polite');
    this.colorFormat_ = ColorFormat.RGB;

    // We don't want this element to be visible so hide it off the edge of the popup.
    this.style.position = 'absolute';
    this.style.left = '-99999ch';

    this.addEventListener('format-change', this.onFormatChange_);
  }

  announceColor(newColor) {
    let announcementString = null;
    if (this.colorFormat_ === ColorFormat.HEX) {
      announcementString =
          `${global.params.axHexadecimalEditLabel} ${newColor.hexValue}`;
    } else if (this.colorFormat_ === ColorFormat.RGB) {
      announcementString =
          `${global.params.axRedEditLabel} ${newColor.rValue}, ${
              global.params.axGreenEditLabel} ${newColor.gValue}, ${
              global.params.axBlueEditLabel} ${newColor.bValue}`;
    } else if (this.colorFormat_ === ColorFormat.HSL) {
      announcementString =
          `${global.params.axHueEditLabel} ${newColor.hValue}, ${
              global.params.axSaturationEditLabel} ${newColor.sValue}, ${
              global.params.axLightnessEditLabel} ${newColor.lValue}`;
    }
    this.announce_(announcementString)
  }

  // Announce format changes via the live region in order to work around an
  // issue where Windows Narrator does not support aria-valuetext for
  // spinbutton.  The behavior that this achieves is similar to updating the
  // FormatToggler spinbutton's aria-valuetext whenever the format changes,
  // but it dodges the Narrator bug.
  // TODO(crbug.com/1073188): Remove this workaround and use aria-valuetext
  // instead once the Narrator bug has been fixed.
  announceColorFormat() {
    // These are deliberately non-localized so that they match the
    // abbreviations of the text on the FormatToggler ChannelLabels,
    // which are also not localized.
    let announcementString = null;
    if (this.colorFormat_ === ColorFormat.HEX) {
      announcementString = 'Hex';
    } else if (this.colorFormat_ === ColorFormat.RGB) {
      announcementString = 'RGB';
    } else if (this.colorFormat_ === ColorFormat.HSL) {
      announcementString = 'HSL';
    }

    this.announce_(announcementString)
  }

  updateColorFormat(newColorFormat) {
    this.colorFormat_ = newColorFormat;
    this.announceColorFormat();
  }

  announce_(announcementString) {
    // Only cue one announcement at a time so that user isn't spammed with a backlog
    // of announcements after holding down an arrow key.
    // Announce after a delay so that the control announces its raw position before
    // the full announcement starts.
    window.clearTimeout(this.pendingAnnouncement_);
    this.pendingAnnouncement_ = window.setTimeout(() => {
      if (this.textContent === announcementString) {
        // The AT will only do an announcement if the live-region content has
        // changed, so make a no-op change to fool it into announcing every
        // time.  Normal whitespace is ignored by Narrator for this purpose,
        // so use a non-breaking space.
        this.textContent += String.fromCharCode(160);
      } else {
        this.textContent = announcementString;
      }
    }, ColorValueAXAnnouncer.announcementDelayMS);
  }

  static announcementDelayMS = 500;
}
window.customElements.define('color-value-ax-announcer', ColorValueAXAnnouncer);