[AI Settings] Add explainer banner if toggles are disabled

Screenshot: https://i.imgur.com/x1XHHXW.png

Fixed: 372182770
Change-Id: I86d8d9a8a472ec89c9f011250da691907fccff69
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5976623
Commit-Queue: Wolfgang Beyer <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>
Auto-Submit: Wolfgang Beyer <[email protected]>
Reviewed-by: Alex Rudenko <[email protected]>

Author: wolfib

front_end/panels/settings/AISettingsTab.test.ts

@@ -40,6 +40,7 @@ describeWithEnvironment('AISettingsTab', () => {
     details: Element[],
     dropdownButtons: HTMLElement[],
     toggleContainers: HTMLElement[],
+    view: Settings.AISettingsTab.AISettingsTab,
   }> {
     Common.Settings.moduleSetting('console-insights-enabled').set(false);
     Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
@@ -58,7 +59,7 @@ describeWithEnvironment('AISettingsTab', () => {
     const toggleContainers =
         Array.from(view.shadowRoot.querySelectorAll('.toggle-container')) as Switch.Switch.Switch[];
     assert.strictEqual(toggleContainers.length, 2);
-    return {switches, details, dropdownButtons, toggleContainers};
+    return {switches, details, dropdownButtons, toggleContainers, view};
   }
 
   it('renders', async () => {
@@ -146,7 +147,8 @@ describeWithEnvironment('AISettingsTab', () => {
       },
     });
 
-    const {switches, toggleContainers} = await renderAISettings();
+    const {switches, toggleContainers, view} = await renderAISettings();
+    assert.strictEqual(view.shadowRoot?.querySelector('.disabled-explainer')?.textContent?.trim(), underAgeExplainer);
     assert.isTrue(switches[0].disabled);
     assert.strictEqual(toggleContainers[0].title, underAgeExplainer);
     assert.isTrue(switches[1].disabled);
@@ -161,7 +163,9 @@ describeWithEnvironment('AISettingsTab', () => {
     const aidaAccessStub = sinon.stub(Host.AidaClient.AidaClient, 'checkAccessPreconditions');
     aidaAccessStub.returns(Promise.resolve(Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL));
 
-    const {switches, toggleContainers} = await renderAISettings();
+    const {switches, toggleContainers, view} = await renderAISettings();
+    assert.strictEqual(
+        view.shadowRoot?.querySelector('.disabled-explainer')?.textContent?.trim(), notLoggedInExplainer);
     assert.isTrue(switches[0].disabled);
     assert.strictEqual(toggleContainers[0].title, notLoggedInExplainer);
     assert.isTrue(switches[1].disabled);
@@ -171,6 +175,7 @@ describeWithEnvironment('AISettingsTab', () => {
     Host.AidaClient.HostConfigTracker.instance().dispatchEventToListeners(
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED);
     await drainMicroTasks();
+    assert.isNull(view.shadowRoot?.querySelector('.disabled-explainer'));
     assert.isFalse(switches[0].disabled);
     assert.isFalse(switches[1].disabled);
     aidaAccessStub.restore();
@@ -182,25 +187,26 @@ describeWithEnvironment('AISettingsTab', () => {
       settingType: Common.Settings.SettingType.BOOLEAN,
       defaultValue: false,
       disabledCondition: () => {
-        return {disabled: true, reason: 'reason 1'};
+        return {disabled: true, reason: 'some reason'};
       },
     });
     Common.Settings.moduleSetting('ai-assistance-enabled').setRegistration({
       settingName: 'ai-assistance-enabled',
       settingType: Common.Settings.SettingType.BOOLEAN,
       defaultValue: true,
       disabledCondition: () => {
-        return {disabled: true, reason: 'reason 2'};
+        return {disabled: true, reason: 'some reason'};
       },
     });
     const stub = sinon.stub(Host.AidaClient.AidaClient, 'checkAccessPreconditions');
     stub.returns(Promise.resolve(Host.AidaClient.AidaAccessPreconditions.AVAILABLE));
 
-    const {switches, toggleContainers} = await renderAISettings();
+    const {switches, toggleContainers, view} = await renderAISettings();
+    assert.strictEqual(view.shadowRoot?.querySelector('.disabled-explainer')?.textContent?.trim(), 'some reason');
     assert.isTrue(switches[0].disabled);
-    assert.strictEqual(toggleContainers[0].title, 'reason 1');
+    assert.strictEqual(toggleContainers[0].title, 'some reason');
     assert.isTrue(switches[1].disabled);
-    assert.strictEqual(toggleContainers[1].title, 'reason 2');
+    assert.strictEqual(toggleContainers[1].title, 'some reason');
     stub.restore();
   });
 });

front_end/panels/settings/AISettingsTab.ts

@@ -361,7 +361,7 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     // clang-format on
   }
 
-  #getDisabledReason(setting: Common.Settings.Setting<boolean>|undefined): string|undefined {
+  #getDisabledReason(): string|undefined {
     switch (this.#aidaAvailability) {
       case Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL:
       case Host.AidaClient.AidaAccessPreconditions.SYNC_IS_PAUSED:
@@ -374,16 +374,16 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     if (config?.aidaAvailability?.blockedByAge === true) {
       return i18nString(UIStrings.ageRestricted);
     }
-    return setting?.disabledReason();
+    // `consoleInsightsSetting` and `aiAssistantSetting` are both disabled for the same reason.
+    return this.#consoleInsightsSetting?.disabledReason();
   }
 
-  #renderConsoleInsightsSetting(): LitHtml.TemplateResult {
+  #renderConsoleInsightsSetting(disabledReason?: string): LitHtml.TemplateResult {
     const detailsClasses = {
       'whole-row': true,
       open: this.#isConsoleInsightsSettingExpanded,
     };
     const tabindex = this.#isConsoleInsightsSettingExpanded ? '0' : '-1';
-    const disabledReason = this.#getDisabledReason(this.#consoleInsightsSetting);
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
@@ -446,13 +446,12 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     // clang-format on
   }
 
-  #renderAiAssistanceSetting(): LitHtml.TemplateResult {
+  #renderAiAssistanceSetting(disabledReason?: string): LitHtml.TemplateResult {
     const detailsClasses = {
       'whole-row': true,
       open: this.#isAiAssistanceSettingExpanded,
     };
     const tabindex = this.#isAiAssistanceSettingExpanded ? '0' : '-1';
-    const disabledReason = this.#getDisabledReason(this.#aiAssistanceSetting);
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
@@ -515,7 +514,27 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     // clang-format on
   }
 
+  #renderDisabledExplainer(disabledReason: string): LitHtml.LitTemplate {
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    return html`
+      <div class="disabled-explainer">
+        <devtools-icon .data=${{
+          iconName: 'warning',
+          color: 'var(--sys-color-orange)',
+          width: 'var(--sys-size-8)',
+          height: 'var(--sys-size-8)',
+        } as IconButton.Icon.IconData}>
+        </devtools-icon>
+        ${disabledReason}
+      </div>
+    `;
+    // clang-format on
+  }
+
   override async render(): Promise<void> {
+    const disabledReason = this.#getDisabledReason();
+
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     LitHtml.render(html`
@@ -525,9 +544,10 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
       <div class="settings-container-wrapper" jslog=${VisualLogging.pane('chrome-ai')}>
         ${this.#renderSharedDisclaimer()}
         ${this.#consoleInsightsSetting || this.#aiAssistanceSetting ? html`
+          ${Boolean(disabledReason) ? this.#renderDisabledExplainer(disabledReason as string) : LitHtml.nothing}
           <div class="settings-container">
-            ${this.#consoleInsightsSetting ? this.#renderConsoleInsightsSetting() : LitHtml.nothing}
-            ${this.#aiAssistanceSetting ? this.#renderAiAssistanceSetting() : LitHtml.nothing}
+            ${this.#consoleInsightsSetting ? this.#renderConsoleInsightsSetting(disabledReason) : LitHtml.nothing}
+            ${this.#aiAssistanceSetting ? this.#renderAiAssistanceSetting(disabledReason) : LitHtml.nothing}
           </div>
         ` : LitHtml.nothing}
       </div>

front_end/panels/settings/aiSettingsTab.css

@@ -175,3 +175,16 @@ header {
   font-size: var(--sys-typescale-headline3-size);
   font-weight: var(--ref-typeface-weight-regular);
 }
+
+.disabled-explainer {
+  display: flex;
+  gap: var(--sys-size-6);
+  background-color: var(--sys-color-surface-yellow);
+  border-radius: var(--sys-shape-corner-medium-small);
+  margin-top: var(--sys-size-11);
+  padding: var(--sys-size-8) var(--sys-size-11);
+  width: 100%;
+  max-width: var(--sys-size-35);
+  min-width: var(--sys-size-28);
+  color: var(--sys-color-yellow);
+}