DevTools: Convert to Shadow DOM and Custom Elements v1

Bug: 685385 Change-Id: I027e84d8003b7799492211d5fcf8348cd91fd799 Reviewed-on: https://chromium-review.googlesource.com/c/1422962 Reviewed-by: Dmitry Gozman <dgozman@chromium.org> Commit-Queue: Joel Einbinder <einbinder@chromium.org> Cr-Original-Commit-Position: refs/heads/master@{#625513} Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src Cr-Mirrored-Commit: b00e6ea1c9b4db5d743c7c204b1f63abf89e0398
ChromeDevTools · Jan 24, 2019 · 7fbe24c · 7fbe24c
1 parent 7d7e3be
commit 7fbe24c
Show file tree

Hide file tree

Showing 46 changed files with 192 additions and 261 deletions.
diff --git a/front_end/accessibility/AXBreadcrumbsPane.js b/front_end/accessibility/AXBreadcrumbsPane.js
@@ -112,7 +112,7 @@ Accessibility.AXBreadcrumbsPane = class extends Accessibility.AccessibilitySubPa
   _onKeyDown(event) {
     if (!this._preselectedBreadcrumb)
       return;
-    if (!event.path.some(element => element === this._preselectedBreadcrumb.element()))
+    if (!event.composedPath().some(element => element === this._preselectedBreadcrumb.element()))
       return;
     if (event.shiftKey || event.metaKey || event.ctrlKey)
       return;

diff --git a/front_end/accessibility/AccessibilityNodeView.js b/front_end/accessibility/AccessibilityNodeView.js
@@ -151,7 +151,7 @@ Accessibility.AXNodePropertyTreeElement = class extends UI.TreeElement {
    * @return {!Element}
    */
   static createExclamationMark(tooltip) {
-    const exclamationElement = createElement('label', 'dt-icon-label');
+    const exclamationElement = createElement('span', 'dt-icon-label');
     exclamationElement.type = 'smallicon-warning';
     exclamationElement.title = tooltip;
     return exclamationElement;

diff --git a/front_end/accessibility/accessibilityNode.css b/front_end/accessibility/accessibilityNode.css
@@ -47,7 +47,7 @@ span.ax-value-undefined {
     padding-left: 4px;
 }
 
-.tree-outline label[is=dt-icon-label] {
+.tree-outline span[is=dt-icon-label] {
     position: relative;
     left: -11px;
 }
@@ -74,7 +74,7 @@ span.ax-value-undefined {
     left: -2px;
 }
 
-.tree-outline label[is=dt-icon-label] + .ax-name {
+.tree-outline span[is=dt-icon-label] + .ax-name {
     margin-left: -11px;
 }
 

diff --git a/front_end/changes/changesView.css b/front_end/changes/changesView.css
@@ -3,14 +3,15 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
-.insertion-point-main{
+[slot=insertion-point-main]{
     flex-direction: column;
     display: flex;
 }
 
-.insertion-point-sidebar {
+[slot=insertion-point-sidebar] {
     overflow: auto;
 }
+
 .editor-container{
     flex: 1;
 }

diff --git a/front_end/console/ConsoleViewMessage.js b/front_end/console/ConsoleViewMessage.js
@@ -1328,7 +1328,7 @@ Console.ConsoleViewMessage = class {
       return;
 
     if (!this._repeatCountElement) {
-      this._repeatCountElement = createElementWithClass('label', 'console-message-repeat-count', 'dt-small-bubble');
+      this._repeatCountElement = createElementWithClass('span', 'console-message-repeat-count', 'dt-small-bubble');
       switch (this._message.level) {
         case SDK.ConsoleMessage.MessageLevel.Warning:
           this._repeatCountElement.type = 'warning';

diff --git a/front_end/console_counters/WarningErrorCounter.js b/front_end/console_counters/WarningErrorCounter.js
@@ -39,7 +39,7 @@ ConsoleCounters.WarningErrorCounter = class {
    */
   _createItem(shadowRoot, iconType) {
     const item = createElementWithClass('span', 'counter-item');
-    const icon = item.createChild('label', '', 'dt-icon-label');
+    const icon = item.createChild('span', '', 'dt-icon-label');
     icon.type = iconType;
     const text = icon.createChild('span');
     shadowRoot.appendChild(item);

diff --git a/front_end/console_counters/errorWarningCounter.css b/front_end/console_counters/errorWarningCounter.css
@@ -18,10 +18,6 @@
     margin-left: 6px;
 }
 
-.counter-item label {
-    cursor: inherit;
-}
-
 .counter-item.counter-item-first {
     margin-left: 0;
 }
diff --git a/front_end/dom_extension/DOMExtension.js b/front_end/dom_extension/DOMExtension.js
@@ -270,11 +270,13 @@ Node.prototype.getComponentSelection = function() {
  */
 Node.prototype.hasSelection = function() {
   // TODO(luoe): use contains(node, {includeShadow: true}) when it is fixed for shadow dom.
-  const contents = this.querySelectorAll('content');
-  for (const content of contents) {
-    if (Array.prototype.some.call(content.getDistributedNodes(), node => node.hasSelection()))
+  if (this instanceof Element) {
+    const slots = this.querySelectorAll('slot');
+    for (const slot of slots) {
+      if (Array.prototype.some.call(slot.assignedNodes(), node => node.hasSelection()))
         return true;
     }
+  }
 
   const selection = this.getComponentSelection();
   if (selection.type !== 'Range')
@@ -299,10 +301,11 @@ Element.prototype.removeChildren = function() {
  * @param {string} tagName
  * @param {string=} customElementType
  * @return {!Element}
+ * @suppress {checkTypes}
  * @suppressGlobalPropertiesCheck
  */
 function createElement(tagName, customElementType) {
-  return document.createElement(tagName, customElementType || '');
+  return document.createElement(tagName, {is: customElementType});
 }
 
 /**
@@ -318,10 +321,11 @@ function createTextNode(data) {
  * @param {string} elementName
  * @param {string=} className
  * @param {string=} customElementType
+ * @suppress {checkTypes}
  * @return {!Element}
  */
 Document.prototype.createElementWithClass = function(elementName, className, customElementType) {
-  const element = this.createElement(elementName, customElementType || '');
+  const element = this.createElement(elementName, {is: customElementType});
   if (className)
     element.className = className;
   return element;
@@ -651,7 +655,7 @@ Node.prototype.traverseNextNode = function(stayWithin) {
   if (this.shadowRoot)
     return this.shadowRoot;
 
-  const distributedNodes = this.getDistributedNodes ? this.getDistributedNodes() : [];
+  const distributedNodes = this instanceof HTMLSlotElement ? this.assignedNodes() : [];
 
   if (distributedNodes.length)
     return distributedNodes[0];
@@ -668,34 +672,24 @@ Node.prototype.traverseNextNode = function(stayWithin) {
     if (sibling)
       return sibling;
 
-    node = insertionPoint(node) || node.parentNodeOrShadowHost();
+    node = node.assignedSlot || node.parentNodeOrShadowHost();
   }
 
   /**
    * @param {!Node} node
    * @return {?Node}
    */
   function nextSibling(node) {
-    const parent = insertionPoint(node);
-    if (!parent)
+    if (!node.assignedSlot)
       return node.nextSibling;
-    const distributedNodes = parent.getDistributedNodes ? parent.getDistributedNodes() : [];
+    const distributedNodes = node.assignedSlot.assignedNodes();
 
     const position = Array.prototype.indexOf.call(distributedNodes, node);
     if (position + 1 < distributedNodes.length)
       return distributedNodes[position + 1];
     return null;
   }
 
-  /**
-   * @param {!Node} node
-   * @return {?Node}
-   */
-  function insertionPoint(node) {
-    const insertionPoints = node.getDestinationInsertionPoints ? node.getDestinationInsertionPoints() : [];
-    return insertionPoints.length > 0 ? insertionPoints[insertionPoints.length - 1] : null;
-  }
-
   return null;
 };
 

diff --git a/front_end/elements/ElementsSidebarPane.js b/front_end/elements/ElementsSidebarPane.js
@@ -5,8 +5,11 @@
  * @unrestricted
  */
 Elements.ElementsSidebarPane = class extends UI.VBox {
-  constructor() {
-    super(true);
+  /**
+   * @param {boolean=} delegatesFocus
+   */
+  constructor(delegatesFocus) {
+    super(true, delegatesFocus);
     this.element.classList.add('flex-none');
     this._computedStyleModel = new Elements.ComputedStyleModel();
     this._computedStyleModel.addEventListener(

diff --git a/front_end/elements/StylesSidebarPane.js b/front_end/elements/StylesSidebarPane.js
@@ -29,10 +29,9 @@
 
 Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane {
   constructor() {
-    super();
+    super(true /* delegatesFocus */);
     this.setMinimumSize(96, 26);
     this.registerRequiredCSS('elements/stylesSidebarPane.css');
-    this.element.tabIndex = -1;
 
     Common.moduleSetting('colorFormat').addChangeListener(this.update.bind(this));
     Common.moduleSetting('textEditorIndent').addChangeListener(this.update.bind(this));
@@ -95,7 +94,7 @@ Elements.StylesSidebarPane = class extends Elements.ElementsSidebarPane {
    * @return {!Element}
    */
   static createExclamationMark(property) {
-    const exclamationElement = createElement('label', 'dt-icon-label');
+    const exclamationElement = createElement('span', 'dt-icon-label');
     exclamationElement.className = 'exclamation-mark';
     if (!Elements.StylesSidebarPane.ignoreErrorsForProperty(property))
       exclamationElement.type = 'smallicon-warning';

diff --git a/front_end/elements/classesPaneWidget.css b/front_end/elements/classesPaneWidget.css
@@ -16,7 +16,7 @@
     justify-content: flex-start;
 }
 
-.styles-element-classes-pane label {
+.styles-element-classes-pane [is=dt-checkbox] {
     margin-right: 15px;
 }
 

diff --git a/front_end/emulation/DeviceModeView.js b/front_end/emulation/DeviceModeView.js
@@ -74,7 +74,7 @@ Emulation.DeviceModeView = class extends UI.VBox {
     this._bottomResizerElement.title = Common.UIString('Double-click for full height');
 
     this._pageArea = this._screenArea.createChild('div', 'device-mode-page-area');
-    this._pageArea.createChild('content');
+    this._pageArea.createChild('slot');
   }
 
   _populatePresetsContainer() {

diff --git a/front_end/emulation/sensors.css b/front_end/emulation/sensors.css
@@ -9,10 +9,6 @@
     display: block;
 }
 
-.sensors-view label {
-    margin-bottom: 10px;
-}
-
 .sensors-view input {
     width: 100%;
     max-width: 100px;

diff --git a/front_end/inline_editor/CSSShadowEditor.js b/front_end/inline_editor/CSSShadowEditor.js
@@ -68,7 +68,7 @@ InlineEditor.CSSShadowEditor = class extends UI.VBox {
    * @return {!Element}
    */
   _createSlider(field) {
-    const slider = UI.createSliderLabel(0, InlineEditor.CSSShadowEditor.maxRange, -1);
+    const slider = UI.createSlider(0, InlineEditor.CSSShadowEditor.maxRange, -1);
     slider.addEventListener('input', this._onSliderInput.bind(this), false);
     field.appendChild(slider);
     return slider;

diff --git a/front_end/inline_editor/ColorSwatch.js b/front_end/inline_editor/ColorSwatch.js
@@ -7,6 +7,17 @@
 InlineEditor.ColorSwatch = class extends HTMLSpanElement {
   constructor() {
     super();
+    const root = UI.createShadowRootWithCoreStyles(this, 'inline_editor/colorSwatch.css');
+
+    this._iconElement = root.createChild('span', 'color-swatch');
+    this._iconElement.title = Common.UIString('Shift-click to change color format');
+    this._swatchInner = this._iconElement.createChild('span', 'color-swatch-inner');
+    this._swatchInner.addEventListener('dblclick', e => e.consume(), false);
+    this._swatchInner.addEventListener('mousedown', e => e.consume(), false);
+    this._swatchInner.addEventListener('click', this._handleClick.bind(this), true);
+
+    root.createChild('slot');
+    this._colorValueElement = this.createChild('span');
   }
 
   /**
@@ -15,11 +26,11 @@ InlineEditor.ColorSwatch = class extends HTMLSpanElement {
   static create() {
     if (!InlineEditor.ColorSwatch._constructor) {
       InlineEditor.ColorSwatch._constructor =
-          UI.registerCustomElement('span', 'color-swatch', InlineEditor.ColorSwatch.prototype);
+          UI.registerCustomElement('span', 'color-swatch', InlineEditor.ColorSwatch);
     }
 
 
-    return /** @type {!InlineEditor.ColorSwatch} */ (new InlineEditor.ColorSwatch._constructor());
+    return /** @type {!InlineEditor.ColorSwatch} */ (InlineEditor.ColorSwatch._constructor());
   }
 
   /**
@@ -133,23 +144,6 @@ InlineEditor.ColorSwatch = class extends HTMLSpanElement {
     return this._iconElement;
   }
 
-  /**
-   * @override
-   */
-  createdCallback() {
-    const root = UI.createShadowRootWithCoreStyles(this, 'inline_editor/colorSwatch.css');
-
-    this._iconElement = root.createChild('span', 'color-swatch');
-    this._iconElement.title = Common.UIString('Shift-click to change color format');
-    this._swatchInner = this._iconElement.createChild('span', 'color-swatch-inner');
-    this._swatchInner.addEventListener('dblclick', e => e.consume(), false);
-    this._swatchInner.addEventListener('mousedown', e => e.consume(), false);
-    this._swatchInner.addEventListener('click', this._handleClick.bind(this), true);
-
-    root.createChild('content');
-    this._colorValueElement = this.createChild('span');
-  }
-
   /**
    * @param {!Event} event
    */
@@ -168,6 +162,11 @@ InlineEditor.ColorSwatch = class extends HTMLSpanElement {
 InlineEditor.BezierSwatch = class extends HTMLSpanElement {
   constructor() {
     super();
+    const root = UI.createShadowRootWithCoreStyles(this, 'inline_editor/bezierSwatch.css');
+    this._iconElement = UI.Icon.create('smallicon-bezier', 'bezier-swatch-icon');
+    root.appendChild(this._iconElement);
+    this._textElement = this.createChild('span');
+    root.createChild('slot');
   }
 
   /**
@@ -176,11 +175,11 @@ InlineEditor.BezierSwatch = class extends HTMLSpanElement {
   static create() {
     if (!InlineEditor.BezierSwatch._constructor) {
       InlineEditor.BezierSwatch._constructor =
-          UI.registerCustomElement('span', 'bezier-swatch', InlineEditor.BezierSwatch.prototype);
+          UI.registerCustomElement('span', 'bezier-swatch', InlineEditor.BezierSwatch);
     }
 
 
-    return /** @type {!InlineEditor.BezierSwatch} */ (new InlineEditor.BezierSwatch._constructor());
+    return /** @type {!InlineEditor.BezierSwatch} */ (InlineEditor.BezierSwatch._constructor());
   }
 
   /**
@@ -210,17 +209,6 @@ InlineEditor.BezierSwatch = class extends HTMLSpanElement {
   iconElement() {
     return this._iconElement;
   }
-
-  /**
-   * @override
-   */
-  createdCallback() {
-    const root = UI.createShadowRootWithCoreStyles(this, 'inline_editor/bezierSwatch.css');
-    this._iconElement = UI.Icon.create('smallicon-bezier', 'bezier-swatch-icon');
-    root.appendChild(this._iconElement);
-    this._textElement = this.createChild('span');
-    root.createChild('content');
-  }
 };
 
 /**
@@ -229,6 +217,11 @@ InlineEditor.BezierSwatch = class extends HTMLSpanElement {
 InlineEditor.CSSShadowSwatch = class extends HTMLSpanElement {
   constructor() {
     super();
+    const root = UI.createShadowRootWithCoreStyles(this, 'inline_editor/cssShadowSwatch.css');
+    this._iconElement = UI.Icon.create('smallicon-shadow', 'shadow-swatch-icon');
+    root.appendChild(this._iconElement);
+    root.createChild('slot');
+    this._contentElement = this.createChild('span');
   }
 
   /**
@@ -237,10 +230,10 @@ InlineEditor.CSSShadowSwatch = class extends HTMLSpanElement {
   static create() {
     if (!InlineEditor.CSSShadowSwatch._constructor) {
       InlineEditor.CSSShadowSwatch._constructor =
-          UI.registerCustomElement('span', 'css-shadow-swatch', InlineEditor.CSSShadowSwatch.prototype);
+          UI.registerCustomElement('span', 'css-shadow-swatch', InlineEditor.CSSShadowSwatch);
     }
 
-    return /** @type {!InlineEditor.CSSShadowSwatch} */ (new InlineEditor.CSSShadowSwatch._constructor());
+    return /** @type {!InlineEditor.CSSShadowSwatch} */ (InlineEditor.CSSShadowSwatch._constructor());
   }
 
   /**
@@ -290,15 +283,4 @@ InlineEditor.CSSShadowSwatch = class extends HTMLSpanElement {
   colorSwatch() {
     return this._colorSwatch;
   }
-
-  /**
-   * @override
-   */
-  createdCallback() {
-    const root = UI.createShadowRootWithCoreStyles(this, 'inline_editor/cssShadowSwatch.css');
-    this._iconElement = UI.Icon.create('smallicon-shadow', 'shadow-swatch-icon');
-    root.appendChild(this._iconElement);
-    root.createChild('content');
-    this._contentElement = this.createChild('span');
-  }
 };
diff --git a/front_end/inspector_main/renderingOptions.css b/front_end/inspector_main/renderingOptions.css
@@ -8,7 +8,7 @@
     padding: 12px;
  }
 
-label {
+[is=dt-checkbox] {
     margin: 0px 0px 10px 0px;
     flex: none;
 }