BASELINE: Update Chromium to 77.0.3865.59

Change-Id: I1e89a5f3b009a9519a6705102ad65c92fe736f21
Reviewed-by: Michael Brüning <michael.bruning@qt.io>

7 files changed, 656 insertions, 58 deletions

diff --git a/chromium/third_party/blink/renderer/core/html/forms/resources/calendarPicker.js b/chromium/third_party/blink/renderer/core/html/forms/resources/calendarPicker.js
index 9d50db7efba..f79a5cee0d9 100644
--- a/chromium/third_party/blink/renderer/core/html/forms/resources/calendarPicker.js
+++ b/chromium/third_party/blink/renderer/core/html/forms/resources/calendarPicker.js
@@ -108,11 +108,14 @@ function formatJapaneseImperialEra(year, month) {
                                                    {era: 'long'});
   }
   // Produce the era for day 16 because it's almost the midpoint of a month.
-  let day16string = japaneseEraFormatter.format(new Date(year, month, 16));
-  let nenIndex = day16string.indexOf('\u5e74');
+  // 275760-09-13 is the last valid date in ECMAScript. We apply day 7 in that
+  // case because it's the midpoint between 09-01 and 09-13.
+  let sampleDay = year == 275760 && month == 8 ? 7 : 16;
+  let sampleDayString = japaneseEraFormatter.format(new Date(year, month, sampleDay));
+  let nenIndex = sampleDayString.indexOf('\u5e74');
   if (nenIndex == -1)
     return '';
-  let yearPart = day16string.substring(0, nenIndex + 1);
+  let yearPart = sampleDayString.substring(0, nenIndex + 1);
 
   // We don't show an imperial era if it is greater than 99 because of space
   // limitation.
@@ -356,7 +359,7 @@ Day.prototype.format = function() {
   return Day.formatter.format(this.startDate());
 };
 
-// See platform/date_components.h.
+// See platform/text/date_components.h.
 Day.Minimum = Day.createFromValue(-62135596800000.0);
 Day.Maximum = Day.createFromValue(8640000000000000.0);
 
@@ -391,7 +394,7 @@ function Week(year, week) {
 
 Week.ISOStringRegExp = /^(\d+)-[wW](\d+)$/;
 
-// See platform/date_components.h.
+// See platform/text/date_components.h.
 Week.Minimum = new Week(1, 1);
 Week.Maximum = new Week(275760, 37);
 
@@ -613,7 +616,7 @@ function Month(year, month) {
 
 Month.ISOStringRegExp = /^(\d+)-(\d+)$/;
 
-// See platform/date_components.h.
+// See platform/text/date_components.h.
 Month.Minimum = new Month(1, 0);
 Month.Maximum = new Month(275760, 8);
 
diff --git a/chromium/third_party/blink/renderer/core/html/forms/resources/colorSuggestionPicker.css b/chromium/third_party/blink/renderer/core/html/forms/resources/colorSuggestionPicker.css
index eda7bbbc068..9a3e42df60f 100644
--- a/chromium/third_party/blink/renderer/core/html/forms/resources/colorSuggestionPicker.css
+++ b/chromium/third_party/blink/renderer/core/html/forms/resources/colorSuggestionPicker.css
@@ -31,7 +31,7 @@ body {
     overflow: hidden;
 }
 
-#main {
+.color-suggestion-picker-main {
     background-color: white;
     border: solid 1px #8899aa;
     box-shadow: inset 2px 2px 2px white,
diff --git a/chromium/third_party/blink/renderer/core/html/forms/resources/colorSuggestionPicker.js b/chromium/third_party/blink/renderer/core/html/forms/resources/colorSuggestionPicker.js
index aa2477f1381..15c60eb08ec 100644
--- a/chromium/third_party/blink/renderer/core/html/forms/resources/colorSuggestionPicker.js
+++ b/chromium/third_party/blink/renderer/core/html/forms/resources/colorSuggestionPicker.js
@@ -24,37 +24,25 @@
  * DAMAGE.
  */
 
-var global = {argumentsReceived: false, params: null};
 
-/**
- * @param {Event} event
- */
-function handleMessage(event) {
-  initialize(JSON.parse(event.data));
-  global.argumentsReceived = true;
+function initializeColorSuggestionPicker() {
+  new ColorSuggestionPicker(main, global.params);
 }
 
 /**
  * @param {!Object} args
+ * @return {?string} An error message, or null if the argument has no errors.
  */
-function initialize(args) {
-  global.params = args;
-  var main = $('main');
-  main.innerHTML = '';
-  var errorString = validateArguments(args);
-  if (errorString) {
-    main.textContent = 'Internal error: ' + errorString;
-    resizeWindow(main.offsetWidth, main.offsetHeight);
-  } else
-    new ColorPicker(main, args);
+function validateColorSuggestionPickerArguments(args) {
+  if (!args.shouldShowColorSuggestionPicker)
+    return 'Should not be showing the color suggestion picker.'
+  if (!args.values)
+    return 'No values.';
+  if (!args.otherColorLabel)
+    return 'No otherColorLabel.';
+  return null;
 }
 
-// The DefaultColorPalette is used when the list of values are empty.
-var DefaultColorPalette = [
-  '#000000', '#404040', '#808080', '#c0c0c0', '#ffffff', '#980000', '#ff0000', '#ff9900', '#ffff00', '#00ff00',
-  '#00ffff', '#4a86e8', '#0000ff', '#9900ff', '#ff00ff'
-];
-
 function handleArgumentsTimeout() {
   if (global.argumentsReceived)
     return;
@@ -62,19 +50,7 @@ function handleArgumentsTimeout() {
   initialize(args);
 }
 
-/**
- * @param {!Object} args
- * @return {?string} An error message, or null if the argument has no errors.
- */
-function validateArguments(args) {
-  if (!args.values)
-    return 'No values.';
-  if (!args.otherColorLabel)
-    return 'No otherColorLabel.';
-  return null;
-}
-
-function ColorPicker(element, config) {
+function ColorSuggestionPicker(element, config) {
   Picker.call(this, element, config);
   this._config = config;
   if (this._config.values.length === 0)
@@ -85,14 +61,14 @@ function ColorPicker(element, config) {
   this._element.addEventListener('mousemove', this._handleMouseMove.bind(this));
   this._element.addEventListener('mousedown', this._handleMouseDown.bind(this));
 }
-ColorPicker.prototype = Object.create(Picker.prototype);
+ColorSuggestionPicker.prototype = Object.create(Picker.prototype);
 
 var SwatchBorderBoxWidth = 24;   // keep in sync with CSS
 var SwatchBorderBoxHeight = 24;  // keep in sync with CSS
 var SwatchesPerRow = 5;
 var SwatchesMaxRow = 4;
 
-ColorPicker.prototype._layout = function() {
+ColorSuggestionPicker.prototype._layout = function() {
   var container = createElement('div', 'color-swatch-container');
   container.addEventListener('click', this._handleSwatchClick.bind(this), false);
   for (var i = 0; i < this._config.values.length; ++i) {
@@ -110,7 +86,7 @@ ColorPicker.prototype._layout = function() {
   container.style.maxHeight = (SwatchBorderBoxHeight * SwatchesMaxRow) + 'px';
   this._element.appendChild(container);
   var otherButton = createElement('button', 'other-color', this._config.otherColorLabel);
-  otherButton.addEventListener('click', this.chooseOtherColor.bind(this), false);
+  otherButton.addEventListener('click', this._onOtherButtonClick.bind(this), false);
   this._element.appendChild(otherButton);
   this._container = container;
   this._otherButton = otherButton;
@@ -119,23 +95,39 @@ ColorPicker.prototype._layout = function() {
   resizeWindow(elementWidth, elementHeight);
 };
 
-ColorPicker.prototype.selectColorAtIndex = function(index) {
+ColorSuggestionPicker.prototype._onOtherButtonClick = function() {
+  if (global.params.isFormControlsRefreshEnabled) {
+    var main = $('main');
+    main.innerHTML = '';
+    main.classList.remove('color-suggestion-picker-main');
+    main.classList.add('color-picker-main');
+    // Replace document.body with a deep clone to drop all event listeners.
+    var oldBody = document.body;
+    var newBody = oldBody.cloneNode(true);
+    oldBody.parentElement.replaceChild(newBody, oldBody);
+    initializeColorPicker();
+  } else {
+    this.chooseOtherColor();
+  }
+}
+
+ColorSuggestionPicker.prototype.selectColorAtIndex = function(index) {
   index = Math.max(Math.min(this._container.childNodes.length - 1, index), 0);
   this._container.childNodes[index].focus();
 };
 
-ColorPicker.prototype._handleMouseMove = function(event) {
+ColorSuggestionPicker.prototype._handleMouseMove = function(event) {
   if (event.target.classList.contains('color-swatch'))
     event.target.focus();
 };
 
-ColorPicker.prototype._handleMouseDown = function(event) {
+ColorSuggestionPicker.prototype._handleMouseDown = function(event) {
   // Prevent blur.
   if (event.target.classList.contains('color-swatch'))
     event.preventDefault();
 };
 
-ColorPicker.prototype._handleKeyDown = function(event) {
+ColorSuggestionPicker.prototype._handleKeyDown = function(event) {
   var key = event.key;
   if (key === 'Escape')
     this.handleCancel();
@@ -172,14 +164,7 @@ ColorPicker.prototype._handleKeyDown = function(event) {
   event.preventDefault();
 };
 
-ColorPicker.prototype._handleSwatchClick = function(event) {
+ColorSuggestionPicker.prototype._handleSwatchClick = function(event) {
   if (event.target.classList.contains('color-swatch'))
     this.submitValue(event.target.dataset.value);
 };
-
-if (window.dialogArguments) {
-  initialize(dialogArguments);
-} else {
-  window.addEventListener('message', handleMessage, false);
-  window.setTimeout(handleArgumentsTimeout, 1000);
-}
diff --git a/chromium/third_party/blink/renderer/core/html/forms/resources/color_picker.css b/chromium/third_party/blink/renderer/core/html/forms/resources/color_picker.css
new file mode 100644
index 00000000000..12325853617
--- /dev/null
+++ b/chromium/third_party/blink/renderer/core/html/forms/resources/color_picker.css
@@ -0,0 +1,99 @@
+/* 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.
+ */
+
+body {
+  font-family: "Segoe UI", system-ui, Roboto, Ubuntu, sans-serif;
+}
+
+color-picker {
+  background: #FFFFFF;
+  display: flex;
+  flex-direction: column;
+  height: 304px;
+  width: 232px;
+}
+
+visual-color-picker {
+  height: 59%;
+}
+
+manual-color-picker {
+  height: 28%;
+}
+
+color-value-container {
+  display: flex;
+  flex-direction: row;
+  height: 32px;
+  margin-left: 10%;
+  margin-top: 2%;
+  width: 171px;
+}
+
+input {
+  background: #FFFFFF;
+  border: 1px solid #CECECE;
+  border-radius: 2px;
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: 14px;
+  text-align: center;
+}
+
+format-toggler {
+  border-radius: 2px;
+  display: block;
+  height: 24px;
+  margin-left: 10%;
+  margin-top: 2%;
+  width: 200px;
+}
+
+format-toggler:hover {
+  background-color: #F7F7F7;
+}
+
+format-label {
+  border-radius: 2px;
+  display: flex;
+  flex-direction: row;
+  font-family: inherit;
+  font-size: 12px;
+  height: 24px;
+  width: 172px;
+}
+
+channel-label {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  height: 24px;
+  justify-content: center;
+  width: 172px;
+}
+
+submission-controls {
+  align-items: center;
+  border-top: 1px solid #CECECE;
+  display: flex;
+  flex-direction: row;
+  height: 13%;
+}
+
+#submission-controls-padding {
+  height: 100%;
+  width: 84%;
+}
+
+submission-button {
+  padding: 3%;
+  text-align: center;
+  width: 8%;
+}
+
+submission-button:hover {
+  background-color: #F3F3F3;
+  border-radius: 2px;
+}
\ No newline at end of file
diff --git a/chromium/third_party/blink/renderer/core/html/forms/resources/color_picker.js b/chromium/third_party/blink/renderer/core/html/forms/resources/color_picker.js
new file mode 100644
index 00000000000..4bebefacfa0
--- /dev/null
+++ b/chromium/third_party/blink/renderer/core/html/forms/resources/color_picker.js
@@ -0,0 +1,437 @@
+// 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' />
+ */
+
+/**
+ * @param {!Object} args
+ */
+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 color channels.
+ * @enum {number}
+ */
+const ColorChannel = {
+  UNDEFINED: 0,
+  HEX: 1,
+  R: 2,
+  G: 3,
+  B: 4,
+  H: 5,
+  S: 6,
+  L: 7,
+};
+
+/**
+ * Supported color formats.
+ * @enum {number}
+ */
+const ColorFormat = {
+  UNDEFINED: 0,
+  HEX: 1,
+  RGB: 2,
+  HSL: 3,
+};
+
+/**
+ * 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);
+      }
+      // TODO(crbug.com/982087): Add support for RGB
+      // TODO(crbug.com/982088): Add support for HSL
+    } else {
+      switch(colorStringOrFormat) {
+        case ColorFormat.HEX:
+          this.hexValue_ = colorValues[0];
+          break;
+        // TODO(crbug.com/982087): Add support for RGB
+        // TODO(crbug.com/982088): Add support for HSL
+      }
+    }
+  }
+
+  /**
+   * @param {!Color} other
+   */
+  equals(other) {
+    return (this.hexValue_ === other.hexValue_);
+  }
+
+  get hexValue() {
+    return this.hexValue_;
+  }
+
+  asHex() {
+    return '#' + this.hexValue_;
+  }
+}
+
+/**
+ * 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();
+
+    this.selectedColor_ = initialColor;
+
+    this.visualColorPicker_ = new VisualColorPicker(initialColor);
+    this.manualColorPicker_ = new ManualColorPicker(initialColor);
+    this.submissionControls_ =
+        new SubmissionControls(this.onSubmitButtonClick_,
+                               this.onCancelButtonClick_);
+    this.append(this.visualColorPicker_,
+                this.manualColorPicker_,
+                this.submissionControls_);
+
+    this.manualColorPicker_
+        .addEventListener('manual-color-change', this.onManualColorChange_);
+  }
+
+  get selectedColor() {
+    return this.selectedColor_;
+  }
+
+  /**
+   * @param {!Color} newColor
+   */
+  set selectedColor(newColor) {
+    this.selectedColor_ = newColor;
+  }
+
+  /**
+   * @param {!Event} event
+   */
+  onManualColorChange_ = (event) => {
+    var newColor = event.detail.color;
+    if (!this.selectedColor.equals(newColor)) {
+      this.selectedColor = newColor;
+      this.visualColorPicker_.setSelectedColor(newColor);
+    }
+  }
+
+  onSubmitButtonClick_ = () => {
+    const selectedValue = this.selectedColor_.asHex();
+    window.setTimeout(function() {
+      window.pagePopupController.setValueAndClosePopup(0, selectedValue);
+    }, 100);
+  }
+
+  onCancelButtonClick_ = () => {
+    window.pagePopupController.closePopup();
+  }
+}
+window.customElements.define('color-picker', ColorPicker);
+
+/**
+ * VisualColorPicker: Provides functionality to see the selected color and
+ *                    select a different color visually.
+ * TODO(crbug.com/983311): Allow colors to be selected from within the visual
+ *                         color picker.
+ */
+class VisualColorPicker extends HTMLElement {
+  /**
+   * @param {!Color} initialColor
+   */
+  constructor(initialColor) {
+    super();
+
+    this.setSelectedColor(initialColor);
+  }
+
+  /**
+   * @param {!Color} newColor
+   */
+  setSelectedColor(newColor) {
+    this.style.backgroundColor = newColor.asHex();
+  }
+}
+window.customElements.define('visual-color-picker', VisualColorPicker);
+
+/**
+ * ManualColorPicker: Provides functionality to change the selected color by
+ *                    manipulating its numeric values.
+ */
+class ManualColorPicker extends HTMLElement {
+  /**
+   * @param {!Color} initialColor
+   */
+  constructor(initialColor) {
+    super();
+
+    this.colorValueContainers_ = [
+      new ColorValueContainer(ColorFormat.HEX,
+                              initialColor)
+      // TODO(crbug.com/982087): Add support for RGB
+      // TODO(crbug.com/982088): Add support for HSL
+    ];
+    this.formatToggler_ = new FormatToggler();
+    this.append(...this.colorValueContainers_, this.formatToggler_);
+  }
+}
+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);
+    }
+    this.append(...this.channelValueContainers_);
+
+    this.channelValueContainers_.forEach((channelValueContainer) =>
+        channelValueContainer.addEventListener('input',
+            this.onChannelValueChange_));
+  }
+
+  get color() {
+    return new Color(this.colorFormat_,
+        ...this.channelValueContainers_.map((channelValueContainer) =>
+            channelValueContainer.channelValue));
+  }
+
+  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('maxlength', '7');
+        break;
+      // TODO(crbug.com/982087): Add support for RGB
+      // TODO(crbug.com/982088): Add support for HSL
+    }
+    this.setValue(initialColor);
+
+    this.addEventListener('input', this.onValueChange_);
+  }
+
+  get channelValue() {
+    return this.channelValue_;
+  }
+
+  /**
+   * @param {!Color} color
+   */
+  setValue(color) {
+    switch(this.colorChannel_) {
+      case ColorChannel.HEX:
+        this.channelValue_ = color.hexValue;
+        this.value = '#' + this.channelValue_;
+        break;
+      // TODO(crbug.com/982087): Add support for RGB
+      // TODO(crbug.com/982088): Add support for HSL
+    }
+  }
+
+  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);
+            if (value.match(/^[0-9a-fA-F]+$/)) {
+              // Ex. 'FFFFFF' => this.channelValue_ == 'FFFFFF'
+              // Ex. 'FF' => this.channelValue_ == '0000FF'
+              this.channelValue_ = ('000000' + value).slice(-6);
+            }
+          }
+          break;
+        // TODO(crbug.com/982087): Add support for RGB
+        // TODO(crbug.com/982088): Add support for HSL
+      }
+    }
+  }
+}
+window.customElements.define('channel-value-container',
+                             ChannelValueContainer,
+                             { extends: 'input' });
+
+/**
+ * FormatToggler: Button that powers switching between different color formats.
+ */
+class FormatToggler extends HTMLElement {
+  constructor() {
+    super();
+
+    this.colorFormatLabels_ = [
+      new FormatLabel(ColorFormat.HEX)
+      // TODO(crbug.com/982087): Add support for RGB
+      // TODO(crbug.com/982088): Add support for HSL
+    ];
+    this.append(...this.colorFormatLabels_);
+  }
+}
+window.customElements.define('format-toggler', FormatToggler);
+
+/**
+ * FormatLabel: Label for a given color format.
+ */
+class FormatLabel extends HTMLElement {
+  /**
+   * @param {!ColorFormat} colorFormat
+   */
+  constructor(colorFormat) {
+    super();
+
+    if (colorFormat === ColorFormat.HEX) {
+      this.hexChannelLabel_ = new ChannelLabel(ColorChannel.HEX);
+      this.append(this.hexChannelLabel_);
+    }
+    // TODO(crbug.com/982087): Add support for RGB
+    // TODO(crbug.com/982088): Add support for HSL
+  }
+}
+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';
+    }
+    // TODO(crbug.com/982087): Add support for RGB
+    // TODO(crbug.com/982088): Add support for HSL
+  }
+}
+window.customElements.define('channel-label', ChannelLabel);
+
+/**
+ * SubmissionControls: Provides functionality to submit or discard a change.
+ */
+class SubmissionControls extends HTMLElement {
+  /**
+   * @param {function} submitCallback executed if the submit button is clicked
+   * @param {function} cancelCallback executed if the cancel button is clicked
+   */
+  constructor(submitCallback, cancelCallback) {
+    super();
+
+    const padding = document.createElement('span');
+    padding.setAttribute('id', 'submission-controls-padding');
+    this.append(padding);
+
+    this.submitButton_ = new SubmissionButton(submitCallback,
+        '<svg width="14" height="10" viewBox="0 0 14 10" fill="none" ' +
+        'xmlns="http://www.w3.org/2000/svg"><path d="M13.3516 ' +
+        '1.35156L5 9.71094L0.648438 5.35156L1.35156 4.64844L5 ' +
+        '8.28906L12.6484 0.648438L13.3516 1.35156Z" fill="black"/></svg>'
+    );
+    this.cancelButton_ = new SubmissionButton(cancelCallback,
+        '<svg width="14" height="14" viewBox="0 0 14 14" fill="none" ' +
+        'xmlns="http://www.w3.org/2000/svg"><path d="M7.71094 7L13.1016 ' +
+        '12.3984L12.3984 13.1016L7 7.71094L1.60156 13.1016L0.898438 ' +
+        '12.3984L6.28906 7L0.898438 1.60156L1.60156 0.898438L7 ' +
+        '6.28906L12.3984 0.898438L13.1016 1.60156L7.71094 7Z" ' +
+        'fill="black"/></svg>'
+    );
+    this.append(this.submitButton_, this.cancelButton_);
+  }
+}
+window.customElements.define('submission-controls', SubmissionControls);
+
+/**
+ * SubmissionButton: Button with a custom look that can be clicked for
+ *                   a submission action.
+ */
+class SubmissionButton extends HTMLElement {
+  /**
+   * @param {function} clickCallback executed when the button is clicked
+   * @param {string} htmlString custom look for the button
+   */
+  constructor(clickCallback, htmlString) {
+    super();
+
+    this.setAttribute('tabIndex', '0');
+    this.innerHTML = htmlString;
+
+    this.addEventListener('click', clickCallback);
+  }
+}
+window.customElements.define('submission-button', SubmissionButton);
\ No newline at end of file
diff --git a/chromium/third_party/blink/renderer/core/html/forms/resources/color_picker_common.js b/chromium/third_party/blink/renderer/core/html/forms/resources/color_picker_common.js
new file mode 100644
index 00000000000..ba1120a22f5
--- /dev/null
+++ b/chromium/third_party/blink/renderer/core/html/forms/resources/color_picker_common.js
@@ -0,0 +1,73 @@
+// 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.
+
+var global = {argumentsReceived: false, params: null};
+
+// DefaultColor is used by ColorPicker when selectedColor is not provided.
+var DefaultColor = '#000000';
+
+// DefaultColorPalette is used by ColorSuggestionPicker when the list of values
+// is empty.
+var DefaultColorPalette = [
+  '#000000', '#404040', '#808080', '#c0c0c0', '#ffffff', '#980000', '#ff0000',
+  '#ff9900', '#ffff00', '#00ff00', '#00ffff', '#4a86e8', '#0000ff', '#9900ff',
+  '#ff00ff'
+];
+
+/**
+ * @param {Event} event
+ */
+function handleMessage(event) {
+  initialize(JSON.parse(event.data));
+  global.argumentsReceived = true;
+}
+
+if (window.dialogArguments) {
+  initialize(dialogArguments);
+} else {
+  window.addEventListener('message', handleMessage, false);
+  window.setTimeout(handleArgumentsTimeout, 1000);
+}
+
+/**
+ * @param {!Object} args
+ */
+function initialize(args) {
+  global.params = args;
+  var main = $('main');
+  main.innerHTML = '';
+  var errorString;
+  if (global.params.shouldShowColorSuggestionPicker) {
+    main.classList.add('color-suggestion-picker-main');
+    errorString = validateColorSuggestionPickerArguments(args);
+  } else {
+    main.classList.add('color-picker-main');
+    errorString = validateColorPickerArguments(args);
+  }
+  if (errorString) {
+    main.textContent = 'Internal error: ' + errorString;
+    resizeWindow(main.offsetWidth, main.offsetHeight);
+  } else {
+    if (global.params.shouldShowColorSuggestionPicker) {
+      initializeColorSuggestionPicker();
+    } else {
+      initializeColorPicker();
+    }
+  }
+}
+
+function handleArgumentsTimeout() {
+  if (global.argumentsReceived)
+    return;
+  // When an argument timeout happens, we do not have enough information to
+  // determine whether to show the color picker or color suggestion picker.
+  // In this case, we just choose to show the color suggestion picker.
+  var args = {
+    values: DefaultColorPalette,
+    otherColorLabel: 'Other...',
+    shouldShowColorSuggestionPicker: true,
+    selectedColor: DefaultColor,
+  };
+  initialize(args);
+}
\ No newline at end of file
diff --git a/chromium/third_party/blink/renderer/core/html/forms/resources/validation_bubble.css b/chromium/third_party/blink/renderer/core/html/forms/resources/validation_bubble.css
index 2e99f77d57b..2403a75d86b 100644
--- a/chromium/third_party/blink/renderer/core/html/forms/resources/validation_bubble.css
+++ b/chromium/third_party/blink/renderer/core/html/forms/resources/validation_bubble.css
@@ -17,6 +17,7 @@
   opacity: 0;
   position: absolute;
   will-change: opacity, transform;
+  word-break: break-word;
 }
 
 #container.shown-initially {