chrome-devtools-frontend 1.0.1571573 → 1.0.1573331

package/front_end/panels/application/DeviceBoundSessionsTreeElement.ts

@@ -120,6 +120,46 @@ export class RootTreeElement extends ApplicationPanelTreeElement {
     }
   }
 
+  #updateElementIconAndStyling(
+      sessionElement: ApplicationPanelTreeElement, isSessionTerminated: boolean, sessionHasErrors: boolean): void {
+    if (isSessionTerminated) {
+      sessionElement.listItemElement.classList.add('device-bound-session-terminated');
+      sessionElement.setLeadingIcons([createIcon('database-off')]);
+      return;
+    }
+    sessionElement.listItemElement.classList.remove('device-bound-session-terminated');
+    sessionElement.setLeadingIcons([createIcon(sessionHasErrors ? 'warning' : 'database')]);
+  }
+
+  #updateIconAndStyling(site: string, sessionId: string|undefined): void {
+    const isSessionTerminated = this.#model.isSessionTerminated(site, sessionId);
+    const sessionHasErrors = this.#model.sessionHasErrors(site, sessionId);
+    const siteMapEntry = this.#sites.get(site);
+    if (!siteMapEntry) {
+      return;
+    }
+    const sessionElement = siteMapEntry.sessions.get(sessionId);
+    if (!sessionElement) {
+      return;
+    }
+    this.#updateElementIconAndStyling(sessionElement, isSessionTerminated, sessionHasErrors);
+  }
+
+  #removeWarningIcons(noLongerFailedSessions: Map<string, Array<string|undefined>>): void {
+    for (const [site, noLongerFailedSessionIds] of noLongerFailedSessions) {
+      const siteData = this.#sites.get(site);
+      if (siteData) {
+        for (const noLongerFailedSessionId of noLongerFailedSessionIds) {
+          const sessionElement = siteData.sessions.get(noLongerFailedSessionId);
+          if (sessionElement) {
+            const isSessionTerminated = this.#model.isSessionTerminated(site, noLongerFailedSessionId);
+            this.#updateElementIconAndStyling(sessionElement, isSessionTerminated, /* sessionHasErrors=*/ false);
+          }
+        }
+      }
+    }
+  }
+
   #addSiteSessionIfMissing(site: string, sessionId: string|undefined): void {
     let siteMapEntry = this.#sites.get(site);
     if (!siteMapEntry) {
@@ -144,6 +184,9 @@ export class RootTreeElement extends ApplicationPanelTreeElement {
     if (!siteMapEntry.sessions.has(sessionId)) {
       const sessionElement = new ApplicationPanelTreeElement(
           this.resourcesPanel, sessionId ?? i18nString(UIStrings.noSession), false, 'device-bound-sessions-session');
+      if (sessionId === undefined) {
+        sessionElement.listItemElement.classList.add('no-device-bound-session');
+      }
       sessionElement.setLeadingIcons([createIcon('database')]);
       sessionElement.itemURL = `device-bound-sessions://${site}/${sessionId || ''}` as Platform.DevToolsPath.UrlString;
       const defaultOnSelect = sessionElement.onselect.bind(sessionElement);
@@ -209,11 +252,13 @@ export class RootTreeElement extends ApplicationPanelTreeElement {
       {data: {site, sessionId}}: Common.EventTarget
           .EventTargetEvent<DeviceBoundSessionModelEventTypes[DeviceBoundSessionModelEvents.EVENT_OCCURRED]>): void {
     this.#addSiteSessionIfMissing(site, sessionId);
+    this.#updateIconAndStyling(site, sessionId);
   }
 
-  #onClearEvents({data: {emptySessions, emptySites}}: Common.EventTarget
+  #onClearEvents({data: {emptySessions, emptySites, noLongerFailedSessions}}: Common.EventTarget
                      .EventTargetEvent<DeviceBoundSessionModelEventTypes[DeviceBoundSessionModelEvents.CLEAR_EVENTS]>):
       void {
     this.#removeEmptyElements(emptySessions, emptySites);
+    this.#removeWarningIcons(noLongerFailedSessions);
   }
 }

package/front_end/panels/application/FrameDetailsView.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../ui/kit/kit.js';
 import '../../ui/components/expandable_list/expandable_list.js';
 import '../../ui/components/report_view/report_view.js';
 
@@ -322,10 +323,10 @@ function renderOriginTrial(trials: Protocol.Page.OriginTrial[]|null): LitTemplat
     <devtools-report-section>
       <span class="report-section">
         ${i18nString(UIStrings.originTrialsExplanation)}
-        <x-link href="https://developer.chrome.com/docs/web-platform/origin-trials/" class="link"
-                jslog=${VisualLogging.link('learn-more.origin-trials').track({click: true})}>
+        <devtools-link href="https://developer.chrome.com/docs/web-platform/origin-trials/" class="link"
+                jslogcontext="learn-more.origin-trials">
           ${i18nString(UIStrings.learnMore)}
-        </x-link>
+        </devtools-link>
       </span>
     </devtools-report-section>
     <devtools-widget class="span-cols" .widgetConfig=${widgetConfig(OriginTrialTreeView, {data})}>
@@ -735,11 +736,11 @@ function renderApiAvailabilitySection(frame: SDK.ResourceTreeModel.ResourceTreeF
       <devtools-report-section>
         <span class="report-section">
           ${i18nString(UIStrings.availabilityOfCertainApisDepends)}
-          <x-link
+          <devtools-link
             href="https://web.dev/why-coop-coep/" class="link"
-            jslog=${VisualLogging.link('learn-more.coop-coep').track({click: true})}>
+            jslogcontext="learn-more.coop-coep">
             ${i18nString(UIStrings.learnMore)}
-          </x-link>
+          </devtools-link>
         </span>
       </devtools-report-section>
       ${renderSharedArrayBufferAvailability(frame)}
@@ -814,9 +815,8 @@ function renderMeasureMemoryAvailability(frame: SDK.ResourceTreeModel.ResourceTr
         <devtools-report-key>${i18nString(UIStrings.measureMemory)}</devtools-report-key>
         <devtools-report-value>
           <span title=${tooltipText}>${
-        availabilityText}</span>\xA0<x-link class="link" href="https://web.dev/monitor-total-page-memory-usage/" jslog=${
-        VisualLogging.link('learn-more.monitor-memory-usage').track({click: true})}>${
-        i18nString(UIStrings.learnMore)}</x-link>
+        availabilityText}</span>\xA0<devtools-link class="link" href="https://web.dev/monitor-total-page-memory-usage/" jslogcontext="learn-more.monitor-memory-usage">${
+        i18nString(UIStrings.learnMore)}</devtools-link>
         </devtools-report-value>
       `;
   }
@@ -857,7 +857,7 @@ export class FrameDetailsReportView extends UI.Widget.Widget {
   constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
     this.#protocolMonitorExperimentEnabled =
-        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.PROTOCOL_MONITOR);
+        Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.PROTOCOL_MONITOR);
     this.#view = view;
   }
 

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

@@ -199,10 +199,10 @@ function renderMainFrameInformation(
         frame.backForwardCacheDetails.explanationsTree,
         reasonToFramesMap)}
     <devtools-report-section>
-      <x-link href="https://web.dev/bfcache/" class="link"
-      jslog=${VisualLogging.action('learn-more.eligibility').track({click: true})}>
+      <devtools-link href="https://web.dev/bfcache/" class="link"
+      jslogcontext="learn-more.eligibility">
         ${i18nString(UIStrings.learnMore)}
-      </x-link>
+      </devtools-link>
     </devtools-report-section>`;
   // clang-format on
 }
@@ -370,12 +370,10 @@ function maybeRenderDeepLinkToUnload(explanation: Protocol.Page.BackForwardCache
   if (explanation.reason === Protocol.Page.BackForwardCacheNotRestoredReason.UnloadHandlerExistsInMainFrame ||
       explanation.reason === Protocol.Page.BackForwardCacheNotRestoredReason.UnloadHandlerExistsInSubFrame) {
     return html`
-        <x-link href="https://web.dev/bfcache/#never-use-the-unload-event" class="link"
-        jslog=${VisualLogging.action('learn-more.never-use-unload').track({
-      click: true,
-    })}>
+        <devtools-link href="https://web.dev/bfcache/#never-use-the-unload-event" class="link"
+        jslogContext=${'learn-more.never-use-unload'}>
           ${i18nString(UIStrings.neverUseUnload)}
-        </x-link>`;
+        </devtools-link>`;
   }
   return nothing;
 }

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

@@ -4,6 +4,7 @@
 
 import '../../../ui/components/report_view/report_view.js';
 import '../../../ui/legacy/components/data_grid/data_grid.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as SDK from '../../../core/sdk/sdk.js';
@@ -157,10 +158,10 @@ const renderMainFrameInformation = (input: ViewInput): Lit.LitTemplate => {
     <devtools-report-divider>
     </devtools-report-divider>
     <devtools-report-section>
-      <x-link href="https://privacycg.github.io/nav-tracking-mitigations/#bounce-tracking-mitigations" class="link"
-      jslog=${VisualLogging.link('learn-more').track({click: true})}>
+      <devtools-link href="https://privacycg.github.io/nav-tracking-mitigations/#bounce-tracking-mitigations" class="link"
+      jslogcontext="learn-more">
         ${i18nString(UIStrings.learnMore)}
-      </x-link>
+      </devtools-link>
     </devtools-report-section>
   `;
   // clang-format on

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

@@ -74,8 +74,6 @@ const i18nTemplate = unboundI18nTemplate.bind(undefined, str_);
 
 function renderStatusMessage(
     protocolHandlers: readonly ProtocolHandler[], manifestLink: Platform.DevToolsPath.UrlString): TemplateResult {
-  const manifestInTextLink =
-      UI.XLink.XLink.create(manifestLink, i18nString(UIStrings.manifest), undefined, undefined, 'manifest');
   const statusString = protocolHandlers.length > 0 ? UIStrings.protocolDetected : UIStrings.protocolNotDetected;
   // clang-format off
   return html`
@@ -83,7 +81,9 @@ function renderStatusMessage(
       <devtools-icon class="inline-icon"
                      name=${protocolHandlers.length > 0 ? 'check-circle' : 'info'}>
       </devtools-icon>
-      ${uiI18n.getFormatLocalizedString(str_, statusString, {PH1: manifestInTextLink })}
+      ${uiI18n.getFormatLocalizedStringTemplate(str_, statusString, {PH1: html`
+        <devtools-link href=${manifestLink} jslogcontext="manifest">${i18nString(UIStrings.manifest)}</devtools-link>
+        ` })}
     </div>`;
   // clang-format on
 }
@@ -144,10 +144,9 @@ 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" autofocus jslog=${
-            VisualLogging.link('learn-more').track({click: true, keydown: 'Enter|Space'})}>
+        <devtools-link href=${PROTOCOL_DOCUMENT_URL} class="devtools-link" autofocus jslogcontext="learn-more">
           ${i18nString(UIStrings.protocolHandlerRegistrations)}
-        </x-link>`})}
+        </devtools-link>`})}
     </div>
     ${renderProtocolTest(input.protocolHandler, input.queryInputState, input.protocolSelectHandler,
                          input.queryInputChangeHandler, input.testProtocolClickHandler)}

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

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/kit/kit.js';
 import '../../../ui/legacy/components/data_grid/data_grid.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -80,11 +81,11 @@ export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLEl
               <th id="status" weight="20">
                 <style>${reportsGridStyles}</style>
                 <span class="status-header">${i18nString(UIStrings.status)}</span>
-                <x-link href="https://web.dev/reporting-api/#report-status"
-                jslog=${VisualLogging.link('report-status').track({click: true})}>
+                <devtools-link href="https://web.dev/reporting-api/#report-status"
+                jslogcontext="report-status">
                   <devtools-icon class="inline-icon medium" name="help" style="color: var(--icon-link);"
                   ></devtools-icon>
-                </x-link>
+                </devtools-link>
               </th>
               <th id="destination" weight="20">${i18nString(UIStrings.destination)}</th>
               <th id="timestamp" weight="20">${i18nString(UIStrings.generatedAt)}</th>
@@ -108,13 +109,11 @@ export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLEl
           <span class="empty-state-header">${i18nString(UIStrings.noReportsToDisplay)}</span>
           <div class="empty-state-description">
             <span>${i18nString(UIStrings.reportingApiDescription)}</span>
-            <x-link
+            <devtools-link
               class="devtools-link"
               href=${REPORTING_API_EXPLANATION_URL}
-              jslog=${VisualLogging.link()
-                      .track({ click: true, keydown: 'Enter|Space' })
-                      .context('learn-more')}
-            >${i18nString(UIStrings.learnMore)}</x-link>
+              jslogcontext="learn-more"
+            >${i18nString(UIStrings.learnMore)}</devtools-link>
           </div>
         </div>
       `}
@@ -135,7 +134,7 @@ export class ReportsGrid extends UI.Widget.Widget {
     super(element);
     this.#view = view;
     this.#protocolMonitorExperimentEnabled =
-        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.PROTOCOL_MONITOR);
+        Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.PROTOCOL_MONITOR);
     this.requestUpdate();
   }
 

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

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/kit/kit.js';
 import '../../../ui/legacy/components/data_grid/data_grid.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -97,11 +98,11 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           <div class="empty-state-header">${i18nString(UIStrings.noEvents)}</div>
           <div class="empty-state-description">
             <span>${i18nString(UIStrings.sharedStorageDescription)}</span>
-            <x-link
-              class="x-link devtools-link"
+            <devtools-link
+              class="devtools-link"
               href=${SHARED_STORAGE_EXPLANATION_URL}
-              jslog=${VisualLogging.link().track({click: true, keydown: 'Enter|Space'}).context('learn-more')}
-            >${i18nString(UIStrings.learnMore)}</x-link>
+              .jslogContext=${'learn-more'}
+            >${i18nString(UIStrings.learnMore)}</devtools-link>
           </div>
         </div>`
       : html`

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

@@ -78,13 +78,11 @@ function renderGridOrNoDataMessage(input: TrustTokensViewInput): Lit.TemplateRes
             <div class="empty-state-header">${i18nString(UIStrings.noTrustTokens)}</div>
             <div class="empty-state-description">
               <span>${i18nString(UIStrings.trustTokensDescription)}</span>
-              <x-link
-                class="x-link devtools-link"
+              <devtools-link
+                class="devtools-link"
                 href=${PRIVATE_STATE_TOKENS_EXPLANATION_URL}
-                jslog=${VisualLogging.link()
-                        .track({ click: true, keydown: 'Enter|Space' })
-                        .context('learn-more')}
-              >${i18nString(UIStrings.learnMore)}</x-link>
+                .jslogContext=${'learn-more'}
+              >${i18nString(UIStrings.learnMore)}</devtools-link>
             </div>
           </div>
         </div>

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

@@ -4,6 +4,7 @@
 /* eslint-disable @devtools/no-imperative-dom-api */
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
+import '../../../ui/kit/kit.js';
 import '../../../ui/legacy/legacy.js';
 
 import * as Common from '../../../core/common/common.js';
@@ -253,11 +254,11 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
           <span class="empty-state-header">${i18nString(UIStrings.noRulesDetected)}</span>
           <div class="empty-state-description">
             <span>${i18nString(UIStrings.rulesDescription)}</span>
-            <x-link
-              class="x-link devtools-link"
+            <devtools-link
+              class="devtools-link"
               href=${SPECULATION_EXPLANATION_URL}
-              jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('learn-more')}
-            >${i18nString(UIStrings.learnMore)}</x-link>
+              jslogcontext="learn-more"
+            >${i18nString(UIStrings.learnMore)}</devtools-link>
           </div>
         </div>
         <devtools-split-view sidebar-position="second">
@@ -430,11 +431,11 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
           <span class="empty-state-header">${i18nString(UIStrings.noPrefetchAttempts)}</span>
           <div class="empty-state-description">
             <span>${i18nString(UIStrings.prefetchDescription)}</span>
-            <x-link
-              class="x-link devtools-link"
+            <devtools-link
+              class="devtools-link"
               href=${SPECULATION_EXPLANATION_URL}
-              jslog=${VisualLogging.link().track({click: true, keydown: 'Enter|Space'}).context('learn-more')}
-            >${i18nString(UIStrings.learnMore)}</x-link>
+              jslogcontext="learn-more"
+            >${i18nString(UIStrings.learnMore)}</devtools-link>
           </div>
         </div>
         <devtools-split-view sidebar-position="second">