[AI Settings] Show multiple disable-reasons

Screenshot: https://i.imgur.com/6BvvIdF.png

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

Author: wolfib

front_end/core/common/SettingRegistration.ts

@@ -330,5 +330,5 @@ interface RawSettingExtensionOption {
 export type SettingExtensionOption = LocalizedSettingExtensionOption|RawSettingExtensionOption;
 export type DisabledConditionResult = {
   disabled: true,
-  reason: string,
+  reasons: string[],
 }|{disabled: false};

front_end/core/common/Settings.ts

@@ -431,14 +431,14 @@ export class Setting<V> {
     return this.#disabled || false;
   }
 
-  disabledReason(): string|undefined {
+  disabledReasons(): string[] {
     if (this.#registration?.disabledCondition) {
       const result = this.#registration.disabledCondition(Settings.instance().getHostConfig());
       if (result.disabled) {
-        return result.reason;
+        return result.reasons;
       }
     }
-    return undefined;
+    return [];
   }
 
   setDisabled(disabled: boolean): void {

front_end/panels/ai_assistance/ai_assistance-meta.ts

@@ -37,17 +37,17 @@ const UIStrings = {
    * @description Message shown to the user if the DevTools locale is not
    * supported.
    */
-  wrongLocale: 'To use this feature, set your language preference to English in DevTools settings',
+  wrongLocale: 'To use this feature, set your language preference to English in DevTools settings.',
   /**
    * @description Message shown to the user if the user's region is not
    * supported.
    */
-  geoRestricted: 'This feature is unavailable in your region',
+  geoRestricted: 'This feature is unavailable in your region.',
   /**
    * @description Message shown to the user if the enterprise policy does
    * not allow this feature.
    */
-  policyRestricted: 'This setting is managed by your administrator',
+  policyRestricted: 'This setting is managed by your administrator.',
 };
 
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/ai_assistance-meta.ts', UIStrings);
@@ -123,14 +123,18 @@ Common.Settings.registerSettingExtension({
   reloadRequired: false,
   condition: isAnyFeatureAvailable,
   disabledCondition: config => {
+    const reasons = [];
     if (isGeoRestricted(config)) {
-      return {disabled: true, reason: i18nString(UIStrings.geoRestricted)};
+      reasons.push(i18nString(UIStrings.geoRestricted));
     }
     if (isPolicyRestricted(config)) {
-      return {disabled: true, reason: i18nString(UIStrings.policyRestricted)};
+      reasons.push(i18nString(UIStrings.policyRestricted));
     }
     if (isLocaleRestricted()) {
-      return {disabled: true, reason: i18nString(UIStrings.wrongLocale)};
+      reasons.push(i18nString(UIStrings.wrongLocale));
+    }
+    if (reasons.length > 0) {
+      return {disabled: true, reasons};
     }
     return {disabled: false};
   },

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

@@ -122,7 +122,7 @@ describeWithEnvironment('ConsoleInsight', () => {
       settingType: Common.Settings.SettingType.BOOLEAN,
       defaultValue: true,
       disabledCondition: () => {
-        return {disabled: true, reason: 'disabled for test'};
+        return {disabled: true, reasons: ['disabled for test']};
       },
     });
     component = new Explain.ConsoleInsight(

front_end/panels/explain/explain-meta.ts

@@ -30,17 +30,17 @@ const UIStrings = {
    * @description Message shown to the user if the DevTools locale is not
    * supported.
    */
-  wrongLocale: 'To use this feature, set your language preference to English in DevTools settings',
+  wrongLocale: 'To use this feature, set your language preference to English in DevTools settings.',
   /**
    * @description Message shown to the user if the user's region is not
    * supported.
    */
-  geoRestricted: 'This feature is unavailable in your region',
+  geoRestricted: 'This feature is unavailable in your region.',
   /**
    * @description Message shown to the user if the enterprise policy does
    * not allow this feature.
    */
-  policyRestricted: 'This setting is managed by your administrator',
+  policyRestricted: 'This setting is managed by your administrator.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/explain/explain-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -105,14 +105,18 @@ Common.Settings.registerSettingExtension({
   reloadRequired: false,
   condition: config => isFeatureEnabled(config),
   disabledCondition: config => {
+    const reasons = [];
     if (isGeoRestricted(config)) {
-      return {disabled: true, reason: i18nString(UIStrings.geoRestricted)};
+      reasons.push(i18nString(UIStrings.geoRestricted));
     }
     if (isPolicyRestricted(config)) {
-      return {disabled: true, reason: i18nString(UIStrings.policyRestricted)};
+      reasons.push(i18nString(UIStrings.policyRestricted));
     }
     if (isLocaleRestricted()) {
-      return {disabled: true, reason: i18nString(UIStrings.wrongLocale)};
+      reasons.push(i18nString(UIStrings.wrongLocale));
+    }
+    if (reasons.length > 0) {
+      return {disabled: true, reasons};
     }
     return {disabled: false};
   },

front_end/panels/settings/AISettingsTab.test.ts

@@ -168,7 +168,7 @@ describeWithEnvironment('AISettingsTab', () => {
   });
 
   it('disables switches if blocked by age', async () => {
-    const underAgeExplainer = 'This feature is only available to users who are 18 years of age or older';
+    const underAgeExplainer = 'This feature is only available to users who are 18 years of age or older.';
     const aidaAccessStub = sinon.stub(Host.AidaClient.AidaClient, 'checkAccessPreconditions');
     aidaAccessStub.returns(Promise.resolve(Host.AidaClient.AidaAccessPreconditions.AVAILABLE));
     const hostConfigStub = getGetHostConfigStub({
@@ -223,15 +223,15 @@ describeWithEnvironment('AISettingsTab', () => {
       settingType: Common.Settings.SettingType.BOOLEAN,
       defaultValue: false,
       disabledCondition: () => {
-        return {disabled: true, reason: 'some reason'};
+        return {disabled: true, reasons: ['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: 'some reason'};
+        return {disabled: true, reasons: ['some reason']};
       },
     });
     const stub = sinon.stub(Host.AidaClient.AidaClient, 'checkAccessPreconditions');

front_end/panels/settings/AISettingsTab.ts

@@ -154,7 +154,7 @@ const UIStrings = {
   /**
    * @description Message shown to the user if the age check is not successful.
    */
-  ageRestricted: 'This feature is only available to users who are 18 years of age or older',
+  ageRestricted: 'This feature is only available to users who are 18 years of age or older.',
   /**
    * @description The error message when the user is not logged in into Chrome.
    */
@@ -378,24 +378,33 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     // clang-format on
   }
 
-  #getDisabledReason(): string|undefined {
+  #getDisabledReasons(): string[] {
+    const reasons = [];
     switch (this.#aidaAvailability) {
       case Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL:
       case Host.AidaClient.AidaAccessPreconditions.SYNC_IS_PAUSED:
-        return i18nString(UIStrings.notLoggedIn);
-      case Host.AidaClient.AidaAccessPreconditions.NO_INTERNET:
-        return i18nString(UIStrings.offline);
+        reasons.push(i18nString(UIStrings.notLoggedIn));
+        break;
+      // @ts-expect-error
+      case Host.AidaClient.AidaAccessPreconditions.NO_INTERNET:  // fallthrough
+        reasons.push(i18nString(UIStrings.offline));
+      case Host.AidaClient.AidaAccessPreconditions.AVAILABLE: {
+        // No age check if there is no logged in user. Age check would always fail in that case.
+        const config = Common.Settings.Settings.instance().getHostConfig();
+        if (config?.aidaAvailability?.blockedByAge === true) {
+          reasons.push(i18nString(UIStrings.ageRestricted));
+        }
+      }
     }
-
-    const config = Common.Settings.Settings.instance().getHostConfig();
-    if (config?.aidaAvailability?.blockedByAge === true) {
-      return i18nString(UIStrings.ageRestricted);
-    }
-    // `consoleInsightsSetting` and `aiAssistantSetting` are both disabled for the same reason.
-    return this.#consoleInsightsSetting?.disabledReason();
+    // `consoleInsightsSetting` and `aiAssistantSetting` are both disabled for the same reasons.
+    const disabledReasons = this.#consoleInsightsSetting?.disabledReasons() || [];
+    reasons.push(...disabledReasons);
+    return reasons;
   }
 
-  #renderConsoleInsightsSetting(disabledReason?: string): LitHtml.TemplateResult {
+  #renderConsoleInsightsSetting(disabledReasons: string[]): LitHtml.TemplateResult {
+    const isDisabled = disabledReasons.length > 0;
+    const disabledReasonsJoined = disabledReasons.join('\n') || undefined;
     const detailsClasses = {
       'whole-row': true,
       open: this.#isConsoleInsightsSettingExpanded,
@@ -427,15 +436,15 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
       </div>
       <div class="divider"></div>
       <div class="toggle-container centered"
-        title=${ifDefined(disabledReason)}
+        title=${ifDefined(disabledReasonsJoined)}
         @click=${this.#toggleConsoleInsightsSetting.bind(this)}
       >
         <devtools-switch
-          .checked=${Boolean(this.#consoleInsightsSetting?.get()) && !Boolean(disabledReason)}
+          .checked=${Boolean(this.#consoleInsightsSetting?.get()) && !isDisabled}
           .jslogContext=${this.#consoleInsightsSetting?.name || ''}
-          .disabled=${Boolean(disabledReason)}
+          .disabled=${isDisabled}
           @switchchange=${this.#toggleConsoleInsightsSetting.bind(this)}
-          aria-label=${disabledReason || i18nString(UIStrings.enableConsoleInsights)}
+          aria-label=${disabledReasonsJoined || i18nString(UIStrings.enableConsoleInsights)}
         ></devtools-switch>
       </div>
       <div class=${classMap(detailsClasses)}>
@@ -463,7 +472,9 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     // clang-format on
   }
 
-  #renderAiAssistanceSetting(disabledReason?: string): LitHtml.TemplateResult {
+  #renderAiAssistanceSetting(disabledReasons: string[]): LitHtml.TemplateResult {
+    const isDisabled = disabledReasons.length > 0;
+    const disabledReasonsJoined = disabledReasons.join('\n') || undefined;
     const detailsClasses = {
       'whole-row': true,
       open: this.#isAiAssistanceSettingExpanded,
@@ -495,15 +506,15 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
       </div>
       <div class="divider"></div>
       <div class="toggle-container centered"
-        title=${ifDefined(disabledReason)}
+        title=${ifDefined(disabledReasonsJoined)}
         @click=${this.#toggleAiAssistanceSetting.bind(this)}
       >
         <devtools-switch
-          .checked=${Boolean(this.#aiAssistanceSetting?.get()) && !Boolean(disabledReason)}
+          .checked=${Boolean(this.#aiAssistanceSetting?.get()) && !isDisabled}
           .jslogContext=${this.#aiAssistanceSetting?.name || ''}
-          .disabled=${Boolean(disabledReason)}
+          .disabled=${isDisabled}
           @switchchange=${this.#toggleAiAssistanceSetting.bind(this)}
-          aria-label=${disabledReason || i18nString(UIStrings.enableAiAssistance)}
+          aria-label=${disabledReasonsJoined || i18nString(UIStrings.enableAiAssistance)}
         ></devtools-switch>
       </div>
       <div class=${classMap(detailsClasses)}>
@@ -531,37 +542,41 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     // clang-format on
   }
 
-  #renderDisabledExplainer(disabledReason: string): LitHtml.LitTemplate {
+  #renderDisabledExplainer(disabledReasons: 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}
+        ${disabledReasons.map(reason => html`
+          <div class="disabled-explainer-row">
+            <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>
+            ${reason}
+          </div>
+        `)}
       </div>
     `;
     // clang-format on
   }
 
   override async render(): Promise<void> {
-    const disabledReason = this.#getDisabledReason();
+    const disabledReasons = this.#getDisabledReasons();
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     LitHtml.render(html`
       <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}
+          ${disabledReasons.length ? this.#renderDisabledExplainer(disabledReasons) : LitHtml.nothing}
           <div class="settings-container">
-            ${this.#consoleInsightsSetting ? this.#renderConsoleInsightsSetting(disabledReason) : LitHtml.nothing}
-            ${this.#aiAssistanceSetting ? this.#renderAiAssistanceSetting(disabledReason) : LitHtml.nothing}
+            ${this.#consoleInsightsSetting ? this.#renderConsoleInsightsSetting(disabledReasons) : LitHtml.nothing}
+            ${this.#aiAssistanceSetting ? this.#renderAiAssistanceSetting(disabledReasons) : LitHtml.nothing}
           </div>
         ` : LitHtml.nothing}
       </div>

front_end/panels/settings/aiSettingsTab.css

@@ -172,14 +172,18 @@ header {
 }
 
 .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);
+  padding: var(--sys-size-6) var(--sys-size-11) var(--sys-size-8);
   width: 100%;
   max-width: var(--sys-size-35);
   min-width: var(--sys-size-28);
   color: var(--sys-color-yellow);
 }
+
+.disabled-explainer-row {
+  display: flex;
+  gap: var(--sys-size-6);
+  margin-top: var(--sys-size-4);
+}

front_end/ui/components/settings/SettingCheckbox.test.ts

@@ -56,7 +56,7 @@ describe('SettingCheckbox', () => {
     assert.isFalse(checkbox.checked);
   });
 
-  it('can be reassigned to a different settings', () => {
+  it('can be reassigned to a different setting', () => {
     const setting1 = createFakeSetting<boolean>('setting1', true);
     const setting2 = createFakeSetting<boolean>('setting2', true);
     const {component, checkbox} = renderSettingCheckbox({setting: setting1});
@@ -101,7 +101,7 @@ describe('SettingCheckbox', () => {
       settingType: Common.Settings.SettingType.BOOLEAN,
       defaultValue: false,
       disabledCondition: () => {
-        return {disabled: true, reason: 'reason'};
+        return {disabled: true, reasons: ['reason']};
       },
     });
 
@@ -121,7 +121,7 @@ describe('SettingCheckbox', () => {
       settingType: Common.Settings.SettingType.BOOLEAN,
       defaultValue: false,
       disabledCondition: () => {
-        return {disabled: true, reason: 'reason'};
+        return {disabled: true, reasons: ['reason']};
       },
     });
 

front_end/ui/components/settings/SettingCheckbox.ts

@@ -98,10 +98,11 @@ export class SettingCheckbox extends HTMLElement {
 
     const icon = this.icon();
     const title = `${this.#setting.learnMore() ? this.#setting.learnMore()?.tooltip() : ''}`;
-    const reason = this.#setting.disabledReason() ?
+    const disabledReasons = this.#setting.disabledReasons();
+    const reason = disabledReasons.length ?
         html`
       <devtools-button class="disabled-reason" .iconName=${'info'} .variant=${Buttons.Button.Variant.ICON} .size=${
-            Buttons.Button.Size.SMALL} title=${ifDefined(this.#setting.disabledReason())} @click=${
+            Buttons.Button.Size.SMALL} title=${ifDefined(disabledReasons.join('\n'))} @click=${
             onclick}></devtools-button>
     ` :
         LitHtml.nothing;
@@ -111,7 +112,7 @@ export class SettingCheckbox extends HTMLElement {
         <label title=${title}>
           <input
             type="checkbox"
-            .checked=${this.#setting.disabledReason() ? false : this.#setting.get()}
+            .checked=${disabledReasons.length ? false : this.#setting.get()}
             ?disabled=${this.#setting.disabled()}
             @change=${this.#checkboxChanged}
             jslog=${VisualLogging.toggle().track({click: true}).context(this.#setting.name)}