[GM3Restyling] Use details element to show details in Infobar

This adds a details element and removes the "Show more" link that was
previously gating the details.

Drive-by: Remove 'highlight' option. We can already set the button type, and focus problem after clicking "Show more" doesn't exist anymore since we use the details element.
Screenshot: https://imgur.com/a/cG8CeFG
Bug: 325443174
Change-Id: I3d906fc2ec4a48725554666a01e0498bdbdaf145
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6336213
Commit-Queue: Kim-Anh Tran <[email protected]>
Reviewed-by: Kateryna Prokopenko <[email protected]>

Author: ktran

front_end/panels/sources/DebuggerPlugin.ts

@@ -430,15 +430,13 @@ export class DebuggerPlugin extends Plugin {
         [
           {
             text: i18nString(UIStrings.configure),
-            highlight: false,
             delegate:
                 UI.ViewManager.ViewManager.instance().showView.bind(UI.ViewManager.ViewManager.instance(), 'blackbox'),
             dismiss: false,
             jslogContext: 'configure',
           },
           {
             text: i18nString(UIStrings.removeFromIgnoreList),
-            highlight: false,
             delegate: unIgnoreList,
             buttonVariant: Buttons.Button.Variant.TONAL,
             dismiss: true,

front_end/panels/sources/SourcesNavigator.ts

@@ -260,7 +260,6 @@ export class FilesNavigatorView extends NavigatorView {
           i18nString(UIStrings.automaticWorkspaceFolderDetected, {PH1: automaticFileSystem.root}),
           [{
             text: i18nString(UIStrings.automaticWorkspaceFolderConnect),
-            highlight: true,
             delegate: () => this.#automaticFileSystemManager.connectAutomaticFileSystem(/* addIfMissing= */ true),
             dismiss: true,
             jslogContext: 'automatic-workspace-folders.connect',

front_end/ui/legacy/Infobar.test.ts

@@ -3,45 +3,39 @@
 // found in the LICENSE file.
 
 import {
-  dispatchClickEvent,
   renderElementIntoDOM,
 } from '../../testing/DOMHelpers.js';
 import {
-  deinitializeGlobalVars,
-  initializeGlobalVars,
+  describeWithEnvironment,
 } from '../../testing/EnvironmentHelpers.js';
-import * as Buttons from '../components/buttons/buttons.js';
 
 import * as UI from './legacy.js';
 
-describe('Infobar', () => {
-  before(async () => {
-    await initializeGlobalVars();
-  });
-
-  after(async () => {
-    await deinitializeGlobalVars();
-  });
-
+describeWithEnvironment('Infobar', () => {
   const checkDetailsMessage = (component: UI.Infobar.Infobar, messageText: string) => {
     renderElementIntoDOM(component.element);
 
     const infobar = component.element.shadowRoot!.querySelector('.infobar');
     assert.instanceOf(infobar, HTMLDivElement);
-    const learnMoreButton = infobar.querySelector('devtools-button');
-    assert.instanceOf(learnMoreButton, Buttons.Button.Button);
-    const detailsRow = infobar.querySelector('.infobar-details-rows');
-    assert.instanceOf(detailsRow, HTMLDivElement);
-
-    assert.isTrue(detailsRow.classList.contains('hidden'), 'Details row should initially be hidden');
-    assert.strictEqual(detailsRow.textContent, messageText);
-
-    dispatchClickEvent(learnMoreButton);
-    assert.isFalse(
-        detailsRow.classList.contains('hidden'),
-        'Details row should not be hidden after clicking on learn-more-button');
+    const details = infobar.querySelector('details');
+    assert.exists(details);
+    assert.isFalse(details.hasAttribute('open'));
+
+    const detailsRow = details.querySelector('.infobar-details-rows');
+    assert.strictEqual(detailsRow?.textContent, messageText);
+
+    const summary = details.querySelector('summary');
+    assert.exists(summary);
+    summary.click();
+    assert.isTrue(details.hasAttribute('open'));
   };
 
+  it('shows main message', () => {
+    const component = new UI.Infobar.Infobar(UI.Infobar.Type.WARNING, 'This is a warning');
+    assert.deepEqual(
+        component.element.shadowRoot?.querySelector('.infobar-main-row')?.textContent, 'This is a warning');
+  });
+
   it('shows details message containing a string', () => {
     const component = new UI.Infobar.Infobar(UI.Infobar.Type.WARNING, 'This is a warning');
     const messageText = 'This is a more detailed warning';

front_end/ui/legacy/Infobar.ts

@@ -19,10 +19,6 @@ const UIStrings = {
    *@description Text on a button to close the infobar and never show the infobar in the future
    */
   dontShowAgain: 'Don\'t show again',
-  /**
-   *@description Text that indicates that a short message can be expanded to a detailed message
-   */
-  showMore: 'Show more',
   /**
    *@description Text to close something
    */
@@ -35,21 +31,16 @@ export class Infobar {
   element: HTMLElement;
   private readonly shadowRoot: ShadowRoot;
   private readonly contentElement: HTMLDivElement;
-  private readonly mainRow: HTMLElement;
-  private readonly detailsRows: HTMLElement;
-  private hasDetails: boolean;
-  private detailsMessage: string|Element;
+  private detailsRows?: HTMLElement;
   private readonly infoContainer: HTMLElement;
   private readonly infoMessage: HTMLElement;
   private infoText: HTMLElement;
   private readonly actionContainer: HTMLElement;
   private readonly disableSetting: Common.Settings.Setting<boolean>|null;
-  private readonly closeContainer: HTMLElement;
-  private readonly toggleElement: Buttons.Button.Button;
   private readonly closeButton: DevToolsCloseButton;
   private closeCallback: (() => void)|null;
-  #firstFocusableElement: HTMLElement|null = null;
   private parentView?: Widget;
+  mainRow: HTMLElement;
 
   constructor(
       type: Type, text: string, actions?: InfobarAction[], disableSetting?: Common.Settings.Setting<boolean>,
@@ -63,19 +54,13 @@ export class Infobar {
     this.shadowRoot = createShadowRootWithCoreStyles(this.element, {cssFile: infobarStyles});
 
     this.contentElement = this.shadowRoot.createChild('div', 'infobar infobar-' + type);
+    const icon = IconButton.Icon.create(TYPE_TO_ICON[type], type + '-icon');
+    this.contentElement.createChild('div', 'icon-container').appendChild(icon);
 
     this.mainRow = this.contentElement.createChild('div', 'infobar-main-row');
-    this.detailsRows = this.contentElement.createChild('div', 'infobar-details-rows hidden');
-    this.hasDetails = false;
-    this.detailsMessage = '';
-
     this.infoContainer = this.mainRow.createChild('div', 'infobar-info-container');
-
     this.infoMessage = this.infoContainer.createChild('div', 'infobar-info-message');
 
-    const icon = IconButton.Icon.create(TYPE_TO_ICON[type], type + '-icon');
-    this.infoMessage.appendChild(icon);
-
     this.infoText = this.infoMessage.createChild('div', 'infobar-info-text');
     this.infoText.textContent = text;
     ARIAUtils.markAsAlert(this.infoText);
@@ -104,20 +89,11 @@ export class Infobar {
           jslogContext: action.jslogContext,
           variant: buttonVariant,
         });
-        if (action.highlight && !this.#firstFocusableElement) {
-          this.#firstFocusableElement = button;
-        }
         this.actionContainer.appendChild(button);
       }
     }
 
-    this.closeContainer = this.mainRow.createChild('div', 'infobar-close-container');
-    this.toggleElement = createTextButton(
-        i18nString(UIStrings.showMore), this.onToggleDetails.bind(this),
-        {className: 'hidden show-more', jslogContext: 'show-more', variant: Buttons.Button.Variant.TEXT});
-    this.toggleElement.setAttribute('role', 'link');
-    this.closeContainer.appendChild(this.toggleElement);
-    this.closeButton = this.closeContainer.createChild('dt-close-button', 'close-button');
+    this.closeButton = this.contentElement.createChild('dt-close-button', 'icon-container');
     this.closeButton.setTabbable(true);
     this.closeButton.setSize(Buttons.Button.Size.SMALL);
     ARIAUtils.setDescription(this.closeButton, i18nString(UIStrings.close));
@@ -133,16 +109,6 @@ export class Infobar {
         event.consume();
         return;
       }
-
-      if (event.target !== this.contentElement) {
-        return;
-      }
-
-      if (event.key === 'Enter' && this.hasDetails) {
-        this.onToggleDetails();
-        event.consume();
-        return;
-      }
     });
 
     this.closeCallback = null;
@@ -208,23 +174,16 @@ export class Infobar {
     this.dispose();
   }
 
-  private onToggleDetails(): void {
-    this.detailsRows.classList.remove('hidden');
-    this.toggleElement.remove();
-    this.onResize();
-    ARIAUtils.alert(
-        typeof this.detailsMessage === 'string' ? this.detailsMessage : this.detailsMessage.textContent || '');
-    if (this.#firstFocusableElement) {
-      this.#firstFocusableElement.focus();
-    } else {
-      this.closeButton.focus();
-    }
-  }
-
   createDetailsRowMessage(message: Element|string): Element {
-    this.hasDetails = true;
-    this.detailsMessage = message;
-    this.toggleElement.classList.remove('hidden');
+    if (!this.detailsRows) {
+      const details = document.createElement('details');
+      const summary = details.createChild('summary');
+      const triangleIcon = IconButton.Icon.create('arrow-drop-down');
+      summary.createChild('div', 'icon-container').appendChild(triangleIcon);
+      this.contentElement.insertBefore(details, this.mainRow);
+      summary.appendChild(this.mainRow);
+      this.detailsRows = details.createChild('div', 'infobar-details-rows');
+    }
     const infobarDetailsRow = this.detailsRows.createChild('div', 'infobar-details-row');
     const detailsRowMessage = infobarDetailsRow.createChild('span', 'infobar-row-message');
     if (typeof message === 'string') {
@@ -237,7 +196,6 @@ export class Infobar {
 }
 export interface InfobarAction {
   text: string;
-  highlight: boolean;
   delegate: (() => void)|null;
   dismiss: boolean;
   buttonVariant?: Buttons.Button.Variant;

front_end/ui/legacy/InspectorView.ts

@@ -485,7 +485,6 @@ export class InspectorView extends VBox implements ViewLocationResolver {
           [
             {
               text: i18nString(UIStrings.reloadDebuggedTab),
-              highlight: true,
               delegate: () => {
                 reloadDebuggedTab();
                 this.removeDebuggedTabReloadRequiredWarning();
@@ -518,7 +517,6 @@ export class InspectorView extends VBox implements ViewLocationResolver {
           [
             {
               text: i18nString(UIStrings.reloadDevtools),
-              highlight: true,
               delegate: () => reloadDevTools(),
               dismiss: false,
               buttonVariant: Buttons.Button.Variant.PRIMARY,
@@ -542,7 +540,6 @@ export class InspectorView extends VBox implements ViewLocationResolver {
           [
             {
               text: i18nString(UIStrings.selectFolder),
-              highlight: true,
               delegate: () => callback(),
               dismiss: true,
               buttonVariant: Buttons.Button.Variant.TONAL,
@@ -608,7 +605,6 @@ function createLocaleInfobar(): Infobar {
       [
         {
           text: i18nString(UIStrings.setToBrowserLanguage),
-          highlight: true,
           delegate: () => {
             languageSetting.set('browserLanguage');
             getDisableLocaleInfoBarSetting().set(true);
@@ -619,7 +615,6 @@ function createLocaleInfobar(): Infobar {
         },
         {
           text: i18nString(UIStrings.setToSpecificLanguage, {PH1: closestSupportedLanguageInCurrentLocale}),
-          highlight: true,
           delegate: () => {
             languageSetting.set(closestSupportedLocale);
             getDisableLocaleInfoBarSetting().set(true);