chrome-devtools-frontend 1.0.1521880 → 1.0.1522585

package/front_end/ui/legacy/components/perf_ui/FilmStripView.ts

@@ -149,8 +149,7 @@ interface DialogParsedTrace {
 }
 
 export class Dialog {
-  private fragment: UI.Fragment.Fragment;
-  private readonly widget: UI.XWidget.XWidget;
+  private readonly widget: UI.Widget.Widget;
   private index: number;
   private dialog: UI.Dialog.Dialog|null = null;
 
@@ -173,21 +172,32 @@ export class Dialog {
     UI.Tooltip.Tooltip.install(prevButton, i18nString(UIStrings.previousFrame));
     const nextButton = UI.UIUtils.createTextButton('\u25B6', this.onNextFrame.bind(this));
     UI.Tooltip.Tooltip.install(nextButton, i18nString(UIStrings.nextFrame));
-    this.fragment = UI.Fragment.Fragment.build`
-      <x-widget flex=none margin='var(--sys-size-7) var(--sys-size-8) var(--sys-size-8) var(--sys-size-8)'>
-        <x-hbox overflow=auto border='var(--sys-size-1) solid var(--sys-color-divider)'>
-          <img $='image' data-film-strip-dialog-img style="max-height: 80vh; max-width: 80vw;"></img>
-        </x-hbox>
-        <x-hbox x-center justify-content=center margin-top='var(--sys-size-6)'>
-          ${prevButton}
-          <x-hbox $='time' margin='var(--sys-size-5)'></x-hbox>
-          ${nextButton}
-        </x-hbox>
-      </x-widget>
-    `;
-    this.widget = (this.fragment.element() as UI.XWidget.XWidget);
-    (this.widget as HTMLElement).tabIndex = 0;
-    this.widget.addEventListener('keydown', this.keyDown.bind(this), false);
+    this.widget = new UI.Widget.Widget({classes: ['film-strip-image-dialog']});
+    this.widget.registerRequiredCSS(filmStripViewStyles);
+
+    const imageBox = document.createElement('div');
+    imageBox.classList.add('image-box');
+
+    const image = document.createElement('img');
+    image.setAttribute('data-film-strip-dialog-img', '');
+    imageBox.append(image);
+
+    const buttonBox = document.createElement('div');
+    buttonBox.classList.add('button-box');
+
+    const timeBox = document.createElement('div');
+    timeBox.classList.add('time-box');
+
+    buttonBox.append(prevButton);
+    buttonBox.append(timeBox);
+    buttonBox.append(nextButton);
+
+    this.widget.contentElement.append(imageBox);
+    this.widget.contentElement.append(buttonBox);
+
+    this.widget.element.tabIndex = 0;
+    this.widget.contentElement.append();
+    this.widget.contentElement.addEventListener('keydown', this.keyDown.bind(this), false);
     this.dialog = null;
 
     void this.render();
@@ -210,8 +220,8 @@ export class Dialog {
   private resize(): void {
     if (!this.dialog) {
       this.dialog = new UI.Dialog.Dialog();
-      this.dialog.contentElement.appendChild(this.widget);
-      this.dialog.setDefaultFocusedElement(this.widget);
+      this.widget.show(this.dialog.contentElement);
+      this.dialog.setDefaultFocusedElement(this.widget.element);
       this.dialog.show();
     }
     this.dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.MEASURE_CONTENT);
@@ -273,8 +283,15 @@ export class Dialog {
   private render(): void {
     const frame = this.#data.frames[this.index];
     const timestamp = Trace.Helpers.Timing.microToMilli(frame.screenshotEvent.ts);
-    this.fragment.$('time').textContent = i18n.TimeUtilities.millisToString(timestamp - this.#zeroTime());
-    const image = (this.fragment.$('image') as HTMLImageElement);
+    const timeBox = this.widget.contentElement.querySelector('.time-box');
+    if (timeBox) {
+      timeBox.textContent = i18n.TimeUtilities.millisToString(timestamp - this.#zeroTime());
+    }
+
+    const image = this.widget.contentElement.querySelector('img');
+    if (!image) {
+      return;
+    }
     image.setAttribute('data-frame-index', this.index.toString());
     const imgData = Trace.Handlers.ModelHandlers.Screenshots.screenshotImageDataUri(frame.screenshotEvent);
     FilmStripView.setImageData(image, imgData);

package/front_end/ui/legacy/components/perf_ui/filmStripView.css

@@ -59,3 +59,32 @@
 .film-strip-view .frame:focus .thumbnail img {
   box-shadow: none;
 }
+
+.film-strip-image-dialog {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  .image-box {
+    overflow: auto;
+    margin: var(--sys-size-7) var(--sys-size-8) var(--sys-size-8)
+      var(--sys-size-8);
+    border: var(--sys-size-1) solid var(--sys-color-divider);
+  }
+
+  img {
+    max-height: 80vh;
+    max-width: 80vw;
+  }
+
+  .time-box {
+    margin: 0 var(--sys-size-3);
+  }
+
+  .button-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: var(--sys-size-6) 0 var(--sys-size-5);
+  }
+}

package/front_end/ui/legacy/components/source_frame/XMLView.ts

@@ -5,6 +5,7 @@
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as Lit from '../../../lit/lit.js';
+import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
 import xmlTreeStyles from './xmlTree.css.js';
@@ -29,7 +30,7 @@ function* attributes(element: Element): Generator<Attr> {
 }
 
 function hasNonTextChildren(node: Node): boolean {
-  return node.childNodes.length !== node.childTextNodes.length;
+  return Boolean(node.childNodes.values().find(node => node.nodeType !== Node.TEXT_NODE));
 }
 
 function textView(treeNode: XMLTreeViewNode, closeTag: boolean): string {
@@ -249,7 +250,7 @@ export class XMLView extends UI.Widget.Widget implements UI.SearchableView.Searc
   #nextJump: SearchResult|undefined;
 
   constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
-    super(target, {jslog: 'xml-view', classes: ['shadow-xml-view', 'source-code']});
+    super(target, {jslog: `${VisualLogging.pane('xml-view')}`, classes: ['shadow-xml-view', 'source-code']});
     this.#view = view;
   }
 

package/front_end/ui/legacy/legacy.ts

@@ -52,7 +52,6 @@ import * as ViewManager from './ViewManager.js';
 import * as Widget from './Widget.js';
 import * as XElement from './XElement.js';
 import * as XLink from './XLink.js';
-import * as XWidget from './XWidget.js';
 import * as ZoomManager from './ZoomManager.js';
 
 export {
@@ -106,6 +105,5 @@ export {
   Widget,
   XElement,
   XLink,
-  XWidget,
   ZoomManager,
 };

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -4137,6 +4137,7 @@ export const knownContextValues = new Set([
   'x-offset',
   'x-small',
   'xhr',
+  'xml-view',
   'xr',
   'xx-large',
   'xx-small',

package/package.json

@@ -102,5 +102,5 @@
       "@eslint/core": "0.15.1"
     }
   },
-  "version": "1.0.1521880"
+  "version": "1.0.1522585"
 }

package/front_end/panels/application/components/reportingApiGrid.css

@@ -1,31 +0,0 @@
-/*
- * Copyright 2021 The Chromium Authors
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-:host {
-  overflow: auto;
-  height: 100%;
-}
-
-.reporting-container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.reporting-header {
-  font-size: 15px;
-  background-color: var(--sys-color-surface2);
-  padding: 1px 4px;
-  flex-shrink: 0;
-}
-
-devtools-data-grid {
-  flex: auto;
-}
-
-.inline-icon {
-  vertical-align: text-bottom;
-}

package/front_end/ui/legacy/XWidget.ts

@@ -1,133 +0,0 @@
-// Copyright 2017 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import {XElement} from './XElement.js';
-
-let observer: ResizeObserver|null = null;
-
-const storedScrollPositions = new WeakMap<Element, {
-  scrollLeft: number,
-  scrollTop: number,
-}>();
-
-export class XWidget extends XElement {
-  private visible: boolean;
-  defaultFocusedElement: Element|null;
-  private elementsToRestoreScrollPositionsFor: Element[];
-  private onShownCallback!: (() => void)|null;
-  private onHiddenCallback!: (() => void)|null;
-  private onResizedCallback!: (() => void)|null;
-
-  constructor() {
-    super();
-    this.style.setProperty('display', 'flex');
-    this.style.setProperty('flex-direction', 'column');
-    this.style.setProperty('align-items', 'stretch');
-    this.style.setProperty('justify-content', 'flex-start');
-    this.style.setProperty('contain', 'layout style');
-
-    this.visible = false;
-    this.defaultFocusedElement = null;
-    this.elementsToRestoreScrollPositionsFor = [];
-
-    if (!observer) {
-      observer = new ResizeObserver(entries => {
-        for (const entry of entries) {
-          const widget = (entry.target as XWidget);
-          if (widget.visible && widget.onResizedCallback) {
-            widget.onResizedCallback.call(null);
-          }
-        }
-      });
-    }
-
-    observer.observe(this);
-
-    this.setElementsToRestoreScrollPositionsFor([this]);
-  }
-
-  isShowing(): boolean {
-    return this.visible;
-  }
-
-  setElementsToRestoreScrollPositionsFor(elements: Element[]): void {
-    for (const element of this.elementsToRestoreScrollPositionsFor) {
-      element.removeEventListener('scroll', XWidget.storeScrollPosition, {capture: false});
-    }
-    this.elementsToRestoreScrollPositionsFor = elements;
-    for (const element of this.elementsToRestoreScrollPositionsFor) {
-      element.addEventListener('scroll', XWidget.storeScrollPosition, {passive: true, capture: false});
-    }
-  }
-
-  restoreScrollPositions(): void {
-    for (const element of this.elementsToRestoreScrollPositionsFor) {
-      const storedPositions = storedScrollPositions.get(element);
-      if (storedPositions) {
-        element.scrollTop = storedPositions.scrollTop;
-        element.scrollLeft = storedPositions.scrollLeft;
-      }
-    }
-  }
-
-  private static storeScrollPosition(event: Event): void {
-    const element = (event.currentTarget as Element);
-    storedScrollPositions.set(element, {scrollLeft: element.scrollLeft, scrollTop: element.scrollTop});
-  }
-
-  setDefaultFocusedElement(element: Element|null): void {
-    if (element && !this.isSelfOrAncestor(element)) {
-      throw new Error('Default focus must be descendant');
-    }
-    this.defaultFocusedElement = element;
-  }
-
-  override focus(): void {
-    if (!this.visible) {
-      return;
-    }
-
-    let element;
-    if (this.defaultFocusedElement && this.isSelfOrAncestor(this.defaultFocusedElement)) {
-      element = this.defaultFocusedElement;
-    } else if (this.tabIndex !== -1) {
-      element = this;
-    } else {
-      let child = this.traverseNextNode(this);
-      while (child) {
-        if ((child instanceof XWidget) && child.visible) {
-          element = child;
-          break;
-        }
-        child = child.traverseNextNode(this);
-      }
-    }
-
-    if (!element || element.hasFocus()) {
-      return;
-    }
-    if (element === this) {
-      HTMLElement.prototype.focus.call(this);
-    } else {
-      (element as HTMLElement).focus();
-    }
-  }
-
-  connectedCallback(): void {
-    this.visible = true;
-    this.restoreScrollPositions();
-    if (this.onShownCallback) {
-      this.onShownCallback.call(null);
-    }
-  }
-
-  disconnectedCallback(): void {
-    this.visible = false;
-    if (this.onHiddenCallback) {
-      this.onHiddenCallback.call(null);
-    }
-  }
-}
-
-customElements.define('x-widget', XWidget);