chrome-devtools-frontend 1.0.1539728 → 1.0.1541169

package/front_end/ui/components/survey_link/SurveyLink.docs.ts

@@ -0,0 +1,22 @@
+// Copyright 2020 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Common from '../../../core/common/common.js';
+import {SurveyLink} from '../survey_link/survey_link.js';
+
+export function render(container: HTMLElement): void {
+  const link = new SurveyLink.SurveyLink();
+  container.appendChild(link);
+
+  link.data = {
+    trigger: 'test trigger',
+    promptText: Common.UIString.LocalizedEmptyString,
+    canShowSurvey: (_trigger, callback) => {
+      setTimeout(callback.bind(undefined, {canShowSurvey: true}), 500);
+    },
+    showSurvey: (_trigger, callback) => {
+      setTimeout(callback.bind(undefined, {surveyShown: true}), 1500);
+    },
+  };
+}

package/front_end/ui/components/tree_outline/TreeOutline.ts

@@ -9,7 +9,6 @@ import * as Lit from '../../lit/lit.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
 import * as Buttons from '../buttons/buttons.js';
 import * as CodeHighlighter from '../code_highlighter/code_highlighter.js';
-import * as ComponentHelpers from '../helpers/helpers.js';
 import * as RenderCoordinator from '../render_coordinator/render_coordinator.js';
 
 import treeOutlineStyles from './treeOutline.css.js';
@@ -479,7 +478,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
         jslog=${VisualLogging.treeItem(node.jslogContext).track({click: true, keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Space|Home|End'})}
         @click=${this.#onNodeClick}
         track-dom-node-to-tree-node=${trackDOMNodeToTreeNode(this.#domNodeToTreeNodeMap, node)}
-        on-render=${ComponentHelpers.Directives.nodeRenderedCallback(domNode => {
+        ${Lit.Directives.ref(domNode => {
          /**
           * Because TreeNodes are lazily rendered, you can call
           * `outline.expandToAndSelect(NodeX)`, but `NodeX` will be rendered at some

package/front_end/ui/{components/docs/context_menu/basic.ts → legacy/ContextMenu.docs.ts}

@@ -2,23 +2,44 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import * as UI from '../../../legacy/legacy.js';
-import * as Lit from '../../../lit/lit.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
+import * as Lit from '../lit/lit.js';
+
+import {ContextMenu} from './legacy.js';
 
 const {html} = Lit;
 
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
+export async function render(container: HTMLElement) {
+  const style = document.createElement('style');
+  style.textContent = `
+      #container > div {
+        width: var(--sys-size-34);
+        padding: var(--sys-size-11);
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: var(--sys-size-5);
+        background-color: var(--sys-color-neutral-container);
+        border-radius: var(--sys-shape-corner-medium);
+        text-align: center;
+
+        p {
+          vertical-align: middle;
+        }
+      }
+    `;
+  container.appendChild(style);
+
+  const menuButtonSection = document.createElement('div');
+  const menuButtonHeader = document.createElement('header');
+  menuButtonHeader.textContent = 'DevTools menu button (lit-html)';
+  container.appendChild(menuButtonHeader);
+  container.appendChild(menuButtonSection);
 
-{
-  const menuButtonSection = document.querySelector('#menu-button') as HTMLElement;
   Lit.render(
       html`
     <devtools-menu-button
       icon-name="bin"
-      .populateMenuCall=${(menu: UI.ContextMenu.ContextMenu) => {
+      .populateMenuCall=${(menu: ContextMenu.ContextMenu) => {
         menu.defaultSection().appendItem('Item', () => {
           alert('Item clicked');
         }, {jslogContext: 'item'});
@@ -27,15 +48,19 @@ await FrontendHelpers.initializeGlobalVars();
     ></devtools-menu-button>
 `,
       menuButtonSection);
-}
 
-{
+  const simpleItemsSection = document.createElement('div');
+  simpleItemsSection.innerHTML = '<p>Right-click here</p>';
+  const simpleItemsHeader = document.createElement('header');
+  simpleItemsHeader.textContent = 'Various simple menu items (imperative API)';
+  container.appendChild(simpleItemsHeader);
+  container.appendChild(simpleItemsSection);
+
   let checked = true;
-  const simpleItemMenuSection = document.querySelector('#simple-items');
-  simpleItemMenuSection?.addEventListener('contextmenu', onSimpleMenu.bind(this));
+  simpleItemsSection.addEventListener('contextmenu', onSimpleMenu);
 
   function onSimpleMenu(event: Event) {
-    const simpleMenu = new UI.ContextMenu.ContextMenu(event);
+    const simpleMenu = new ContextMenu.ContextMenu(event);
 
     // Regular item
     simpleMenu.defaultSection().appendItem('Regular item', () => {
@@ -63,14 +88,18 @@ await FrontendHelpers.initializeGlobalVars();
 
     void simpleMenu.show();
   }
-}
 
-{
-  const customSectionMenuSection = document.querySelector('#custom-section');
-  customSectionMenuSection?.addEventListener('contextmenu', onCustomSectionMenu.bind(this));
+  const customSection = document.createElement('div');
+  customSection.innerHTML = '<p>Right-click here</p>';
+  const customSectionHeader = document.createElement('header');
+  customSectionHeader.textContent = 'Custom sections (imperative API)';
+  container.appendChild(customSectionHeader);
+  container.appendChild(customSection);
+
+  customSection.addEventListener('contextmenu', onCustomSectionMenu);
 
   function onCustomSectionMenu(event: Event) {
-    const customSectionMenu = new UI.ContextMenu.ContextMenu(event);
+    const customSectionMenu = new ContextMenu.ContextMenu(event);
 
     // First custom section
     const customSection = customSectionMenu.section('Custom section');
@@ -83,14 +112,18 @@ await FrontendHelpers.initializeGlobalVars();
 
     void customSectionMenu.show();
   }
-}
 
-{
-  const subMenuSection = document.querySelector('#sub-menu');
-  subMenuSection?.addEventListener('contextmenu', onCustomSectionMenu.bind(this));
+  const subMenuSection = document.createElement('div');
+  subMenuSection.innerHTML = '<p>Right-click here</p>';
+  const subMenuHeader = document.createElement('header');
+  subMenuHeader.textContent = 'Sub menu (imperative API)';
+  container.appendChild(subMenuHeader);
+  container.appendChild(subMenuSection);
 
-  function onCustomSectionMenu(event: Event) {
-    const subMenuMenu = new UI.ContextMenu.ContextMenu(event);
+  subMenuSection.addEventListener('contextmenu', onSubMenu);
+
+  function onSubMenu(event: Event) {
+    const subMenuMenu = new ContextMenu.ContextMenu(event);
 
     const subMenu =
         subMenuMenu.defaultSection().appendSubMenuItem('Item to open sub menu', /* disabled */ false, 'my-sub-menu');

package/front_end/ui/legacy/SelectMenu.docs.ts

@@ -51,6 +51,20 @@ export async function render(container: HTMLElement) {
         simpleMenuHTML);
   }
 
+  {
+    const disabledMenuHTML = createDivWithP('Disabled select with lit-html');
+    // clang-format off
+    Lit.render(
+        html`<select disabled aria-label="Select an option" @change=${onChange}>
+                <option hidden>Select an option</option>
+                <option jslog=${VisualLogging.item('option-1').track({
+                  click: true
+                })} value="Option1">Option 1</option>
+              </select>`,
+        disabledMenuHTML);
+    // clang-format on
+  }
+
   {
     const groupMenuHTML = createDivWithP('Select with groups with lit-html');
     Lit.render(

package/front_end/ui/legacy/UIUtils.ts

@@ -1820,7 +1820,8 @@ export const isScrolledToBottom = (element: Element): boolean => {
   return Math.abs(element.scrollTop + element.clientHeight - element.scrollHeight) <= 2;
 };
 
-export function createSVGChild(element: Element, childType: string, className?: string): Element {
+export function createSVGChild<K extends keyof SVGElementTagNameMap>(
+    element: Element, childType: K, className?: string): SVGElementTagNameMap[K] {
   const child = element.ownerDocument.createElementNS('http://www.w3.org/2000/svg', childType);
   if (className) {
     child.setAttribute('class', className);

package/front_end/ui/legacy/components/inline_editor/BezierEditor.ts

@@ -147,7 +147,7 @@ export class BezierEditor extends Common.ObjectWrapper.eventMixin<EventTypes, ty
     return category;
   }
 
-  private createPresetModifyIcon(parentElement: Element, className: string, drawPath: string): Element {
+  private createPresetModifyIcon(parentElement: Element, className: string, drawPath: string): SVGElement {
     const icon = UI.UIUtils.createSVGChild(parentElement, 'svg', 'bezier-preset-modify ' + className);
     icon.setAttribute('width', '20');
     icon.setAttribute('height', '20');

package/front_end/ui/legacy/components/object_ui/CustomPreviewComponent.ts

@@ -15,6 +15,7 @@ import {
   ObjectPropertiesSection,
   ObjectPropertiesSectionsTreeOutline,
   ObjectPropertyTreeElement,
+  ObjectTree,
 } from './ObjectPropertiesSection.js';
 
 const UIStrings = {
@@ -169,7 +170,8 @@ export class CustomPreviewSection {
         this.defaultBodyTreeOutline = new ObjectPropertiesSectionsTreeOutline({readOnly: true});
         this.defaultBodyTreeOutline.setShowSelectionOnKeyboardFocus(/* show */ true, /* preventTabOrder */ false);
         this.defaultBodyTreeOutline.element.classList.add('custom-expandable-section-default-body');
-        void ObjectPropertyTreeElement.populate(this.defaultBodyTreeOutline.rootElement(), this.object, false, false);
+        void ObjectPropertyTreeElement.populate(
+            this.defaultBodyTreeOutline.rootElement(), new ObjectTree(this.object), false, false);
 
         this.cachedContent = this.defaultBodyTreeOutline.element;
       } else {