chrome-devtools-frontend 1.0.1555174 → 1.0.1556696

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -1165,71 +1165,38 @@ export class AppManifestTreeElement extends ApplicationPanelTreeElement {
   generateChildren(): void {
     const staticSections = this.view.getStaticSections();
     for (const section of staticSections) {
-      const sectionElement = section.getTitleElement();
-      const childTitle = section.title();
-      const sectionFieldElement = section.getFieldElement();
-      const child = new ManifestChildTreeElement(
-          this.resourcesPanel, sectionElement, childTitle, sectionFieldElement, section.jslogContext || '');
-      this.appendChild(child);
-    }
-  }
-
-  onInvoke(): void {
-    this.view.getManifestElement().scrollIntoView();
-    UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.onInvokeAlert, {PH1: this.listItemElement.title}));
-  }
+      const childTitle = section.title;
+      const child = new ApplicationPanelTreeElement(this.resourcesPanel, childTitle, false, section.jslogContext || '');
+      child.onselect = (selectedByUser?: boolean): boolean => {
+        if (selectedByUser) {
+          this.showView(this.view);
+          this.view.scrollToSection(childTitle);
+        }
+        return true;
+      };
 
-  showManifestView(): void {
-    this.showView(this.view);
-  }
-}
+      const icon = createIcon('document');
+      child.setLeadingIcons([icon]);
 
-export class ManifestChildTreeElement extends ApplicationPanelTreeElement {
-  #sectionElement: Element;
-  #sectionFieldElement: HTMLElement;
-  constructor(
-      storagePanel: ResourcesPanel, element: Element, childTitle: string, fieldElement: HTMLElement,
-      jslogContext: string) {
-    super(storagePanel, childTitle, false, jslogContext);
-    const icon = createIcon('document');
-    this.setLeadingIcons([icon]);
-    this.#sectionElement = element;
-    this.#sectionFieldElement = fieldElement;
-    self.onInvokeElement(this.listItemElement, this.onInvoke.bind(this));
-    this.listItemElement.addEventListener('keydown', this.onInvokeElementKeydown.bind(this));
-    UI.ARIAUtils.setLabel(
-        this.listItemElement, i18nString(UIStrings.beforeInvokeAlert, {PH1: this.listItemElement.title}));
-  }
+      child.listItemElement.addEventListener('keydown', (event: Event) => {
+        if ((event as KeyboardEvent).key !== 'Tab' || (event as KeyboardEvent).shiftKey) {
+          return;
+        }
 
-  override get itemURL(): Platform.DevToolsPath.UrlString {
-    return 'manifest://' + this.title as Platform.DevToolsPath.UrlString;
+        if (this.view.focusOnSection(childTitle)) {
+          event.consume(true);
+        }
+      });
+      UI.ARIAUtils.setLabel(
+          child.listItemElement, i18nString(UIStrings.beforeInvokeAlert, {PH1: child.listItemElement.title}));
+      this.appendChild(child);
+    }
   }
 
   onInvoke(): void {
-    (this.parent as AppManifestTreeElement)?.showManifestView();
-    this.#sectionElement.scrollIntoView();
+    this.view.getManifestElement().scrollIntoView();
     UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.onInvokeAlert, {PH1: this.listItemElement.title}));
   }
-  // direct focus to the corresponding element
-  onInvokeElementKeydown(event: KeyboardEvent): void {
-    if (event.key !== 'Tab' || event.shiftKey) {
-      return;
-    }
-    const checkBoxElement = this.#sectionFieldElement.querySelector('.mask-checkbox');
-    let focusableElement: HTMLElement|null = this.#sectionFieldElement.querySelector('[tabindex="0"]');
-    if (checkBoxElement?.shadowRoot) {
-      focusableElement = checkBoxElement.shadowRoot.querySelector('input') || null;
-    } else if (!focusableElement) {
-      // special case for protocol handler section since it is a custom Element and has different structure than the others
-      focusableElement = this.#sectionFieldElement.querySelector('devtools-protocol-handlers-view')
-                             ?.shadowRoot?.querySelector('[tabindex="0"]') ||
-          null;
-    }
-    if (focusableElement) {
-      focusableElement?.focus();
-      event.consume(true);
-    }
-  }
 }
 
 export class ClearStorageTreeElement extends ApplicationPanelTreeElement {

package/front_end/panels/application/OpenedWindowDetailsView.ts

@@ -153,6 +153,7 @@ export class OpenedWindowDetailsView extends UI.Widget.VBox {
     this.isWindowClosed = isWindowClosed;
 
     this.contentElement.classList.add('frame-details-container');
+    // TODO(crbug.com/1156978): Replace UI.ReportView.ReportView with ReportView.ts web component.
     this.reportView = new UI.ReportView.ReportView(this.buildTitle());
 
     this.reportView.show(this.contentElement);
@@ -220,6 +221,7 @@ export class WorkerDetailsView extends UI.Widget.VBox {
     this.targetInfo = targetInfo;
 
     this.contentElement.classList.add('frame-details-container');
+    // TODO(crbug.com/1156978): Replace UI.ReportView.ReportView with ReportView.ts web component.
     this.reportView =
         new UI.ReportView.ReportView(this.targetInfo.title || this.targetInfo.url || i18nString(UIStrings.worker));
 

package/front_end/panels/application/ServiceWorkersView.ts

@@ -202,6 +202,7 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
     });
     this.registerRequiredCSS(serviceWorkersViewStyles);
 
+    // TODO(crbug.com/1156978): Replace UI.ReportView.ReportView with ReportView.ts web component.
     this.currentWorkersView = new UI.ReportView.ReportView(i18n.i18n.lockedString('Service workers'));
     this.currentWorkersView.setBodyScrollable(false);
     this.contentElement.classList.add('service-worker-list');
@@ -220,6 +221,7 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
 
     const othersDiv = this.contentElement.createChild('div', 'service-workers-other-origin');
     othersDiv.setAttribute('jslog', `${VisualLogging.section('other-origin')}`);
+    // TODO(crbug.com/1156978): Replace UI.ReportView.ReportView with ReportView.ts web component.
     const othersView = new UI.ReportView.ReportView();
     othersView.setHeaderVisible(false);
     othersView.show(othersDiv);

package/front_end/panels/application/StorageView.ts

@@ -181,6 +181,7 @@ export class StorageView extends UI.Widget.VBox {
       [Protocol.Storage.StorageType.Service_workers, 'rgb(255, 167, 36)'],  // orange
     ]);
 
+    // TODO(crbug.com/1156978): Replace UI.ReportView.ReportView with ReportView.ts web component.
     this.reportView = new UI.ReportView.ReportView(i18nString(UIStrings.storageTitle));
     this.reportView.registerRequiredCSS(storageViewStyles);
 

package/front_end/panels/application/appManifestView.css

@@ -39,3 +39,51 @@ select {
 .inline-button {
   vertical-align: sub;
 }
+
+devtools-report .report-row {
+  margin: var(--sys-size-3) 0 var(--sys-size-3) var(--sys-size-9);
+  grid-column: 1 / 3;
+
+  > devtools-checkbox:first-child {
+    margin-left: calc(var(--sys-size-4) * -1);
+  }
+
+  > devtools-icon:first-child {
+    /* We have inline icons that would otherwise be mis-aligned */
+    margin-inline-start: 0;
+  }
+}
+
+devtools-report .report-section {
+  display: grid;
+  grid-column: 1 / 3;
+  grid-template-columns: subgrid;
+  padding-bottom: var(--sys-size-5);
+  border-bottom: 1px solid var(--sys-color-divider);
+  margin-bottom: var(--sys-size-5);
+}
+
+.image-wrapper,
+.image-wrapper img {
+  max-width: 200px;
+  max-height: 200px;
+  display: block;
+  object-fit: contain;
+}
+
+.image-wrapper {
+  display: inline-block;
+  height: fit-content;
+  margin-right: 8px;
+}
+
+.show-mask img {
+  /* The safe zone is a centrally positioned circle, with radius 2/5
+  * (40%) of the minimum of the icon's width and height.
+  * https://w3c.github.io/manifest/#icon-masks */
+  clip-path: circle(40% at 50% 50%);
+}
+
+.show-mask .image-wrapper {
+  background: var(--image-file-checker);
+}

package/front_end/panels/application/components/ProtocolHandlersView.ts

@@ -144,7 +144,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
     ${renderStatusMessage(input.protocolHandler, input.manifestLink)}
     <div class="protocol-handlers-row">
       ${i18nTemplate(UIStrings.needHelpReadOur, {PH1: html`
-        <x-link href=${PROTOCOL_DOCUMENT_URL} tabindex=0 class="devtools-link" jslog=${
+        <x-link href=${PROTOCOL_DOCUMENT_URL} tabindex=0 class="devtools-link" autofocus jslog=${
             VisualLogging.link('learn-more').track({click: true, keydown: 'Enter|Space'})}>
           ${i18nString(UIStrings.protocolHandlerRegistrations)}
         </x-link>`})}
@@ -173,7 +173,7 @@ export class ProtocolHandlersView extends UI.Widget.Widget {
   #view: View;
 
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
-    super(element, {useShadowDom: false});
+    super(element, {useShadowDom: false, classes: ['vbox']});
     this.#view = view;
   }
 

package/front_end/panels/application/preloading/PreloadingView.ts

@@ -417,7 +417,13 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
     this.ruleSetSelector = new PreloadingRuleSetSelector(() => this.render());
     toolbar.appendToolbarItem(this.ruleSetSelector.item());
 
-    this.preloadingGrid.addEventListener('select', this.onPreloadingGridCellFocused.bind(this));
+    this.preloadingGrid.onSelect = this.onPreloadingGridCellFocused.bind(this);
+
+    const preloadingGridContainer = document.createElement('div');
+    preloadingGridContainer.className = 'preloading-grid-widget-container';
+    preloadingGridContainer.style = 'height: 100%';
+    this.preloadingGrid.show(preloadingGridContainer, null, true);
+
     render(
         html`
         <div class="empty-state">
@@ -433,7 +439,7 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
         </div>
         <devtools-split-view sidebar-position="second">
           <div slot="main" class="overflow-auto" style="height: 100%">
-            ${this.preloadingGrid}
+            ${preloadingGridContainer}
           </div>
           <div slot="sidebar" class="overflow-auto" style="height: 100%">
             ${this.preloadingDetails}
@@ -500,15 +506,15 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
         ruleSets,
       };
     });
-    this.preloadingGrid.update({rows, pageURL: pageURL()});
+    this.preloadingGrid.rows = rows;
+    this.preloadingGrid.pageURL = pageURL();
     this.contentElement.classList.toggle('empty', rows.length === 0);
 
     this.updatePreloadingDetails();
   }
 
-  private onPreloadingGridCellFocused(event: Event): void {
-    const focusedEvent = event as CustomEvent<SDK.PreloadingModel.PreloadingAttemptId>;
-    this.focusedPreloadingAttemptId = focusedEvent.detail;
+  private onPreloadingGridCellFocused({rowId}: {rowId: string}): void {
+    this.focusedPreloadingAttemptId = rowId;
     this.render();
   }