NTP: Omnibar suffix text (#1831)

Author: noisysocks

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

@@ -401,13 +401,13 @@ export function BrowserIcon(props) {
     return (
         <svg width="16" height="16" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
             <path
-                fill="#000"
+                fill="currentColor"
                 fill-rule="evenodd"
                 d="M0 5a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v1.792c0 .478-.681.721-1.053.422a.52.52 0 0 1-.197-.4v-.819H1.25V11A2.75 2.75 0 0 0 4 13.75h2.135a.57.57 0 0 1 .497.312c.21.398-.055.938-.506.938H4a4 4 0 0 1-4-4zm1.262-.255h13.476A2.75 2.75 0 0 0 12 2.25H4a2.75 2.75 0 0 0-2.738 2.495"
                 clip-rule="evenodd"
             />
             <path
-                fill="#000"
+                fill="currentColor"
                 fill-rule="evenodd"
                 d="M11.5 7a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9m-1.972 7.084A3.25 3.25 0 0 1 8.288 12h.85a7.6 7.6 0 0 0 .39 2.084M8.337 10.75h.818a7.5 7.5 0 0 1 .373-1.834 3.25 3.25 0 0 0-1.191 1.834m2.495 3.233c-.226-.5-.392-1.19-.441-1.983h2.218c-.05.793-.215 1.482-.441 1.983-.299.66-.583.767-.668.767s-.37-.106-.668-.767m0-4.966c-.202.447-.356 1.045-.422 1.733h2.18c-.066-.688-.22-1.286-.422-1.733-.299-.66-.583-.767-.668-.767s-.37.106-.668.767m2.64 5.067c.213-.606.348-1.32.39-2.084h.85a3.25 3.25 0 0 1-1.24 2.084m.373-3.334h.818a3.25 3.25 0 0 0-1.19-1.834c.188.54.316 1.164.371 1.834Z"
                 clip-rule="evenodd"
@@ -416,6 +416,21 @@ export function BrowserIcon(props) {
     );
 }
 
+/**
+ * From https://dub.duckduckgo.com/duckduckgo/Icons/blob/Main/Glyphs/16px/Tab-Desktop-16.svg
+ * @param {import('preact').JSX.SVGAttributes<SVGSVGElement>} props
+ */
+export function TabDesktopIcon(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="M11 2a4 4 0 0 1 4 4v4c0 .854.39 1.617 1 2.121v.357c0 .517-.541.841-.925.495A4 4 0 0 1 13.75 10V6A2.75 2.75 0 0 0 11 3.25H5A2.75 2.75 0 0 0 2.25 6v4a4 4 0 0 1-1.325 2.973c-.384.346-.925.022-.925-.495v-.357c.61-.504 1-1.267 1-2.121V6a4 4 0 0 1 4-4z"
+            />
+        </svg>
+    );
+}
+
 /**
  * @param {import('preact').JSX.SVGAttributes<SVGSVGElement>} props
  */

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

@@ -1,11 +1,13 @@
-import { h } from 'preact';
+import { h, Fragment } from 'preact';
 import { useEffect, useId } from 'preact/hooks';
 import { SearchIcon } from '../../components/Icons.js';
 import { useTypedTranslationWith } from '../../types';
 import styles from './SearchForm.module.css';
 import { SuggestionsList } from './SuggestionsList.js';
-import { useSuggestionInput } from './useSuggestionInput.js';
+import { useCompletionInput } from './useSuggestionInput.js';
 import { useSuggestions } from './useSuggestions';
+import { useSuffixText } from './SuffixText.js';
+import { getInputSuffix } from '../utils.js';
 
 /**
  * @typedef {import('../strings.json')} Strings
@@ -30,8 +32,8 @@ export function SearchForm({ term, autoFocus, onChangeTerm, onOpenSuggestion, on
         selectedSuggestion,
         setSelectedSuggestion,
         clearSelectedSuggestion,
-        termBase,
-        termSuggestion,
+        inputBase,
+        inputCompletion,
         handleChange,
         handleKeyDown,
         handleClick,
@@ -43,7 +45,10 @@ export function SearchForm({ term, autoFocus, onChangeTerm, onOpenSuggestion, on
         onSubmitSearch,
     });
 
-    const inputRef = useSuggestionInput(termBase, termSuggestion);
+    const inputSuffix = getInputSuffix(term, selectedSuggestion);
+    const inputSuffixText = useSuffixText(inputSuffix);
+
+    const inputRef = useCompletionInput(inputBase, inputCompletion);
 
     useEffect(() => {
         if (autoFocus && inputRef.current) {
@@ -61,8 +66,8 @@ export function SearchForm({ term, autoFocus, onChangeTerm, onOpenSuggestion, on
     };
 
     return (
-        <form class={styles.form} onClick={() => inputRef.current?.focus()} onBlur={handleBlur} onSubmit={handleSubmit}>
-            <div class={styles.inputContainer}>
+        <form class={styles.form} onBlur={handleBlur} onSubmit={handleSubmit}>
+            <div class={styles.inputContainer} style={{ '--suffix-text-width': `${measureText(inputSuffixText)}px` }}>
                 <SearchIcon inert />
                 <input
                     ref={inputRef}
@@ -83,10 +88,21 @@ export function SearchForm({ term, autoFocus, onChangeTerm, onOpenSuggestion, on
                     onKeyDown={handleKeyDown}
                     onClick={handleClick}
                 />
+                {inputSuffix && (
+                    <>
+                        <span class={styles.suffixSpacer} inert>
+                            {inputBase + inputCompletion || t('omnibar_searchFormPlaceholder')}
+                        </span>
+                        <span class={styles.suffix} inert>
+                            {inputSuffixText}
+                        </span>
+                    </>
+                )}
             </div>
             {suggestions.length > 0 && (
                 <SuggestionsList
                     id={suggestionsListId}
+                    term={term}
                     suggestions={suggestions}
                     selectedSuggestion={selectedSuggestion}
                     onSelectSuggestion={setSelectedSuggestion}
@@ -97,3 +113,15 @@ export function SearchForm({ term, autoFocus, onChangeTerm, onOpenSuggestion, on
         </form>
     );
 }
+
+/**
+ * @param {string} text
+ * @returns {number}
+ */
+function measureText(text) {
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    if (!context) return 0;
+    context.font = '13px / 16px system-ui';
+    return context.measureText(text).width;
+}

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

@@ -4,6 +4,7 @@
     padding: var(--sp-1);
 
     svg {
+        flex-shrink: 0;
         margin: var(--sp-2);
     }
 }
@@ -12,11 +13,27 @@
     background: none;
     border: none;
     color: var(--ntp-text-normal);
-    flex: 1 0 0;
     height: var(--sp-8);
-    padding: 0;
+    left: var(--sp-1);
+    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);
 
     &:focus {
         outline: none;
     }
 }
+
+.suffixSpacer {
+    overflow: hidden;
+    visibility: hidden;
+    white-space: pre;
+}
+
+.suffix {
+    color: var(--ntp-color-primary);
+    flex-shrink: 0;
+}

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

@@ -0,0 +1,33 @@
+import { useTypedTranslationWith } from '../../types';
+
+/**
+ * @typedef {import('../strings.json')} Strings
+ * @typedef {import('../utils').Suffix} Suffix
+ */
+
+/**
+ * @param {Suffix} suffix
+ * @returns {string}
+ */
+export function useSuffixText(suffix) {
+    const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
+    if (!suffix) return '';
+    switch (suffix.kind) {
+        case 'searchDuckDuckGo':
+            return ' – ' + t('omnibar_searchDuckDuckGoSuffix');
+        case 'duckDuckGo':
+            return ' – ' + t('omnibar_duckDuckGoSuffix');
+        case 'visit':
+            return ' – ' + t('omnibar_visitSuffix', { url: suffix.url });
+        case 'raw':
+            return ' – ' + suffix.text;
+    }
+}
+
+/**
+ * @param {object} props
+ * @param {Suffix} props.suffix
+ */
+export function SuffixText({ suffix }) {
+    return useSuffixText(suffix);
+}

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

@@ -1,8 +1,19 @@
-import { h } from 'preact';
+import { h, Fragment } from 'preact';
 import { eventToTarget } from '../../../../../shared/handlers';
-import { BookmarkIcon, BrowserIcon, FavoriteIcon, GlobeIcon, HistoryIcon, SearchIcon } from '../../components/Icons';
+import {
+    ArrowRightIcon,
+    BookmarkIcon,
+    BrowserIcon,
+    FavoriteIcon,
+    GlobeIcon,
+    HistoryIcon,
+    SearchIcon,
+    TabDesktopIcon,
+} from '../../components/Icons';
 import { usePlatformName } from '../../settings.provider';
 import styles from './SuggestionsList.module.css';
+import { getSuggestionSuffix, getSuggestionTitle, startsWithIgnoreCase } from '../utils';
+import { SuffixText } from './SuffixText';
 
 /**
  * @typedef {import('./useSuggestions').SuggestionModel} SuggestionModel
@@ -13,17 +24,20 @@ import styles from './SuggestionsList.module.css';
 /**
  * @param {object} props
  * @param {string} props.id
+ * @param {string} props.term
  * @param {SuggestionModel[]} props.suggestions
  * @param {SuggestionModel | null} props.selectedSuggestion
  * @param {(suggestion: SuggestionModel) => void} props.onSelectSuggestion
  * @param {() => void} props.onClearSuggestion
  * @param {(params: {suggestion: Suggestion, target: OpenTarget}) => void} props.onOpenSuggestion
  */
-export function SuggestionsList({ id, suggestions, selectedSuggestion, onSelectSuggestion, onClearSuggestion, onOpenSuggestion }) {
+export function SuggestionsList({ id, term, suggestions, selectedSuggestion, onSelectSuggestion, onClearSuggestion, onOpenSuggestion }) {
     const platformName = usePlatformName();
     return (
         <div role="listbox" id={id} class={styles.list}>
             {suggestions.map((suggestion) => {
+                const title = getSuggestionTitle(suggestion, term);
+                const suffix = getSuggestionSuffix(suggestion);
                 return (
                     <button
                         key={suggestion.id}
@@ -40,7 +54,26 @@ export function SuggestionsList({ id, suggestions, selectedSuggestion, onSelectS
                         }}
                     >
                         <SuggestionIcon suggestion={suggestion} />
-                        {suggestion.title}
+                        <span class={styles.title}>
+                            {startsWithIgnoreCase(title, term) ? (
+                                <>
+                                    <b>{title.slice(0, term.length)}</b>
+                                    {title.slice(term.length)}
+                                </>
+                            ) : (
+                                title
+                            )}
+                        </span>
+                        {suffix && (
+                            <span class={styles.suffix}>
+                                <SuffixText suffix={suffix} />
+                            </span>
+                        )}
+                        {suggestion.kind === 'openTab' && (
+                            <span class={styles.badge}>
+                                Switch to Tab <ArrowRightIcon />
+                            </span>
+                        )}
                     </button>
                 );
             })}
@@ -63,6 +96,7 @@ function SuggestionIcon({ suggestion }) {
         case 'bookmark':
             return suggestion.isFavorite ? <FavoriteIcon /> : <BookmarkIcon />;
         case 'openTab':
+            return <TabDesktopIcon />;
         case 'internalPage':
             return <BrowserIcon />;
         default:

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

@@ -16,12 +16,43 @@
     justify-content: flex-start;
 
     svg {
+        flex-shrink: 0;
         margin: var(--sp-2);
     }
 
     &[aria-selected="true"] {
         background: var(--ddg-color-primary);
         border-radius: 4px;
         color: var(--color-white);
+
+        .suffix {
+            color: var(--color-white);
+        }
+    }
+}
+
+.title {
+    white-space: pre;
+}
+
+.suffix {
+    color: var(--ntp-text-muted);
+    font-size: 12px;
+}
+
+.badge {
+    align-items: center;
+    background: var(--ntp-controls-raised-backdrop);
+    border-radius: var(--border-radius-sm);
+    display: flex;
+    gap: 6px;
+    height: 22px;
+    margin-left: auto;
+    padding: 0px var(--sp-3);
+
+    svg {
+        height: 9px;
+        margin: 0;
+        width: 9px;
     }
 }

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

@@ -2,19 +2,19 @@ import { useLayoutEffect, useRef } from 'preact/hooks';
 
 /**
  * @param {string} base
- * @param {string} suggestion
+ * @param {string} completion
  */
-export function useSuggestionInput(base, suggestion) {
+export function useCompletionInput(base, completion) {
     const ref = useRef(/** @type {HTMLInputElement|null} */ (null));
 
     useLayoutEffect(() => {
         if (!ref.current) return;
-        const value = base + suggestion;
+        const value = base + completion;
         ref.current.value = value;
-        if (suggestion) {
+        if (completion) {
             ref.current.setSelectionRange(base.length, value.length);
         }
-    }, [base, suggestion]);
+    }, [base, completion]);
 
     return ref;
 }