NTP: Address omnibar design feedback (#1860)

* Fix alignment of search icon and SuggestionsList icons

* Make AiChatForm buttons container have 12px padding consistently

* Adjust omnibar container border radius and focus ring

* Fix AI chat textarea height preservation on tab switch

* Update SearchForm text measurement to accomodate new 500 font weight

* Fix newline characters affecting spacing when switching from chat to
search

Author: noisysocks

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

@@ -1,5 +1,5 @@
 import { h } from 'preact';
-import { useEffect, useRef } from 'preact/hooks';
+import { useEffect, useLayoutEffect, useRef } from 'preact/hooks';
 import { eventToTarget } from '../../../../../shared/handlers';
 import { ArrowRightIcon } from '../../components/Icons';
 import { usePlatformName } from '../../settings.provider';
@@ -34,6 +34,23 @@ export function AiChatForm({ chat, autoFocus, onFocus, onBlur, onInput, onChange
         }
     }, [autoFocus]);
 
+    useLayoutEffect(() => {
+        const textArea = textAreaRef.current;
+        const form = formRef.current;
+
+        if (!textArea || !form) return;
+
+        const { paddingTop, paddingBottom } = window.getComputedStyle(textArea);
+        textArea.style.height = 'auto'; // Reset height
+        textArea.style.height = `calc(${textArea.scrollHeight}px - ${paddingTop} - ${paddingBottom})`;
+
+        if (textArea.scrollHeight > textArea.clientHeight) {
+            form.classList.add(styles.hasScroll);
+        } else {
+            form.classList.remove(styles.hasScroll);
+        }
+    }, [chat]);
+
     const disabled = chat.length === 0;
 
     /** @type {(event: SubmitEvent) => void} */
@@ -69,24 +86,6 @@ export function AiChatForm({ chat, autoFocus, onFocus, onBlur, onInput, onChange
         });
     };
 
-    /** @type {(event: import('preact').JSX.TargetedEvent<HTMLTextAreaElement>) => void} */
-    const handleChange = (event) => {
-        const form = formRef.current;
-        const textArea = event.currentTarget;
-
-        const { paddingTop, paddingBottom } = window.getComputedStyle(textArea);
-        textArea.style.height = 'auto'; // Reset height
-        textArea.style.height = `calc(${textArea.scrollHeight}px - ${paddingTop} - ${paddingBottom})`;
-
-        if (textArea.scrollHeight > textArea.clientHeight) {
-            form?.classList.add(styles.hasScroll);
-        } else {
-            form?.classList.remove(styles.hasScroll);
-        }
-
-        onChange(textArea.value);
-    };
-
     return (
         <form ref={formRef} class={styles.form} onClick={() => textAreaRef.current?.focus()} onSubmit={handleSubmit}>
             <textarea
@@ -102,7 +101,7 @@ export function AiChatForm({ chat, autoFocus, onFocus, onBlur, onInput, onChange
                 onBlurCapture={onBlur}
                 onInput={onInput}
                 onKeyDown={handleKeyDown}
-                onChange={handleChange}
+                onChange={(event) => onChange(event.currentTarget.value)}
             />
             <div class={styles.buttons}>
                 <button

special-pages/pages/new-tab/app/omnibar/components/AiChatForm.module.css

@@ -2,7 +2,7 @@
     align-items: center;
     display: flex;
     flex-direction: column;
-    padding-bottom: calc(14px + 9px + var(--sp-7)); /* Extra space to accomodate absolute positioned .buttons */
+    padding-bottom: calc(var(--sp-3) + var(--sp-7) + var(--sp-3)); /* Extra space to accomodate absolute positioned .buttons */
 }
 
 .textarea {
@@ -35,13 +35,9 @@
     bottom: 0;
     justify-content: space-between;
     left: 0;
-    padding: 14px 9px 9px;
+    padding: var(--sp-3);
     position: absolute; /* Fix .buttons to <Container /> so that it animates smoothly when container resizes */
     right: 0;
-
-    .hasScroll & {
-        padding-top: 9px;
-    }
 }
 
 .submitButton {

special-pages/pages/new-tab/app/omnibar/components/Container.module.css

@@ -5,7 +5,7 @@
 
 .inner {
     background: var(--ntp-surface-tertiary);
-    border-radius: 12px;
+    border-radius: 15px;
     box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
     overflow: hidden;
     position: relative;
@@ -17,12 +17,10 @@
 
     &:not(:has([role="listbox"])).focusRing,
     &:not(:has([role="listbox"])):focus-within:not(.noFocusRing) {
-        border-radius: 15px;
-        box-shadow: 0 0 0 1px var(--ntp-surface-tertiary), 0 0 0 3px var(--ntp-color-primary), 0 0 0 7px rgba(57, 105, 239, 0.2);
+        box-shadow: 0 0 0 1px var(--ntp-surface-tertiary), 0 0 0 3px var(--ntp-color-primary), 0 0 0 5px rgba(57, 105, 239, 0.2);
     }
 
     &:has([role="listbox"]) {
-        border-radius: 15px;
         box-shadow: 0 0 0 3px var(--ntp-surface-tertiary), 0px 4px 12px 3px rgba(0, 0, 0, 0.10), 0px 20px 40px 3px rgba(0, 0, 0, 0.08);
     }
 }

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

@@ -69,7 +69,8 @@ export function Omnibar({ mode, setMode, enableAi }) {
                 {mode === 'search' ? (
                     <SearchForm
                         key={`search-${resetKey}`}
-                        term={query}
+                        // Remove any newlines that come from switching from chat to search
+                        term={query.replace(/\n/g, '')}
                         autoFocus={autoFocus}
                         onChangeTerm={setQuery}
                         onOpenSuggestion={handleOpenSuggestion}

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

@@ -127,6 +127,6 @@ function measureText(text) {
     const canvas = document.createElement('canvas');
     const context = canvas.getContext('2d');
     if (!context) return 0;
-    context.font = '13px / 16px system-ui';
+    context.font = '500 13px / 16px system-ui';
     return context.measureText(text).width;
 }

special-pages/pages/new-tab/app/omnibar/components/SearchForm.module.css

@@ -1,10 +1,10 @@
 .inputContainer {
     align-items: center;
     display: flex;
-    padding: var(--sp-1);
+    padding: var(--sp-1) 7px;
 
     svg {
-        flex-shrink: 0;
+        flex: none;
         margin: var(--sp-2);
     }
 }
@@ -15,13 +15,13 @@
     color: var(--ntp-text-normal);
     font-weight: 500;
     height: var(--sp-8);
-    left: var(--sp-1);
+    left: 7px;
     padding-bottom: 0;
     padding-left: calc(var(--sp-2) + var(--sp-4) + var(--sp-2));
     padding-right: var(--suffix-text-width);
     padding-top: 0;
     position: absolute;
-    right: var(--sp-1);
+    right: 7px;
 
     &::placeholder {
         color: var(--ntp-text-muted);
@@ -33,12 +33,13 @@
 }
 
 .suffixSpacer {
+    font-weight: 500;
     overflow: hidden;
     visibility: hidden;
-    white-space: pre;
+    white-space: nowrap;
 }
 
 .suffix {
     color: var(--ntp-color-primary);
-    flex-shrink: 0;
+    flex: none;
 }

special-pages/pages/new-tab/app/omnibar/components/SuggestionsList.module.css

@@ -8,43 +8,65 @@
 .item {
     align-items: center;
     background: none;
+    border-radius: 4px;
     border: none;
     color: var(--ntp-text-normal);
     cursor: pointer;
     display: flex;
     height: var(--sp-8);
     justify-content: flex-start;
+    padding: 0 var(--sp-2) 0 0;
 
     svg {
-        flex-shrink: 0;
+        flex: none;
         margin: var(--sp-2);
     }
 
-    &[aria-selected="true"] {
-        background: var(--ddg-color-primary);
-        border-radius: 4px;
+    &[aria-selected="true"],
+    &:active {
         color: var(--color-white);
 
         .suffix {
             color: var(--color-white);
         }
+
+        .badge {
+            background: var(--color-white-at-30);
+        }
+    }
+
+    &[aria-selected="true"] {
+        background: var(--ddg-color-primary);
+    }
+
+    &:active {
+        background: var(--color-blue-60);
     }
 }
 
 .title {
-    white-space: pre;
+    flex: none;
+    max-width: 60%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .suffix {
     color: var(--ntp-text-muted);
+    flex: initial;
     font-size: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .badge {
     align-items: center;
     background: var(--ntp-controls-raised-backdrop);
     border-radius: var(--border-radius-sm);
     display: flex;
+    flex: none;
     gap: 6px;
     height: 22px;
     margin-left: auto;

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

@@ -873,4 +873,40 @@ test.describe('omnibar widget', () => {
         // Input should retain its value
         await omnibar.expectInputValue('pizza');
     });
+
+    test('AI chat textarea height is preserved when switching tabs', async ({ page }, workerInfo) => {
+        const ntp = NewtabPage.create(page, workerInfo);
+        const omnibar = new OmnibarPage(ntp);
+
+        await ntp.reducedMotion();
+        await ntp.openPage({ additional: { omnibar: true, 'omnibar.enableAi': true } });
+        await omnibar.ready();
+
+        // Switch to AI tab
+        await omnibar.aiTab().click();
+        await omnibar.expectMode('ai');
+
+        // Type multiline content to expand textarea
+        const multilineText = 'This is line 1\nThis is line 2\nThis is line 3';
+        await omnibar.chatInput().fill(multilineText);
+
+        // Get initial textarea height after expansion
+        const originalHeight = await omnibar.chatInput().evaluate((el) => el.style.height);
+        expect(originalHeight).not.toBe(''); // Should have some height set
+
+        // Switch to search tab
+        await omnibar.searchTab().click();
+        await omnibar.expectMode('search');
+
+        // Switch back to AI tab
+        await omnibar.aiTab().click();
+        await omnibar.expectMode('ai');
+
+        // Textarea should preserve its expanded height
+        const newHeight = await omnibar.chatInput().evaluate((el) => el.style.height);
+        expect(newHeight).toBe(originalHeight);
+
+        // Content should still be there
+        await expect(omnibar.chatInput()).toHaveValue(multilineText);
+    });
 });