chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/panels/elements/components/ElementsBreadcrumbs.ts

@@ -2,18 +2,21 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/components/node_text/node_text.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
-import * as NodeText from '../../../ui/components/node_text/node_text.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import elementsBreadcrumbsStyles from './elementsBreadcrumbs.css.js';
 import {crumbsToRender, type UserScrollPosition} from './ElementsBreadcrumbsUtils.js';
-import {type DOMNode} from './Helper.js';
+import type {DOMNode} from './Helper.js';
+
+const {html} = LitHtml;
 
 const UIStrings = {
   /**
@@ -50,7 +53,6 @@ export interface ElementsBreadcrumbsData {
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 export class ElementsBreadcrumbs extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-elements-breadcrumbs`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #resizeObserver = new ResizeObserver(() => this.#checkForOverflowOnResize());
   readonly #renderBound = this.#render.bind(this);
@@ -272,23 +274,23 @@ export class ElementsBreadcrumbs extends HTMLElement {
 
     const tooltipString = direction === 'left' ? i18nString(UIStrings.scrollLeft) : i18nString(UIStrings.scrollRight);
     // clang-format off
-    return LitHtml.html`
+    return html`
       <button
         class=${buttonStyles}
         @click=${this.#onOverflowClick(direction)}
         ?disabled=${disabled}
         aria-label=${tooltipString}
         title=${tooltipString}>
-        <${IconButton.Icon.Icon.litTagName} .data=${{
+        <devtools-icon .data=${{
           iconName: 'triangle-' + direction,
           color: 'var(--sys-color-on-surface)',
           width: '12px',
           height: '10px',
-        } as IconButton.Icon.IconData}>
-        </${IconButton.Icon.Icon.litTagName}>
+        }}>
+        </devtools-icon>
       </button>
       `;
-    // clang-format on
+          // clang-format on
   }
 
   #render(): void {
@@ -296,7 +298,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <nav class="crumbs" aria-label=${i18nString(UIStrings.breadcrumbs)} jslog=${VisualLogging.elementsBreadcrumbs()}>
         ${this.#renderOverflowButton('left', this.#userScrollPosition === 'start')}
 
@@ -308,7 +310,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
                 selected: crumb.selected,
               };
               // eslint-disable-next-line rulesdir/ban_a_tags_in_lit_html
-              return LitHtml.html`
+              return html`
                 <li class=${LitHtml.Directives.classMap(crumbClasses)}
                   data-node-id=${crumb.node.id}
                   data-crumb="true"
@@ -322,11 +324,11 @@ export class ElementsBreadcrumbs extends HTMLElement {
                     @mouseleave=${this.#onCrumbMouseLeave(crumb.node)}
                     @focus=${this.#onCrumbFocus(crumb.node)}
                     @blur=${this.#onCrumbBlur(crumb.node)}
-                  ><${NodeText.NodeText.NodeText.litTagName} data-node-title=${crumb.title.main} .data=${{
+                  ><devtools-node-text data-node-title=${crumb.title.main} .data=${{
                     nodeTitle: crumb.title.main,
                     nodeId: crumb.title.extras.id,
                     nodeClasses: crumb.title.extras.classes,
-                  } as NodeText.NodeText.NodeTextData}></${NodeText.NodeText.NodeText.litTagName}></a>
+                  }}></devtools-node-text></a>
                 </li>`;
             })}
           </ul>

package/front_end/panels/elements/components/ElementsBreadcrumbsUtils.ts

@@ -4,7 +4,7 @@
 
 import * as i18n from '../../../core/i18n/i18n.js';
 
-import {type DOMNode} from './Helper.js';
+import type {DOMNode} from './Helper.js';
 
 const UIStrings = {
   /**

package/front_end/panels/elements/components/ElementsTreeExpandButton.ts

@@ -2,13 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/icon_button/icon_button.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import elementsTreeExpandButtonStyles from './elementsTreeExpandButton.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Aria label for a button expanding collapsed subtree
@@ -22,7 +25,6 @@ export interface ElementsTreeExpandButtonData {
   clickHandler: (event?: Event) => void;
 }
 export class ElementsTreeExpandButton extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-elements-tree-expand-button`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #clickHandler: ((event?: Event) => void) = () => {};
@@ -44,12 +46,12 @@ export class ElementsTreeExpandButton extends HTMLElement {
     // clang-format off
     // This button's innerText will be tested by e2e test and blink layout tests.
     // It can't have any other characters like '\n' or space, otherwise it will break tests.
-    LitHtml.render(LitHtml.html`<button
+    LitHtml.render(html`<button
         class="expand-button"
         tabindex="-1"
         aria-label=${i18nString(UIStrings.expand)}
         jslog=${VisualLogging.action('expand').track({click: true})}
-        @click=${this.#clickHandler}><${IconButton.Icon.Icon.litTagName} name="dots-horizontal"></${IconButton.Icon.Icon.litTagName}></button>`,
+        @click=${this.#clickHandler}><devtools-icon name="dots-horizontal"></devtools-icon></button>`,
       this.#shadow, {host: this});
     // clang-format on
   }

package/front_end/panels/elements/components/LayoutPane.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/node_text/node_text.js';
+
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
@@ -9,7 +11,6 @@ import * as SDK from '../../../core/sdk/sdk.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Input from '../../../ui/components/input/input.js';
 import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import * as NodeText from '../../../ui/components/node_text/node_text.js';
 import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 // eslint-disable-next-line rulesdir/es_modules_import
 import inspectorCommonStyles from '../../../ui/legacy/inspectorCommon.css.js';
@@ -18,7 +19,7 @@ import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import layoutPaneStyles from './layoutPane.css.js';
-import {type BooleanSetting, type EnumSetting, type LayoutElement, type Setting} from './LayoutPaneUtils.js';
+import type {BooleanSetting, EnumSetting, LayoutElement, Setting} from './LayoutPaneUtils.js';
 
 const UIStrings = {
   /**
@@ -167,7 +168,6 @@ const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 let layoutPaneWrapperInstance: LegacyWrapper.LegacyWrapper.LegacyWrapper<UI.Widget.Widget, LayoutPane>;
 
 export class LayoutPane extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  static readonly litTagName = LitHtml.literal`devtools-layout-pane`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #settings: Readonly<Setting[]> = [];
   readonly #uaShadowDOMSetting: Common.Settings.Setting<boolean>;
@@ -462,26 +462,26 @@ export class LayoutPane extends LegacyWrapper.LegacyWrapper.WrappableComponent {
       <label data-element="true" class="checkbox-label">
         <input data-input="true" type="checkbox" .checked=${element.enabled} @change=${onElementToggle} jslog=${VisualLogging.toggle().track({click:true})} />
         <span class="node-text-container" data-label="true" @mouseenter=${onMouseEnter} @mouseleave=${onMouseLeave}>
-          <${NodeText.NodeText.NodeText.litTagName} .data=${{
+          <devtools-node-text .data=${{
             nodeId: element.domId,
             nodeTitle: element.name,
             nodeClasses: element.domClasses,
-          } as NodeText.NodeText.NodeTextData}></${NodeText.NodeText.NodeText.litTagName}>
+          }}></devtools-node-text>
         </span>
       </label>
       <label @keyup=${onColorLabelKeyUp} @keydown=${onColorLabelKeyDown} class="color-picker-label" style="background: ${element.color};" jslog=${VisualLogging.showStyleEditor('color').track({click: true})}>
         <input @change=${onColorChange} @input=${onColorChange} title=${i18nString(UIStrings.chooseElementOverlayColor)} tabindex="0" class="color-picker" type="color" value=${element.color} />
       </label>
-      <${Buttons.Button.Button.litTagName} class="show-element"
+      <devtools-button class="show-element"
                                            .title=${i18nString(UIStrings.showElementInTheElementsPanel)}
                                            aria-label=${i18nString(UIStrings.showElementInTheElementsPanel)}
                                            .iconName=${'select-element'}
                                            .jslogContext=${'elements.select-element'}
                                            .size=${Buttons.Button.Size.SMALL}
                                            .variant=${Buttons.Button.Variant.ICON}
-                                           @click=${onElementClick}></${Buttons.Button.Button.litTagName}>
+                                           @click=${onElementClick}></devtools-button>
     </div>`;
-    // clang-format on
+            // clang-format on
   }
 
   #renderBooleanSetting(setting: BooleanSetting): LitHtml.TemplateResult {

package/front_end/panels/elements/components/QueryContainer.test.ts

@@ -4,7 +4,7 @@
 
 import * as SDK from '../../../core/sdk/sdk.js';
 import {assertNodeTextContent, renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
-import * as NodeText from '../../../ui/components/node_text/node_text.js';
+import type * as NodeText from '../../../ui/components/node_text/node_text.js';
 
 import * as ElementsComponents from './components.js';
 
@@ -29,8 +29,7 @@ const containerTemplate: ElementsComponents.Helper.DOMNode = {
 };
 
 const assertContainerContent = (container: HTMLElement, expectedContent: string) => {
-  const nodeText =
-      container.shadowRoot!.querySelector<NodeText.NodeText.NodeText>(`${NodeText.NodeText.NodeText.litTagName.value}`);
+  const nodeText = container.shadowRoot!.querySelector<NodeText.NodeText.NodeText>('devtools-node-text');
   if (!nodeText || !nodeText.shadowRoot) {
     assert.fail('node text element and its shadowRoot should exist');
     return;

package/front_end/panels/elements/components/QueryContainer.ts

@@ -2,13 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/components/node_text/node_text.js';
+
 import * as SDK from '../../../core/sdk/sdk.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
-import * as NodeText from '../../../ui/components/node_text/node_text.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
-import {type DOMNode} from './Helper.js';
+import type {DOMNode} from './Helper.js';
 import queryContainerStyles from './queryContainer.css.js';
 
 const {render, html} = LitHtml;
@@ -28,8 +29,6 @@ export interface QueryContainerData {
 }
 
 export class QueryContainer extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-query-container`;
-
   readonly #shadow = this.attachShadow({mode: 'open'});
   #queryName?: string;
   #container?: DOMNode;
@@ -90,13 +89,13 @@ export class QueryContainer extends HTMLElement {
         @click=${this.#onContainerLinkClick}
         @mouseenter=${this.#onContainerLinkMouseEnter}
         @mouseleave=${this.#onContainerLinkMouseLeave}
-      ><${NodeText.NodeText.NodeText.litTagName}
+      ><devtools-node-text
           data-node-title=${nodeTitle}
           .data=${{
         nodeTitle,
         nodeId: idToDisplay,
         nodeClasses: classesToDisplay,
-      } as NodeText.NodeText.NodeTextData}></${NodeText.NodeText.NodeText.litTagName}></a>
+      }}></devtools-node-text></a>
       ${this.#isContainerLinkHovered ? this.#renderQueriedSizeDetails() : LitHtml.nothing}
     `, this.#shadow, {
       host: this,
@@ -121,18 +120,18 @@ export class QueryContainer extends HTMLElement {
     // clang-format off
     return html`
       <span class="queried-size-details">
-        (${this.#queriedSizeDetails.queryAxis}<${IconButton.Icon.Icon.litTagName}
+        (${this.#queriedSizeDetails.queryAxis}<devtools-icon
           class=${axisIconClasses} .data=${{
             iconName: 'width',
             color: 'var(--icon-default)',
-          } as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}>)
+          }}></devtools-icon>)
         ${areBothAxesQueried && this.#queriedSizeDetails.width ? 'width:' : LitHtml.nothing}
         ${this.#queriedSizeDetails.width || LitHtml.nothing}
         ${areBothAxesQueried && this.#queriedSizeDetails.height ? 'height:' : LitHtml.nothing}
         ${this.#queriedSizeDetails.height || LitHtml.nothing}
       </span>
     `;
-    // clang-format on
+            // clang-format on
   }
 }
 

package/front_end/panels/elements/components/StylePropertyEditor.ts

@@ -2,8 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/icon_button/icon_button.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -66,7 +67,6 @@ export class PropertyDeselectedEvent extends Event {
   }
 }
 
-// eslint-disable-next-line rulesdir/check_component_naming
 export class StylePropertyEditor extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #authoredProperties: Map<string, string> = new Map();
@@ -140,8 +140,8 @@ export class StylePropertyEditor extends HTMLElement {
               class=${classes}
               jslog=${VisualLogging.item().track({click: true}).context(`${propertyName}-${propertyValue}`)}
               @click=${() => this.#onButtonClick(propertyName, propertyValue, selected)}>
-        <${IconButton.Icon.Icon.litTagName} style=${transform} name=${iconInfo.iconName}>
-        </${IconButton.Icon.Icon.litTagName}>
+        <devtools-icon style=${transform} name=${iconInfo.iconName}>
+        </devtools-icon>
       </button>
     `;
   }

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

@@ -29,7 +29,8 @@
 }
 
 .computed-style-property.inherited {
-  opacity: 50%;
+  opacity: 75%;
+  font-style: italic;
 }
 
 .property-name,

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

@@ -35,6 +35,7 @@
   justify-content: space-between;
 }
 
-.dont-show input {
-  vertical-align: bottom;
+.dont-show {
+  display: inline-flex;
+  align-items: center;
 }

package/front_end/panels/elements/elementsTreeOutline.css

@@ -83,6 +83,23 @@
   margin-left: -12px;
 }
 
+.elements-disclosure li .ai-button-container {
+  display: none;
+  margin-left: 1ch;
+  overflow: visible;
+  max-height: var(--sys-size-6);
+  vertical-align: top;
+  margin-top: -1px;
+  position: absolute;
+  right: var(--sys-size-3);
+  bottom: 5px;
+  z-index: 999;
+}
+
+.elements-disclosure .elements-tree-outline:not(.hide-selection-when-blurred) li.hovered .ai-button-container {
+  display: inline-flex;
+}
+
 .elements-disclosure li .selected-hint::before {
   font-style: italic;
   content: " == $0";

package/front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -275,3 +275,16 @@ devtools-css-angle,
 devtools-css-length {
   display: inline-block;
 }
+
+devtools-icon.open-in-animations-panel {
+  position: relative;
+  transform: scale(0.7);
+  margin: -5px -2px -3px -4px;
+  user-select: none;
+  color: var(--icon-default);
+  cursor: default;
+
+  &:hover {
+    color: var(--icon-default-hover);
+  }
+}

package/front_end/panels/elements/stylesSidebarPane.css

@@ -54,7 +54,7 @@
   .try-rule-selector-element,
   .ancestor-rule-list,
   .ancestor-closing-braces {
-    color: var(--sys-color-token-meta);
+    color: var(--app-color-element-sidebar-subtitle);
   }
 
   .ancestor-rule-list,
@@ -191,7 +191,7 @@
   background-color: var(--sys-color-surface2);
   padding: 0 5px;
   border-bottom: 1px solid var(--sys-color-divider);
-  color: var(--sys-color-token-subtle);
+  color: var(--sys-color-on-surface-subtle);
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;

package/front_end/panels/emulation/DeviceModeWrapper.ts

@@ -10,7 +10,7 @@ import * as EmulationModel from '../../models/emulation/emulation.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {DeviceModeView} from './DeviceModeView.js';
-import {type InspectedPagePlaceholder} from './InspectedPagePlaceholder.js';
+import type {InspectedPagePlaceholder} from './InspectedPagePlaceholder.js';
 
 let deviceModeWrapperInstance: DeviceModeWrapper;
 

package/front_end/panels/emulation/components/DeviceSizeInputElement.ts

@@ -8,6 +8,8 @@ import * as UILegacy from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
+const {html} = LitHtml;
+
 class SizeChangedEvent extends Event {
   static readonly eventName = 'sizechanged';
   constructor(public size: number) {
@@ -27,8 +29,6 @@ export class SizeInputElement extends HTMLElement {
   #title: Platform.UIString.LocalizedString;
   #jslogContext: string;
 
-  static readonly litTagName = LitHtml.literal`device-mode-emulation-size-input`;
-
   constructor(title: Platform.UIString.LocalizedString, {jslogContext}: {jslogContext: string}) {
     super();
     this.#title = title;
@@ -62,7 +62,7 @@ export class SizeInputElement extends HTMLElement {
         // to use proper constructed stylesheets, when the code runs
         // in the correct frame context.
         // eslint-disable-next-line rulesdir/ban_style_tags_in_lit_html
-        LitHtml.html`
+        html`
       <style>
         input {
           /*

package/front_end/panels/event_listeners/EventListenersView.ts

@@ -37,7 +37,7 @@ const UIStrings = {
   /**
    *@description A context menu item to reveal a node in the DOM tree of the Elements Panel
    */
-  revealInElementsPanel: 'Reveal in Elements panel',
+  openInElementsPanel: 'Open in Elements panel',
   /**
    *@description Text in Event Listeners Widget of the Elements panel
    */
@@ -340,7 +340,7 @@ export class ObjectEventListenerBar extends UI.TreeOutline.TreeElement {
       }
       if (object.subtype === 'node') {
         menu.defaultSection().appendItem(
-            i18nString(UIStrings.revealInElementsPanel), () => Common.Revealer.reveal(object),
+            i18nString(UIStrings.openInElementsPanel), () => Common.Revealer.reveal(object),
             {jslogContext: 'reveal-in-elements'});
       }
       menu.defaultSection().appendItem(

package/front_end/panels/event_listeners/eventListenersView.css

@@ -8,7 +8,7 @@
   padding: 0 0 0 5px;
   overflow: hidden;
   display: flex;
-  min-height: 18px;
+  min-height: var(--sys-size-9);
   align-items: center;
 }
 
@@ -33,11 +33,12 @@
 
 .event-listener-details {
   display: flex;
-  min-height: 18px;
+  min-height: var(--sys-size-9);
   align-items: center;
+  gap: var(--sys-size-2);
 
   devtools-button {
-    height: 18px;
+    height: var(--sys-size-8);
   }
 }
 

package/front_end/panels/explain/components/ConsoleInsight.test.ts

@@ -13,7 +13,10 @@ import {describeWithEnvironment, getGetHostConfigStub} from '../../../testing/En
 import * as Explain from '../explain.js';
 
 describeWithEnvironment('ConsoleInsight', () => {
+  let component: Explain.ConsoleInsight|undefined;
+
   afterEach(() => {
+    component?.remove();
     Common.Settings.settingForTest('console-insights-enabled').set(true);
     Common.Settings.settingForTest('console-insights-onboarding-finished').set(true);
   });
@@ -52,9 +55,9 @@ describeWithEnvironment('ConsoleInsight', () => {
     await new Promise(resolve => setTimeout(resolve, 0));
   }
 
-  it('shows opt-in teaser when setting is disabled', async () => {
+  it('shows opt-in teaser when setting is turned off', async () => {
     Common.Settings.settingForTest('console-insights-enabled').set(false);
-    const component = new Explain.ConsoleInsight(
+    component = new Explain.ConsoleInsight(
         getTestPromptBuilder(), getTestAidaClient(), Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
     renderElementIntoDOM(component);
     await drainMicroTasks();
@@ -67,6 +70,51 @@ describeWithEnvironment('ConsoleInsight', () => {
     );
   });
 
+  it('shows opt-in teaser when blocked by age', async () => {
+    const stub = getGetHostConfigStub({
+      aidaAvailability: {
+        blockedByAge: true,
+      },
+      devToolsConsoleInsights: {
+        enabled: true,
+      },
+    });
+    component = new Explain.ConsoleInsight(
+        getTestPromptBuilder(), getTestAidaClient(), Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
+    renderElementIntoDOM(component);
+    await drainMicroTasks();
+    assert.isNotNull(component.shadowRoot);
+    assert.deepEqual(
+        getCleanTextContentFromElements(component.shadowRoot, 'main'),
+        [
+          'Turn on Console insights in Settings to receive AI assistance for understanding and addressing console warnings and errors. Learn more',
+        ],
+    );
+    stub.restore();
+  });
+
+  it('generates an explanation when the user logs in', async () => {
+    component = new Explain.ConsoleInsight(
+        getTestPromptBuilder(), getTestAidaClient(), Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL);
+    renderElementIntoDOM(component);
+    await drainMicroTasks();
+    assert.isNotNull(component.shadowRoot);
+    assert.deepEqual(
+        getCleanTextContentFromElements(component.shadowRoot, 'main'),
+        [
+          'This feature is only available when you sign into Chrome with your Google account.',
+        ],
+    );
+
+    const stub = sinon.stub(Host.AidaClient.AidaClient, 'checkAccessPreconditions')
+                     .returns(Promise.resolve(Host.AidaClient.AidaAccessPreconditions.AVAILABLE));
+    Host.AidaClient.HostConfigTracker.instance().dispatchEventToListeners(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED);
+    await drainMicroTasks();
+    assert.deepEqual(getCleanTextContentFromElements(component.shadowRoot, 'h2'), ['Explanation']);
+    stub.restore();
+  });
+
   it('shows opt-in teaser when setting is disabled via disabledCondition', async () => {
     const setting = Common.Settings.settingForTest('console-insights-enabled');
     setting.setRegistration({
@@ -77,7 +125,7 @@ describeWithEnvironment('ConsoleInsight', () => {
         return {disabled: true, reason: 'disabled for test'};
       },
     });
-    const component = new Explain.ConsoleInsight(
+    component = new Explain.ConsoleInsight(
         getTestPromptBuilder(), getTestAidaClient(), Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
     renderElementIntoDOM(component);
     await drainMicroTasks();
@@ -98,7 +146,7 @@ describeWithEnvironment('ConsoleInsight', () => {
 
   it('shows reminder on first run of console insights', async () => {
     Common.Settings.settingForTest('console-insights-onboarding-finished').set(false);
-    const component = new Explain.ConsoleInsight(
+    component = new Explain.ConsoleInsight(
         getTestPromptBuilder(), getTestAidaClient(), Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
     renderElementIntoDOM(component);
     await drainMicroTasks();
@@ -118,7 +166,7 @@ describeWithEnvironment('ConsoleInsight', () => {
     const stub = getGetHostConfigStub({});
     const actionTaken = sinon.stub(Host.userMetrics, 'actionTaken');
     const aidaClient = getTestAidaClient();
-    const component = new Explain.ConsoleInsight(
+    component = new Explain.ConsoleInsight(
         getTestPromptBuilder(), aidaClient, Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
     renderElementIntoDOM(component);
     await drainMicroTasks();
@@ -158,7 +206,7 @@ describeWithEnvironment('ConsoleInsight', () => {
         enabled: true,
       },
     });
-    const component = new Explain.ConsoleInsight(
+    component = new Explain.ConsoleInsight(
         getTestPromptBuilder(), getTestAidaClient(), Host.AidaClient.AidaAccessPreconditions.AVAILABLE);
     renderElementIntoDOM(component);
     await drainMicroTasks();
@@ -171,7 +219,7 @@ describeWithEnvironment('ConsoleInsight', () => {
   });
 
   it('report if the user is not logged in', async () => {
-    const component = new Explain.ConsoleInsight(
+    component = new Explain.ConsoleInsight(
         getTestPromptBuilder(), getTestAidaClient(), Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL);
     renderElementIntoDOM(component);
     await drainMicroTasks();
@@ -180,7 +228,7 @@ describeWithEnvironment('ConsoleInsight', () => {
   });
 
   it('report if the navigator is offline', async () => {
-    const component = new Explain.ConsoleInsight(
+    component = new Explain.ConsoleInsight(
         getTestPromptBuilder(), getTestAidaClient(), Host.AidaClient.AidaAccessPreconditions.NO_INTERNET);
     renderElementIntoDOM(component);
     await drainMicroTasks();