ntp: allow visibility menu items to be disabled (#1930)

Author: shakyShane

special-pages/pages/new-tab/app/customizer/components/Customizer.examples.js

@@ -7,6 +7,47 @@ import { ColorSelection } from './ColorSelection.js';
 import { GradientSelection } from './GradientSelection.js';
 import { useSignal } from '@preact/signals';
 import { ImageSelection } from './ImageSelection.js';
+import { ArrowIndentCenteredIcon, DuckFoot, SearchIcon, Shield } from '../../components/Icons.js';
+
+/** @type {import('./CustomizerMenu.js').VisibilityRowData[]} */
+const ROWS = [
+    {
+        id: 'omnibar',
+        title: 'Search',
+        icon: <SearchIcon />,
+        toggle: noop('toggle search'),
+        visibility: 'visible',
+        index: 1,
+        enabled: true,
+    },
+    {
+        id: 'omnibar-toggleAi',
+        title: 'Duck.ai',
+        icon: <ArrowIndentCenteredIcon style={{ color: 'var(--ntp-icons-tertiary)' }} />,
+        toggle: noop('toggle Duck.ai'),
+        visibility: 'visible',
+        index: 1.1,
+        enabled: true,
+    },
+    {
+        id: 'favorites',
+        title: 'Favorites',
+        icon: <Shield />,
+        toggle: noop('toggle favorites'),
+        visibility: 'hidden',
+        index: 0,
+        enabled: true,
+    },
+    {
+        id: 'privacyStats',
+        title: 'Privacy Stats',
+        icon: <DuckFoot />,
+        toggle: noop('toggle favorites'),
+        visibility: 'visible',
+        index: 1,
+        enabled: true,
+    },
+];
 
 /** @type {Record<string, {factory: () => import("preact").ComponentChild}>} */
 export const customizerExamples = {
@@ -64,30 +105,34 @@ export const customizerExamples = {
         },
     },
     'customizer-menu': {
+        factory: () => (
+            <MaxContent>
+                <CustomizerButton isOpen={true} kind="menu" />
+                <br />
+                <div style="width: 206px; border: 1px dotted black">
+                    <EmbeddedVisibilityMenu rows={ROWS} />
+                </div>
+            </MaxContent>
+        ),
+    },
+    'customizer-menu-disabled-item': {
         factory: () => (
             <MaxContent>
                 <CustomizerButton isOpen={true} kind="menu" />
                 <br />
                 <div style="width: 206px; border: 1px dotted black">
                     <EmbeddedVisibilityMenu
-                        rows={[
-                            {
-                                id: 'favorites',
-                                title: 'Favorites',
-                                icon: 'star',
-                                toggle: noop('toggle favorites'),
-                                visibility: 'hidden',
-                                index: 0,
-                            },
-                            {
-                                id: 'privacyStats',
-                                title: 'Privacy Stats',
-                                icon: 'shield',
-                                toggle: noop('toggle favorites'),
-                                visibility: 'visible',
-                                index: 1,
-                            },
-                        ]}
+                        rows={ROWS.map((row) => {
+                            if (row.id === 'omnibar') {
+                                /** @type {import('./CustomizerMenu.js').VisibilityRowData}} */
+                                return { ...row, visibility: 'hidden' };
+                            }
+                            if (row.id === 'omnibar-toggleAi') {
+                                /** @type {import('./CustomizerMenu.js').VisibilityRowData}} */
+                                return { ...row, enabled: false, visibility: 'hidden' };
+                            }
+                            return row;
+                        })}
                     />
                 </div>
             </MaxContent>

special-pages/pages/new-tab/app/customizer/components/CustomizerMenu.js

@@ -11,6 +11,7 @@ import { useMessaging, useTypedTranslation } from '../../types.js';
 /**
  * @typedef {object} VisibilityRowData
  * @property {string} id - a unique id
+ * @property {boolean} enabled - whether this row can be interacted with
  * @property {string} title - the title as it should appear in the menu
  * @property {import('preact').ComponentChild} icon - icon to display in the menu
  * @property {(id: string) => void} toggle - toggle function for this item
@@ -99,14 +100,14 @@ export function CustomizerMenuPositionedFixed({ children }) {
  * Call this to opt-in to the visibility menu
  * @param {VisibilityRowData} row
  */
-export function useCustomizer({ title, id, icon, toggle, visibility, index }) {
+export function useCustomizer({ title, id, icon, toggle, visibility, index, enabled }) {
     useEffect(() => {
-        const handler = (/** @type {CustomEvent<any>} */ e) => {
-            e.detail.register({ title, id, icon, toggle, visibility, index });
+        const handler = (/** @type {CustomEvent<{register: (d: VisibilityRowData) => void}>} */ e) => {
+            e.detail.register({ title, id, icon, toggle, visibility, index, enabled });
         };
         window.addEventListener(OPEN_EVENT, handler);
         return () => window.removeEventListener(OPEN_EVENT, handler);
-    }, [title, id, icon, toggle, visibility, index]);
+    }, [title, id, icon, toggle, visibility, index, enabled]);
 
     useEffect(() => {
         window.dispatchEvent(new Event(UPDATE_EVENT));

special-pages/pages/new-tab/app/customizer/components/VisibilityMenu.js

@@ -24,8 +24,8 @@ export function EmbeddedVisibilityMenu({ rows }) {
                 return (
                     <li key={row.id}>
                         <div class={cn(styles.menuItemLabel, styles.menuItemLabelEmbedded)}>
-                            <span className={styles.svg}>{row.icon}</span>
-                            <span>{row.title ?? row.id}</span>
+                            <span class={styles.svg}>{row.icon}</span>
+                            <span class={styles.title}>{row.title ?? row.id}</span>
                             <Switch
                                 theme={browser.value}
                                 platformName={platformName}
@@ -35,6 +35,9 @@ export function EmbeddedVisibilityMenu({ rows }) {
                                 onUnchecked={() => row.toggle?.(row.id)}
                                 ariaLabel={`Toggle ${row.title}`}
                                 pending={false}
+                                inputProps={{
+                                    disabled: row.enabled === false,
+                                }}
                             />
                         </div>
                     </li>

special-pages/pages/new-tab/app/customizer/components/VisibilityMenu.module.css

@@ -19,6 +19,10 @@
     gap: 10px;
     white-space: nowrap;
     height: calc(28 * var(--px-in-rem));
+
+    &:has(input[disabled]) .title {
+        color: var(--ntp-text-tertiary)
+    }
 }
 
 .menuItemLabelEmbedded {

special-pages/pages/new-tab/app/customizer/integration-tests/customizer.page.js

@@ -485,6 +485,20 @@ export class CustomizerPage {
         await expect(this.context().getByRole('switch', { name })).toBeVisible();
     }
 
+    /**
+     * @param {string} name
+     */
+    async switchIsDisabled(name) {
+        await expect(this.context().getByRole('switch', { name })).toBeDisabled();
+    }
+
+    /**
+     * @param {string} name
+     */
+    async switchIsEnabled(name) {
+        await expect(this.context().getByRole('switch', { name })).toBeEnabled();
+    }
+
     /**
      * @param {string} name
      */

special-pages/pages/new-tab/app/favorites/components/FavoritesCustomized.js

@@ -67,7 +67,7 @@ export function FavoritesCustomized() {
 
     // register with the visibility menu
     const title = t('favorites_menu_title');
-    useCustomizer({ title, id, icon: <Shield />, toggle, visibility: visibility.value, index });
+    useCustomizer({ title, id, icon: <Shield />, toggle, visibility: visibility.value, index, enabled: true });
 
     if (visibility.value === 'hidden') {
         return null;

special-pages/pages/new-tab/app/omnibar/components/OmnibarConsumer.js

@@ -28,12 +28,20 @@ import { useTabState } from '../../tabs/TabsProvider.js';
  * ```
  */
 export function OmnibarConsumer() {
-    const { state } = useContext(OmnibarContext);
+    const { state, setEnableAi } = useContext(OmnibarContext);
     const { current } = useTabState();
-    if (state.status === 'ready') {
-        return <OmnibarReadyState config={state.config} key={current.value} tabId={current.value} />;
-    }
-    return null;
+    const { visibility } = useVisibility();
+    if (state.status !== 'ready') return null;
+
+    const visible = visibility.value === 'visible';
+    return (
+        <>
+            {state.config.showAiSetting && (
+                <AiSetting enableAi={state.config?.enableAi === true} setEnableAi={setEnableAi} omnibarVisible={visible} />
+            )}
+            {visible && <OmnibarReadyState config={state.config} key={current.value} tabId={current.value} />}
+        </>
+    );
 }
 
 /**
@@ -43,32 +51,32 @@ export function OmnibarConsumer() {
  */
 function OmnibarReadyState({ config, tabId }) {
     const { enableAi = true, showAiSetting = true, mode: defaultMode } = config;
-    const { setEnableAi, setMode } = useContext(OmnibarContext);
+    const { setMode } = useContext(OmnibarContext);
     const modeForCurrentTab = useModeWithLocalPersistence(tabId, defaultMode);
 
-    return (
-        <>
-            {showAiSetting && <AiSetting enableAi={enableAi} setEnableAi={setEnableAi} />}
-            <Omnibar mode={modeForCurrentTab} setMode={setMode} enableAi={showAiSetting && enableAi} tabId={tabId} />
-        </>
-    );
+    return <Omnibar mode={modeForCurrentTab} setMode={setMode} enableAi={showAiSetting && enableAi} tabId={tabId} />;
 }
 
 /**
  * @param {object} props
  * @param {boolean} props.enableAi
  * @param {(enable: boolean) => void} props.setEnableAi
+ * @param {boolean} props.omnibarVisible
  */
-function AiSetting({ enableAi, setEnableAi }) {
+export function AiSetting({ enableAi, setEnableAi, omnibarVisible }) {
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
     const { id, index } = useVisibility();
     useCustomizer({
         title: t('omnibar_toggleDuckAi'),
         id: `_${id}-toggleAi`,
         icon: <ArrowIndentCenteredIcon style={{ color: 'var(--ntp-icons-tertiary)' }} />,
         toggle: () => setEnableAi(!enableAi),
-        visibility: enableAi ? 'visible' : 'hidden',
+        /**
+         * Duck.ai is only ever shown as 'visible' (eg: switch is checked) if the omnibar is also visible.
+         */
+        visibility: omnibarVisible && enableAi ? 'visible' : 'hidden',
         index: index + 0.1,
+        enabled: omnibarVisible,
     });
     return null;
 }

special-pages/pages/new-tab/app/omnibar/components/OmnibarCustomized.js

@@ -29,16 +29,14 @@ export function OmnibarCustomized() {
 
     const { visibility, id, toggle, index } = useVisibility();
 
-    useCustomizer({ title: sectionTitle, id, icon: <SearchIcon />, toggle, visibility: visibility.value, index });
+    useCustomizer({ title: sectionTitle, id, icon: <SearchIcon />, toggle, visibility: visibility.value, index, enabled: true });
 
     return (
         <PersistentTextInputProvider>
             <PersistentModeProvider>
-                {visibility.value === 'visible' && (
-                    <OmnibarProvider>
-                        <OmnibarConsumer />
-                    </OmnibarProvider>
-                )}
+                <OmnibarProvider>
+                    <OmnibarConsumer />
+                </OmnibarProvider>
             </PersistentModeProvider>
         </PersistentTextInputProvider>
     );

special-pages/pages/new-tab/app/omnibar/integration-tests/omnibar.spec.js

@@ -1,6 +1,7 @@
 import { test, expect } from '@playwright/test';
 import { NewtabPage } from '../../../integration-tests/new-tab.page.js';
 import { OmnibarPage } from './omnibar.page.js';
+import { CustomizerPage } from '../../customizer/integration-tests/customizer.page.js';
 
 test.describe('omnibar widget', () => {
     test('fetches config on load', async ({ page }, workerInfo) => {
@@ -306,18 +307,19 @@ test.describe('omnibar widget', () => {
     test('hiding Omnibar widget hides Duck.ai toggle', async ({ page }, workerInfo) => {
         const ntp = NewtabPage.create(page, workerInfo);
         const omnibar = new OmnibarPage(ntp);
+        const customizer = new CustomizerPage(ntp);
         await ntp.reducedMotion();
 
         await ntp.openPage({ additional: { omnibar: true } });
         await omnibar.ready();
 
         // Open Customize panel - Duck.ai toggle should be visible
-        await omnibar.customizeButton().click();
-        await expect(omnibar.toggleDuckAiButton()).toBeVisible();
+        await customizer.opensCustomizer();
+        await customizer.switchIsEnabled('Duck.ai');
 
         // Hide the Omnibar widget - Duck.ai toggle should be hidden
         await omnibar.toggleSearchButton().click();
-        await expect(omnibar.toggleDuckAiButton()).toHaveCount(0);
+        await customizer.switchIsDisabled('Duck.ai');
     });
 
     test('Duck.ai toggle is hidden when showAiSetting is false', async ({ page }, workerInfo) => {

special-pages/pages/new-tab/app/omnibar/mocks/omnibar.mock-transport.js

@@ -7,6 +7,8 @@ export function omnibarMockTransport() {
     /** @type {import('../../../types/new-tab.ts').OmnibarConfig} */
     const config = {
         mode: 'search',
+        enableAi: true,
+        showAiSetting: true,
     };
 
     /** @type {Map<string, (d: any) => void>} */