NTP: More omnibar design feedback (#1876)

* Adjust spacing and borders to match design spec pixel for pixel

* Add close button to search input

* Add fade-in animation to submit button

* Make chat textarea have same padding as search input

* Extra height on .spacer to accomodate border

* Don't let close button sit against input text

* Add search form close button label to translations

* Update snapshot tests

* Fix close button in WebKit

Author: noisysocks

special-pages/pages/new-tab/app/components/Icons.js

@@ -499,3 +499,18 @@ export function ArrowIndentCenteredIcon(props) {
         </svg>
     );
 }
+
+/**
+ * From https://dub.duckduckgo.com/duckduckgo/Icons/blob/Main/Glyphs/16px/Close-Small-16.svg.
+ * @param {import('preact').JSX.SVGAttributes<SVGSVGElement>} props
+ */
+export function CloseSmallIcon(props) {
+    return (
+        <svg width="16" height="16" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path
+                fill="currentColor"
+                d="M10.433 4.683a.625.625 0 1 1 .884.884L8.884 8l2.433 2.433a.625.625 0 1 1-.884.884L8 8.884l-2.433 2.433a.625.625 0 1 1-.884-.884L7.116 8 4.683 5.567a.625.625 0 1 1 .884-.884L8 7.116l2.433-2.433Z"
+            />
+        </svg>
+    );
+}

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

@@ -12,7 +12,7 @@
     box-sizing: content-box;
     color: var(--ntp-text-primary);
     max-height: 10lh;
-    padding: 11px 15px 0;
+    padding: var(--sp-3) var(--sp-3) 0;
     resize: none;
 
     [data-platform="macos"] & {
@@ -34,7 +34,7 @@
 
     .hasScroll & {
         border-bottom: 1px solid var(--ntp-decoration-tertiary);
-        padding-bottom: 11px;
+        padding-bottom: var(--sp-3);
     }
 }
 
@@ -50,6 +50,7 @@
 
 .submitButton {
     align-items: center;
+    animation: fadeIn 0.3s ease-in-out;
     background: var(--ntp-accent-primary);
     border-radius: 100%;
     border: none;
@@ -64,12 +65,28 @@
 
     &[disabled] {
         background: none;
-        color: var(--ntp-icons-primary);
+        color: color-mix(in srgb, var(--ntp-icons-primary) 30%, transparent);
         cursor: default;
-        opacity: 0.3;
+    }
+
+    &:hover:not([disabled]) {
+        background: var(--ntp-accent-secondary);
+    }
+
+    &:active:not([disabled]) {
+        background: var(--ntp-accent-tertiary);
     }
 
     &:focus-visible {
         box-shadow: var(--focus-ring);
     }
 }
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}

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

@@ -65,13 +65,13 @@ export function Omnibar({ mode, setMode, enableAi }) {
     };
 
     return (
-        <div key={resetKey} class={styles.root} data-mode={mode}>
+        <div key={resetKey} class={styles.root} data-mode={mode} data-focus-ring={focusRing}>
             <LogoStacked class={styles.logo} aria-label={t('omnibar_logoAlt')} />
             {enableAi && <TabSwitcher mode={mode} onChange={handleChangeMode} />}
             <SearchFormProvider term={query} setTerm={setQuery}>
                 <div class={styles.spacer}>
                     <div class={styles.popup}>
-                        <ResizingContainer className={styles.field} data-focus-ring={focusRing}>
+                        <ResizingContainer className={styles.field}>
                             {mode === 'search' ? (
                                 <SearchForm autoFocus={autoFocus} onOpenSuggestion={handleOpenSuggestion} onSubmit={handleSubmitSearch} />
                             ) : (

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

@@ -14,8 +14,8 @@
 /*
  * There are three containers:
  * 1) .spacer - Pushes other widgets away. Fixed height. Contents overflow. Height animates.
- * 2) .popup - Has border when suggestions list open. Auto height. No animation.
- * 3) .field - Has border when suggestions list closed. Fixed height set to scrollHeight of children. Height animates.
+ * 2) .popup - Has border. Auto height. No animation.
+ * 3) .field - Fixed height set to scrollHeight of children. Height animates.
  *
  * The intention is that:
  * - Other widgets are smoothly pushed away when switching to the Duck.ai tab.
@@ -25,10 +25,6 @@
  */
 
 .spacer {
-    --box-shadow-rest: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
-    --box-shadow-focused: 0 0 0 1px var(--ntp-surface-tertiary), 0 0 0 3px var(--ntp-accent-primary), 0 0 0 5px var(--ntp-accent-glow);
-    --box-shadow-suggestions: 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);
-
     align-self: stretch;
     transition: height 200ms ease;
     z-index: 1;
@@ -38,15 +34,22 @@
     }
 
     [data-mode="search"] & {
-        height: var(--sp-10);
+        height: calc(var(--sp-10) + 3px * 2);
     }
 
     [data-mode="ai"] & {
-        height: var(--sp-20);
+        height: calc(var(--sp-20) + 3px * 2);
     }
 }
 
+.popup {
+    backdrop-filter: blur(16px);
+    background: var(--ntp-surface-tertiary);
+    display: flow-root; /* Prevent margin collapse on .field */
+}
+
 .field {
+    box-sizing: content-box;
     overflow: hidden;
     position: relative;
     transition: height 200ms ease;
@@ -56,22 +59,34 @@
     }
 }
 
-.root:has([role="listbox"]) .popup,
-.root:not(:has([role="listbox"])) .field {
-    backdrop-filter: blur(16px);
-    background: var(--ntp-surface-tertiary);
-    border-radius: var(--border-radius-lg);
+/* Rest */
+.root:not(:has([role="listbox"])) .popup {
+    border-radius: 12px;
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    margin: 3px;
 }
 
-.root:not(:has([role="listbox"])) .field {
-    box-shadow: var(--box-shadow-rest);
-}
+/* Focused */
+.root:not(:has([role="listbox"])):focus-within:not([data-focus-ring="false"]) .popup,
+.root:not(:has([role="listbox"]))[data-focus-ring="true"] .popup {
+    border-radius: 15px;
+    border: 2px solid var(--ntp-accent-primary);
+    box-shadow: none;
+    margin: 0;
+    outline: 2px solid var(--ntp-accent-glow);
 
-.root:not(:has([role="listbox"])) .field[data-focus-ring="true"],
-.root:not(:has([role="listbox"])) .field:focus-within:not([data-focus-ring="false"]) {
-    box-shadow: var(--box-shadow-focused);
+    .field {
+        margin: 1px; /* Use margin on .field instead of padding on .popup so that position: absolute respects the spacing */
+    }
 }
 
+/* Suggestions */
 .root:has([role="listbox"]) .popup {
-    box-shadow: var(--box-shadow-suggestions);
+    border-radius: 15px;
+    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1), 0 20px 40px 0 rgba(0, 0, 0, 0.08);
+    margin: 0;
+
+    .field {
+        margin: 3px; /* Use margin on .field instead of padding on .popup so that position: absolute respects the spacing */
+    }
 }

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

@@ -8,6 +8,7 @@ import styles from './SearchForm.module.css';
 import { useSearchFormContext } from './SearchFormProvider.js';
 import { useSuffixText } from './SuffixText.js';
 import { useCompletionInput } from './useSuggestionInput.js';
+import { CloseSmallIcon } from '../../components/Icons.js';
 
 /**
  * @typedef {import('../strings.json')} Strings
@@ -108,14 +109,6 @@ export function SearchForm({ autoFocus, onOpenSuggestion, onSubmit }) {
         <form
             class={styles.form}
             style={{ '--input-font': inputFont, '--suffix-text-width': `${inputSuffixWidth}px` }}
-            // Using onBlurCapture to work around WebKit which doesn't fire blur event when user selects address bar.
-            onBlurCapture={(event) => {
-                // Ignore blur events caused by clicking on a suggestion
-                if (event.relatedTarget instanceof Element && event.relatedTarget.role === 'option') {
-                    return;
-                }
-                hideSuggestions();
-            }}
             onSubmit={(event) => {
                 event.preventDefault();
                 onSubmit({
@@ -146,6 +139,16 @@ export function SearchForm({ autoFocus, onOpenSuggestion, onSubmit }) {
                     updateSuggestions(term);
                 }}
                 onClick={() => acceptSuggestion()}
+                // Using onBlurCapture to work around WebKit which doesn't fire blur event when user selects address bar.
+                onBlurCapture={(event) => {
+                    if (event.relatedTarget instanceof Element) {
+                        // Ignore blur events caused by clicking on a suggestion
+                        if (event.relatedTarget.role === 'option') return;
+                        // Ignore blur events caused by clicking on the close button
+                        if (event.relatedTarget.classList.contains(styles.closeButton)) return;
+                    }
+                    hideSuggestions();
+                }}
             />
             {inputSuffix && (
                 <>
@@ -158,6 +161,23 @@ export function SearchForm({ autoFocus, onOpenSuggestion, onSubmit }) {
                     </span>
                 </>
             )}
+            {term.length > 0 && (
+                <button
+                    class={styles.closeButton}
+                    aria-label={t('omnibar_searchFormCloseButtonLabel')}
+                    tabIndex={0} // Needed so that WebKit sets event.relatedTarget when firing blur event
+                    onClick={(event) => {
+                        event.preventDefault();
+                        if (suggestions.length > 0) {
+                            hideSuggestions();
+                        } else {
+                            setTerm('');
+                        }
+                    }}
+                >
+                    <CloseSmallIcon />
+                </button>
+            )}
         </form>
     );
 }

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

@@ -2,22 +2,19 @@
     align-items: center;
     display: flex;
     height: var(--sp-10);
-    padding: var(--sp-1) 7px var(--sp-1) calc(7px + var(--sp-2));
+    padding: var(--sp-3);
 }
 
 .input {
     background: none;
     border: none;
     color: var(--ntp-text-primary);
     font: var(--input-font);
-    height: var(--sp-8);
-    left: 7px;
-    padding-bottom: 0;
-    padding-left: var(--sp-2);
-    padding-right: var(--suffix-text-width);
-    padding-top: 0;
+    left: 0;
+    padding: var(--sp-3);
+    padding-right: calc(var(--suffix-text-width) + var(--sp-1) + var(--sp-8) + var(--sp-3)); /* Suffix + padding + close button + padding */
     position: absolute;
-    right: 7px;
+    right: 0;
 
     &::placeholder {
         color: var(--ntp-text-tertiary);
@@ -45,3 +42,42 @@
     flex: none;
     font: var(--input-font);
 }
+
+.closeButton {
+    align-items: center;
+    background: none;
+    border-radius: 9px;
+    border: none;
+    color: var(--ntp-text-primary);
+    cursor: pointer;
+    display: flex;
+    flex: none;
+    height: var(--sp-8);
+    justify-content: center;
+    margin-left: auto;
+    outline: none;
+    padding: 0;
+    width: var(--sp-8);
+    z-index: 1;
+    visibility: hidden;
+
+    &:hover {
+        background: var(--ntp-controls-fill-primary);
+    }
+
+    &:active {
+        background: var(--ntp-controls-fill-secondary);
+    }
+
+    &:focus-visible {
+        box-shadow: var(--focus-ring);
+    }
+
+    .form:hover & {
+        visibility: visible;
+    }
+
+    [data-entry-point="omnibar"]:has([role="listbox"]) & {
+        visibility: visible;
+    }
+}

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

@@ -2,7 +2,8 @@
     border-top: 1px solid var(--ntp-surface-border-color);
     display: flex;
     flex-direction: column;
-    padding: 7px;
+    padding: calc(3px + var(--sp-1)); /* 3px for popup borders + 1sp of padding */
+    padding-top: calc(3px + var(--sp-1) - 1px); /* - 1px to account for the border-top */
 }
 
 .item {

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

@@ -65,6 +65,10 @@ export class OmnibarPage {
         return this.page.getByRole('switch', { name: 'Toggle Duck.ai' });
     }
 
+    closeButton() {
+        return this.context().getByRole('button', { name: 'Close' });
+    }
+
     /**
      * @param {number} count
      */

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

@@ -908,4 +908,32 @@ test.describe('omnibar widget', () => {
         // Content should still be there
         await expect(omnibar.chatInput()).toHaveValue(multilineText);
     });
+
+    test('close button hides suggestions then clears input', async ({ page }, workerInfo) => {
+        const ntp = NewtabPage.create(page, workerInfo);
+        const omnibar = new OmnibarPage(ntp);
+
+        await ntp.reducedMotion();
+        await ntp.openPage({ additional: { omnibar: true } });
+        await omnibar.ready();
+
+        // Select the input and type 'pizza'
+        await omnibar.searchInput().click();
+        await omnibar.searchInput().fill('pizza');
+
+        // Wait for suggestions to appear
+        await omnibar.waitForSuggestions();
+        await omnibar.expectSuggestionsCount(18);
+
+        // Click close button - should hide suggestions
+        await omnibar.closeButton().click();
+        await expect(omnibar.suggestionsList()).not.toBeVisible();
+
+        // Input should still have 'pizza'
+        await omnibar.expectInputValue('pizza');
+
+        // Click close button again - should clear input
+        await omnibar.closeButton().click();
+        await omnibar.expectInputValue('');
+    });
 });

special-pages/pages/new-tab/app/omnibar/strings.json

@@ -31,6 +31,10 @@
     "title": "Search privately",
     "description": "Placeholder text for the search input field."
   },
+  "omnibar_searchFormCloseButtonLabel": {
+    "title": "Close",
+    "description": "Accessible label for the close button in the search form."
+  },
   "omnibar_toggleDuckAi": {
     "title": "Duck.ai",
     "description": "Label for the button to toggle the Duck.ai chat interface."