chrome-devtools-frontend 1.0.969345 → 1.0.970539

package/front_end/panels/animation/animationTimeline.css

@@ -338,7 +338,6 @@ text.animation-timeline-grid-label {
   background: var(--color-background-elevation-2);
   opacity: 0%;
   border-right: 1px solid var(--color-details-hairline);
-  cursor: pointer;
 }
 
 .animation-buffer-preview:focus-visible {
@@ -410,7 +409,6 @@ text.animation-timeline-grid-label {
   background-color: transparent;
   flex: 1 0 auto;
   text-align: center;
-  cursor: pointer;
 }
 
 .animation-playback-rate-button:first-child {
@@ -454,7 +452,6 @@ text.animation-timeline-grid-label {
   box-shadow: 0 1px 4px 0 var(--color-background-highlight);
   z-index: 100;
   display: none;
-  cursor: pointer;
   font-weight: 700;
   color: var(--color-background);
 }

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

@@ -19,6 +19,21 @@ const UIStrings = {
   *(https://developers.google.com/web/updates/2018/09/reportingapi#sending)
   */
   noReportsToDisplay: 'No reports to display',
+  /**
+  *@description Column header for a table displaying Reporting API reports.
+  *Status is one of 'Queued', 'Pending', 'MarkedForRemoval' or 'Success'.
+  */
+  status: 'Status',
+  /**
+  *@description Column header for a table displaying Reporting API reports.
+  *Destination is the name of the endpoint the report is being sent to.
+  */
+  destination: 'Destination',
+  /**
+  *@description Column header for a table displaying Reporting API reports.
+  *The column contains the timestamp of when a report was generated.
+  */
+  generatedAt: 'Generated at',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/ReportsGrid.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -38,7 +53,7 @@ export class ReportsGridStatusHeader extends HTMLElement {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
-      ${i18n.i18n.lockedString('Status')}
+      ${i18nString(UIStrings.status)}
       <x-link href="https://web.dev/reporting-api/#report-status">
         <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
           iconName: 'help_outline',
@@ -93,7 +108,7 @@ export class ReportsGrid extends HTMLElement {
         },
         {
           id: 'status',
-          title: i18n.i18n.lockedString('Status'),
+          title: i18nString(UIStrings.status),
           widthWeighting: 20,
           hideable: false,
           visible: true,
@@ -103,14 +118,14 @@ export class ReportsGrid extends HTMLElement {
         },
         {
           id: 'destination',
-          title: i18n.i18n.lockedString('Destination'),
+          title: i18nString(UIStrings.destination),
           widthWeighting: 20,
           hideable: false,
           visible: true,
         },
         {
           id: 'timestamp',
-          title: i18n.i18n.lockedString('Timestamp'),
+          title: i18nString(UIStrings.generatedAt),
           widthWeighting: 20,
           hideable: false,
           visible: true,

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

@@ -12,7 +12,6 @@
   border: none;
   padding: 0;
   outline: none;
-  cursor: pointer;
 }
 
 .delete-button:hover devtools-icon {

package/front_end/panels/console/consolePinPane.css

@@ -71,23 +71,6 @@
   overflow: hidden;
 }
 
-.console-delete-pin {
-  position: absolute;
-  top: 8px;
-  left: 8px;
-  opacity: 70%;
-  cursor: pointer;
-}
-
-.console-delete-pin:hover,
-.console-delete-pin:focus-visible {
-  opacity: 100%;
-}
-
-:host-context(.-theme-with-dark-background) .console-delete-pin {
-  filter: brightness(2);
-}
-
 .console-pin-name:focus-within {
   background: var(--color-background);
   box-shadow: var(--legacy-focus-ring-active-shadow) inset;

package/front_end/panels/css_overview/cssOverviewCompletedView.css

@@ -85,7 +85,6 @@
   height: 25px;
   border-radius: 3px;
   margin-right: 16px;
-  cursor: pointer;
 }
 
 .block-title {

package/front_end/panels/elements/components/adornerSettingsPane.css

@@ -39,7 +39,6 @@
   border: none;
   border-radius: 50%;
   background-color: var(--color-background-elevation-1);
-  cursor: pointer;
 }
 
 .close::before,

package/front_end/panels/elements/components/computedStyleTrace.css

@@ -16,7 +16,7 @@
 
 .computed-style-trace:hover {
   background-color: var(--legacy-focus-bg-color);
-  cursor: pointer;
+  cursor: text;
 }
 
 .goto {

package/front_end/panels/elements/components/elementsBreadcrumbs.css

@@ -73,7 +73,6 @@
 .overflow:not(:disabled):hover {
   background-color: var(--color-background-elevation-2);
   color: var(--color-text-primary);
-  cursor: pointer;
 }
 
 .crumb-link {

package/front_end/panels/elements/computedStyleWidgetTree.css

@@ -15,7 +15,7 @@
 
 .tree-outline li:hover {
   background-color: var(--legacy-focus-bg-color);
-  cursor: pointer;
+  cursor: text;
 }
 
 .tree-outline li::before {
@@ -35,7 +35,7 @@
   margin: 1px 0 0;
   padding: 1em 0;
   width: 100%;
-  cursor: pointer;
+  cursor: text;
   color: var(--color-text-secondary);
   font-size: 11px;
   font-weight: 400;

package/front_end/panels/elements/elementsTreeOutline.css

@@ -203,7 +203,6 @@ select {
   border-radius: 5px;
   border: 1px solid var(--issue-color-yellow);
   background-color: var(--issue-color-yellow);
-  cursor: pointer;
 }
 
 .elements-gutter-decoration.elements-has-decorated-children {
@@ -278,7 +277,6 @@ select {
   position: absolute;
   top: 0;
   left: 0;
-  cursor: pointer;
   width: 15px;
   height: 15px;
 }

package/front_end/panels/emulation/deviceModeView.css

@@ -90,7 +90,6 @@
   pointer-events: auto;
   text-align: center;
   flex: none;
-  cursor: pointer;
   color: var(--color-text-primary);
   display: flex;
   align-items: center;

package/front_end/panels/event_listeners/eventListenersView.css

@@ -56,7 +56,6 @@
   border: 1px solid var(--color-details-hairline);
   margin-left: 5px;
   display: block;
-  cursor: pointer;
   opacity: 80%;
   flex-shrink: 0;
 }

package/front_end/panels/issues/components/hideIssuesMenu.css

@@ -14,7 +14,6 @@
   padding: 1px 4px;
   overflow: hidden;
   border-radius: 0;
-  cursor: pointer;
   border: none;
 
   --icon-color: var(--color-text-primary);

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -125,6 +125,14 @@ const UIStrings = {
   *@description Text of checkbox to reset storage features prior to running audits in Lighthouse
   */
   clearStorage: 'Clear storage',
+  /**
+   * @description Text of checkbox to use the legacy Lighthouse navigation mode
+   */
+  legacyNavigation: 'Legacy navigation',
+  /**
+   * @description Tooltip text that appears when hovering over the 'Legacy navigation' checkbox in the settings pane opened by clicking the setting cog in the start view of the audits panel
+   */
+  useLegacyNavigation: 'Audit the page using classic Lighthouse when in navigation mode.',
   /**
   * @description Tooltip text of checkbox to reset storage features prior to running audits in
   * Lighthouse. Resetting the storage clears/empties it to a neutral state.
@@ -277,7 +285,11 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     return navigationEntry.url;
   }
 
-  getFlags(): {internalDisableDeviceScreenEmulation: boolean, emulatedFormFactor: (string|undefined)} {
+  getFlags(): {
+    internalDisableDeviceScreenEmulation: boolean,
+    emulatedFormFactor: (string|undefined),
+    legacyNavigation: boolean,
+  } {
     const flags = {
       // DevTools handles all the emulation. This tells Lighthouse to not bother with emulation.
       internalDisableDeviceScreenEmulation: true,
@@ -288,6 +300,7 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     return flags as {
       internalDisableDeviceScreenEmulation: boolean,
       emulatedFormFactor: (string | undefined),
+      legacyNavigation: boolean,
     };
   }
 
@@ -433,6 +446,17 @@ export const RuntimeSettings: RuntimeSetting[] = [
     options: undefined,
     learnMore: undefined,
   },
+  {
+    setting: Common.Settings.Settings.instance().createSetting(
+        'lighthouse.legacy_navigation', true, Common.Settings.SettingStorageType.Synced),
+    title: i18nLazyString(UIStrings.legacyNavigation),
+    description: i18nLazyString(UIStrings.useLegacyNavigation),
+    setFlags: (flags: Flags, value: string|boolean): void => {
+      flags.legacyNavigation = value;
+    },
+    options: undefined,
+    learnMore: undefined,
+  },
 ];
 
 // TODO(crbug.com/1167717): Make this a const enum again

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -11,6 +11,11 @@ import type * as ReportRenderer from './LighthouseReporterTypes.js';
 let lastId = 1;
 
 export class ProtocolService {
+  private targetInfo?: {
+    mainSessionId: string,
+    mainTargetId: string,
+    mainFrameId: string,
+  };
   private rawConnection?: ProtocolClient.InspectorBackend.Connection;
   private lighthouseWorkerPromise?: Promise<Worker>;
   private lighthouseMessageUpdateCallback?: ((arg0: string) => void);
@@ -19,26 +24,53 @@ export class ProtocolService {
     await SDK.TargetManager.TargetManager.instance().suspendAllTargets();
     const mainTarget = SDK.TargetManager.TargetManager.instance().mainTarget();
     if (!mainTarget) {
-      throw new Error('Unable to find main target required for LightHouse');
+      throw new Error('Unable to find main target required for Lighthouse');
     }
     const childTargetManager = mainTarget.model(SDK.ChildTargetManager.ChildTargetManager);
     if (!childTargetManager) {
-      throw new Error('Unable to find child target manager required for LightHouse');
+      throw new Error('Unable to find child target manager required for Lighthouse');
     }
-    this.rawConnection = await childTargetManager.createParallelConnection(message => {
+    const resourceTreeModel = mainTarget.model(SDK.ResourceTreeModel.ResourceTreeModel);
+    if (!resourceTreeModel) {
+      throw new Error('Unable to find resource tree model required for Lighthouse');
+    }
+    const mainFrame = resourceTreeModel.mainFrame;
+    if (!mainFrame) {
+      throw new Error('Unable to find main frame required for Lighthouse');
+    }
+
+    const {connection, sessionId} = await childTargetManager.createParallelConnection(message => {
       if (typeof message === 'string') {
         message = JSON.parse(message);
       }
       this.dispatchProtocolMessage(message);
     });
+
+    this.rawConnection = connection;
+    this.targetInfo = {
+      mainTargetId: await childTargetManager.getParentTargetId(),
+      mainFrameId: mainFrame.id,
+      mainSessionId: sessionId,
+    };
   }
 
   getLocales(): readonly string[] {
     return [i18n.DevToolsLocale.DevToolsLocale.instance().locale];
   }
 
-  startLighthouse(auditURL: string, categoryIDs: string[], flags: Object): Promise<ReportRenderer.RunnerResult> {
-    return this.sendWithResponse('start', {url: auditURL, categoryIDs, flags, locales: this.getLocales()});
+  async startLighthouse(auditURL: string, categoryIDs: string[], flags: Record<string, Object|undefined>):
+      Promise<ReportRenderer.RunnerResult> {
+    if (!this.targetInfo) {
+      throw new Error('Unable to get target info required for Lighthouse');
+    }
+    const mode = flags.legacyNavigation ? 'start' : 'navigate';
+    return this.sendWithResponse(mode, {
+      url: auditURL,
+      categoryIDs,
+      flags,
+      locales: this.getLocales(),
+      target: this.targetInfo,
+    });
   }
 
   async detach(): Promise<void> {

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -113,6 +113,7 @@ export class StartView extends UI.Widget.Widget {
   }
 
   private render(): void {
+    this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.legacy_navigation', this.settingsToolbarInternal);
     this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.clear_storage', this.settingsToolbarInternal);
     this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.throttling', this.settingsToolbarInternal);
 

package/front_end/panels/lighthouse/LighthouseStatusView.ts

@@ -321,7 +321,7 @@ export class StatusView {
   }
 
   private getPhaseForMessage(message: string): StatusPhase|null {
-    return StatusPhases.find(phase => message.startsWith(phase.statusMessagePrefix)) || null;
+    return StatusPhases.find(phase => phase.statusMessageRegex.test(message)) || null;
   }
 
   private resetProgressBarClasses(): void {
@@ -457,7 +457,7 @@ export interface StatusPhase {
   id: string;
   progressBarClass: string;
   message: () => Common.UIString.LocalizedString;
-  statusMessagePrefix: string;
+  statusMessageRegex: RegExp;
 }
 
 export const StatusPhases: StatusPhase[] = [
@@ -465,19 +465,19 @@ export const StatusPhases: StatusPhase[] = [
     id: 'loading',
     progressBarClass: 'loading',
     message: i18nLazyString(UIStrings.lighthouseIsLoadingThePage),
-    statusMessagePrefix: 'Loading page',
+    statusMessageRegex: /^(Loading page|Navigating to)/,
   },
   {
     id: 'gathering',
     progressBarClass: 'gathering',
     message: i18nLazyString(UIStrings.lighthouseIsGatheringInformation),
-    statusMessagePrefix: 'Gathering',
+    statusMessageRegex: /^(Gathering|Computing artifact)/,
   },
   {
     id: 'auditing',
     progressBarClass: 'auditing',
     message: i18nLazyString(UIStrings.almostThereLighthouseIsNow),
-    statusMessagePrefix: 'Auditing',
+    statusMessageRegex: /^Auditing/,
   },
 ];
 

package/front_end/panels/media/playerListView.css

@@ -61,7 +61,6 @@ li.storage-group-list-item::before {
 }
 
 .player-entry-row:hover {
-  cursor: pointer;
   background: var(--color-background-hover-overlay);
 }
 

package/front_end/panels/network/networkLogView.css

@@ -124,10 +124,6 @@
   color: inherit;
 }
 
-.network-log-grid.data-grid .name-column {
-  cursor: pointer;
-}
-
 .network-log-grid.data-grid .waterfall-column {
   padding: 1px 0;
 }

package/front_end/panels/network/requestPayloadTree.css

@@ -71,7 +71,6 @@
 
 .tree-outline li .header-toggle:hover {
   color: var(--color-text-secondary);
-  cursor: pointer;
 }
 
 .tree-outline .payload-name {
@@ -105,7 +104,6 @@
   display: inline-block;
   font-size: 12px;
   font-family: sans-serif;
-  cursor: pointer;
   margin: 0 4px;
   padding: 2px 4px;
 }

package/front_end/panels/network/signedExchangeInfoTree.css

@@ -69,7 +69,6 @@
   --override-header-hover-color: rgb(20% 20% 45%);
 
   color: var(--override-header-hover-color);
-  cursor: pointer;
 }
 
 .-theme-with-dark-background .tree-outline .header-toggle:hover,

package/front_end/panels/settings/emulation/components/userAgentClientHintsForm.css

@@ -75,10 +75,6 @@
   margin-right: 5px;
 }
 
-.delete-icon {
-  cursor: pointer;
-}
-
 .brand-row {
   display: flex;
   align-items: center;

package/front_end/panels/settings/emulation/devicesSettingsTab.css

@@ -34,7 +34,6 @@
   display: flex;
   align-items: center;
   flex: auto 1 1;
-  cursor: pointer;
   overflow: hidden;
   color: var(--color-text-primary);
   user-select: none;

package/front_end/panels/snippets/ScriptSnippetFileSystem.ts

@@ -28,12 +28,12 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/snippets/ScriptSnippetFileSystem.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-function escapeSnippetName(name: string): string {
-  return escape(name);
+function escapeSnippetName(name: string): Platform.DevToolsPath.EncodedPathString {
+  return Common.ParsedURL.ParsedURL.rawPathToEncodedPathString(name as Platform.DevToolsPath.RawPathString);
 }
 
 function unescapeSnippetName(name: string): string {
-  return unescape(name);
+  return Common.ParsedURL.ParsedURL.encodedPathToRawPathString(name as Platform.DevToolsPath.EncodedPathString);
 }
 
 export class SnippetFileSystem extends Persistence.PlatformFileSystem.PlatformFileSystem {
@@ -47,7 +47,7 @@ export class SnippetFileSystem extends Persistence.PlatformFileSystem.PlatformFi
     this.snippetsSetting = Common.Settings.Settings.instance().createSetting('scriptSnippets', []);
   }
 
-  initialFilePaths(): string[] {
+  initialFilePaths(): Platform.DevToolsPath.EncodedPathString[] {
     const savedSnippets: Snippet[] = this.snippetsSetting.get();
     return savedSnippets.map(snippet => escapeSnippetName(snippet.name));
   }

package/front_end/panels/snippets/SnippetsQuickOpen.ts

@@ -77,7 +77,7 @@ export class SnippetsQuickOpen extends QuickOpen.FilteredListWidget.Provider {
   }
 
   renderItem(itemIndex: number, query: string, titleElement: Element, _subtitleElement: Element): void {
-    titleElement.textContent = unescape(this.snippets[itemIndex].name());
+    titleElement.textContent = this.snippets[itemIndex].name();
     titleElement.classList.add('monospace');
     QuickOpen.FilteredListWidget.FilteredListWidget.highlightRanges(titleElement, query, true);
   }

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -584,6 +584,15 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
     const uiSourceCode = event.data;
     this.updateFileTitle(uiSourceCode);
     this.updateHistory();
+
+    // Remove from map under old url if it has changed.
+    for (const [k, v] of this.uriToUISourceCode) {
+      if (v === uiSourceCode && k !== v.url()) {
+        this.uriToUISourceCode.delete(k);
+      }
+    }
+    // Ensure it is mapped under current url.
+    this.canonicalUISourceCode(uiSourceCode);
   }
 
   private uiSourceCodeWorkingCopyChanged(

package/front_end/panels/sources/watchExpressionsSidebarPane.css

@@ -7,7 +7,6 @@
 .watch-expression-delete-button {
   position: absolute;
   top: 5px;
-  cursor: pointer;
   opacity: 0%;
 }
 

package/front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -144,6 +144,10 @@ const UIStrings = {
   */
   droppedFrame: 'Dropped Frame',
   /**
+  *@description Text in Timeline Frame Chart Data Provider of the Performance panel
+  */
+  partiallyPresentedFrame: 'Partially Presented Frame',
+  /**
   *@description Text for a rendering frame
   */
   frame: 'Frame',
@@ -164,6 +168,8 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements
     PerfUI.FlameChart.FlameChartDataProvider {
   private readonly font: string;
+  private droppedFramePatternCanvas: HTMLCanvasElement;
+  private partialFramePatternCanvas: HTMLCanvasElement;
   private timelineDataInternal: PerfUI.FlameChart.TimelineData|null;
   private currentLevel: number;
   private performanceModel: PerformanceModel|null;
@@ -206,6 +212,9 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     super();
     this.reset();
     this.font = '11px ' + Host.Platform.fontFamily();
+    this.droppedFramePatternCanvas = document.createElement('canvas');
+    this.partialFramePatternCanvas = document.createElement('canvas');
+    this.preparePatternCanvas();
     this.timelineDataInternal = null;
     this.currentLevel = 0;
     this.performanceModel = null;
@@ -1002,7 +1011,11 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
       if (frame.idle) {
         title = i18nString(UIStrings.idleFrame);
       } else if (frame.dropped) {
-        title = i18nString(UIStrings.droppedFrame);
+        if (frame.isPartial) {
+          title = i18nString(UIStrings.partiallyPresentedFrame);
+        } else {
+          title = i18nString(UIStrings.droppedFrame);
+        }
         nameSpanTimelineInfoTime = 'timeline-info-warning';
       } else {
         title = i18nString(UIStrings.frame);
@@ -1093,6 +1106,42 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     return key ? `hsl(${Platform.StringUtilities.hashCode(key) % 300 + 30}, 40%, 70%)` : '#ccc';
   }
 
+  private preparePatternCanvas(): void {
+    // Set the candy stripe pattern to 17px so it repeats well.
+    const size = 17;
+    this.droppedFramePatternCanvas.width = size;
+    this.droppedFramePatternCanvas.height = size;
+
+    this.partialFramePatternCanvas.width = size;
+    this.partialFramePatternCanvas.height = size;
+
+    const ctx = this.droppedFramePatternCanvas.getContext('2d');
+    if (ctx) {
+      // Make a dense solid-line pattern.
+      ctx.translate(size * 0.5, size * 0.5);
+      ctx.rotate(Math.PI * 0.25);
+      ctx.translate(-size * 0.5, -size * 0.5);
+
+      ctx.fillStyle = 'rgb(255, 255, 255)';
+      for (let x = -size; x < size * 2; x += 3) {
+        ctx.fillRect(x, -size, 1, size * 3);
+      }
+    }
+
+    const ctx2 = this.partialFramePatternCanvas.getContext('2d');
+    if (ctx2) {
+      // Make a sparse dashed-line pattern.
+      ctx2.strokeStyle = 'rgb(255, 255, 255)';
+      ctx2.lineWidth = 2;
+      ctx2.beginPath();
+      ctx2.moveTo(17, 0);
+      ctx2.lineTo(10, 7);
+      ctx2.moveTo(8, 9);
+      ctx2.lineTo(2, 15);
+      ctx2.stroke();
+    }
+  }
+
   private drawFrame(
       entryIndex: number, context: CanvasRenderingContext2D, text: string|null, barX: number, barY: number,
       barWidth: number, barHeight: number): void {
@@ -1100,8 +1149,31 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     const frame = (this.entryData[entryIndex] as TimelineModel.TimelineFrameModel.TimelineFrame);
     barX += hPadding;
     barWidth -= 2 * hPadding;
-    context.fillStyle =
-        frame.idle ? 'white' : frame.dropped ? '#f0b7b1' : (frame.hasWarnings() ? '#fad1d1' : '#d7f0d1');
+    if (frame.idle) {
+      context.fillStyle = 'white';
+    } else if (frame.dropped) {
+      if (frame.isPartial) {
+        // For partially presented frame boxes, paint a yellow background with
+        // a sparse white dashed-line pattern overlay.
+        context.fillStyle = '#f0e442';
+        context.fillRect(barX, barY, barWidth, barHeight);
+
+        const overlay = context.createPattern(this.partialFramePatternCanvas, 'repeat');
+        context.fillStyle = overlay || context.fillStyle;
+      } else {
+        // For dropped frame boxes, paint a red background with a dense white
+        // solid-line pattern overlay.
+        context.fillStyle = '#f08080';
+        context.fillRect(barX, barY, barWidth, barHeight);
+
+        const overlay = context.createPattern(this.droppedFramePatternCanvas, 'repeat');
+        context.fillStyle = overlay || context.fillStyle;
+      }
+    } else if (frame.hasWarnings()) {
+      context.fillStyle = '#fad1d1';
+    } else {
+      context.fillStyle = '#d7f0d1';
+    }
     context.fillRect(barX, barY, barWidth, barHeight);
 
     const frameDurationText = i18n.TimeUtilities.preciseMillisToString(frame.duration, 1);

package/front_end/panels/webauthn/webauthnPane.css

@@ -120,18 +120,6 @@
   padding: 5px 10px 0 0;
 }
 
-.text-button {
-  float: right;
-  white-space: nowrap;
-  overflow: hidden;
-  min-width: 28px;
-  background: transparent;
-  border: none;
-  color: var(--color-link);
-  text-decoration: underline;
-  cursor: pointer;
-}
-
 td .text-button {
   min-width: 20px;
   margin: auto;