Merge branch 'main' into dependabot/npm_and_yarn/main/fast-check-4.2.0

Author: jonathanKingston

.github/workflows/snapshots.yml

@@ -10,6 +10,7 @@ on:
         branches:
             - main
     pull_request:
+    merge_group:
 
 permissions:
     contents: read

.github/workflows/tests.yml

@@ -5,6 +5,7 @@ on:
         branches:
             - main
     pull_request:
+    merge_group:
 
 permissions:
     contents: read

injected/docs/platform-integration.md

@@ -24,7 +24,7 @@ The following is a guideline for when using native JavaScript syntax or built-in
 
 #### Android
 
-- **Android 23** (minimum) - [Product feedback request: Android - min supported version](https://app.asana.com/1/137249556945/project/908478224964033/task/1209367367171662?focus=true)
+- **Android 23** (minimum) - [Product feedback request: Android - min supported version](https://app.asana.com/1/137249556945/project/1175293949586521/task/1200982924050797?focus=true)
 - **Chrome 80+** (minimum)
 - **Reference**: See [pixel dashboard](https://app.asana.com/1/137249556945/project/908478224964033/task/1209367367171662?focus=true)
 

special-pages/pages/new-tab/app/components/App.module.css

@@ -32,6 +32,10 @@ body[data-animate-background="true"] {
     max-width: calc(504 * var(--px-in-rem));
 }
 
+:global([data-entry-point="omnibar"]) {
+    max-width: calc(620 * var(--px-in-rem));
+}
+
 :global(.vertical-space) {
     padding-top: 1rem;
     padding-bottom: 1rem;

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

@@ -15,10 +15,13 @@ import styles from './AiChatForm.module.css';
  * @param {object} props
  * @param {string} props.chat
  * @param {boolean} [props.autoFocus]
+ * @param {(event: FocusEvent) => void} props.onFocus
+ * @param {(event: FocusEvent) => void} props.onBlur
+ * @param {(event: InputEvent) => void} props.onInput
  * @param {(chat: string) => void} props.onChange
  * @param {(params: { chat: string, target: OpenTarget }) => void} props.onSubmit
  */
-export function AiChatForm({ chat, autoFocus, onChange, onSubmit }) {
+export function AiChatForm({ chat, autoFocus, onFocus, onBlur, onInput, onChange, onSubmit }) {
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
     const platformName = usePlatformName();
 
@@ -94,6 +97,9 @@ export function AiChatForm({ chat, autoFocus, onChange, onSubmit }) {
                 aria-label={t('omnibar_aiChatFormPlaceholder')}
                 autoComplete="off"
                 rows={1}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                onInput={onInput}
                 onKeyDown={handleKeyDown}
                 onChange={handleChange}
             />

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

@@ -11,10 +11,15 @@
     border: none;
     box-sizing: content-box;
     color: var(--ntp-text-normal);
+    font-weight: 500;
     max-height: 10lh;
     padding: 11px 15px 0;
     resize: none;
 
+    &::placeholder {
+        color: var(--ntp-text-muted);
+    }
+
     &:focus {
         outline: none;
     }

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

@@ -1,34 +1,47 @@
+import cn from 'classnames';
 import { h } from 'preact';
 import styles from './Container.module.css';
 import { useRef, useLayoutEffect, useState } from 'preact/hooks';
 
 /**
  * @param {object} props
  * @param {boolean} props.overflow
+ * @param {boolean} [props.focusRing]
  * @param {import('preact').ComponentChildren} props.children
  */
-export function Container({ overflow, children }) {
+export function Container({ overflow, focusRing, children }) {
+    const { contentRef, initialHeight, currentHeight } = useContentHeight();
+    return (
+        <div class={styles.outer} style={{ height: overflow && initialHeight ? initialHeight : 'auto' }}>
+            <div
+                class={cn(styles.inner, {
+                    [styles.focusRing]: focusRing === true,
+                    [styles.noFocusRing]: focusRing === false,
+                })}
+                style={{ height: currentHeight ?? 'auto' }}
+            >
+                <div ref={contentRef}>{children}</div>
+            </div>
+        </div>
+    );
+}
+
+function useContentHeight() {
     const contentRef = useRef(/** @type {HTMLDivElement|null} */ (null));
     const initialHeight = useRef(/** @type {number|null} */ (null));
-    const [contentHeight, setContentHeight] = useState(/** @type {number|null} */ (null));
+    const [currentHeight, setCurrentHeight] = useState(/** @type {number|null} */ (null));
 
     useLayoutEffect(() => {
         const content = contentRef.current;
         if (!content) return;
 
         initialHeight.current = content.scrollHeight;
-        setContentHeight(content.scrollHeight);
+        setCurrentHeight(content.scrollHeight);
 
-        const resizeObserver = new ResizeObserver(() => setContentHeight(content.scrollHeight));
+        const resizeObserver = new ResizeObserver(() => setCurrentHeight(content.scrollHeight));
         resizeObserver.observe(content);
         return () => resizeObserver.disconnect();
     }, []);
 
-    return (
-        <div class={styles.outer} style={{ height: overflow && initialHeight.current ? initialHeight.current : 'auto' }}>
-            <div class={styles.inner} style={{ height: contentHeight ?? 'auto' }}>
-                <div ref={contentRef}>{children}</div>
-            </div>
-        </div>
-    );
+    return { contentRef, initialHeight: initialHeight.current, currentHeight };
 }

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

@@ -5,9 +5,8 @@
 
 .inner {
     background: var(--ntp-surface-tertiary);
-    border-radius: 11px;
+    border-radius: 12px;
     box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
-    margin: 0 calc(-1 * var(--sp-1));
     overflow: hidden;
     position: relative;
     transition: height 200ms ease;
@@ -16,15 +15,14 @@
         transition: none;
     }
 
-    &:focus-within {
-        border-radius: 14px;
-        box-shadow: 0 0 0 2px var(--ntp-color-primary), 0 0 0 4px rgba(57, 105, 239, 0.2);
-        margin: 0 calc(-1 * var(--sp-1) - 3px);
-        padding: 0 3px;
+    &: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);
     }
 
     &:has([role="listbox"]) {
-        border-radius: 16px;
-        box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.16);
+        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

@@ -27,6 +27,7 @@ export function Omnibar({ mode, setMode, enableAi }) {
     const [query, setQuery] = useState(/** @type {String} */ (''));
     const [resetKey, setResetKey] = useState(0);
     const [autoFocus, setAutoFocus] = useState(false);
+    const [focusRing, setFocusRing] = useState(/** @type {boolean|undefined} */ (undefined));
 
     const { openSuggestion, submitSearch, submitChat } = useContext(OmnibarContext);
 
@@ -56,14 +57,15 @@ export function Omnibar({ mode, setMode, enableAi }) {
     /** @type {(mode: OmnibarConfig['mode']) => void} */
     const handleChangeMode = (nextMode) => {
         setAutoFocus(true);
+        setFocusRing(undefined);
         setMode(nextMode);
     };
 
     return (
         <div class={styles.root} data-mode={mode}>
             <LogoStacked class={styles.logo} aria-label={t('omnibar_logoAlt')} />
             {enableAi && <TabSwitcher mode={mode} onChange={handleChangeMode} />}
-            <Container overflow={mode === 'search'}>
+            <Container overflow={mode === 'search'} focusRing={focusRing}>
                 {mode === 'search' ? (
                     <SearchForm
                         key={`search-${resetKey}`}
@@ -78,6 +80,9 @@ export function Omnibar({ mode, setMode, enableAi }) {
                         key={`chat-${resetKey}`}
                         chat={query}
                         autoFocus={autoFocus}
+                        onFocus={() => setFocusRing(true)}
+                        onBlur={() => setFocusRing(false)}
+                        onInput={() => setFocusRing(false)}
                         onChange={setQuery}
                         onSubmit={handleSubmitChat}
                     />

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

@@ -8,5 +8,5 @@
 
 .logo {
     margin-bottom: var(--sp-4);
-    width: 123px;
+    width: 164px;
 }