NTP: Fix input styling on Windows (#1862)

* Add Windows-specific text selection styling

* Reduce input font weight to 400 on Windows

Author: noisysocks

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

@@ -11,15 +11,23 @@
     border: none;
     box-sizing: content-box;
     color: var(--ntp-text-normal);
-    font-weight: 500;
     max-height: 10lh;
     padding: 11px 15px 0;
     resize: none;
 
+    [data-platform="macos"] & {
+        font-weight: 500;
+    }
+
     &::placeholder {
         color: var(--ntp-text-muted);
     }
 
+    [data-platform="windows"] &::selection {
+        background: var(--ntp-selection-background-color);
+        color: var(--ntp-selection-color);
+    }
+
     &:focus {
         outline: none;
     }

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

@@ -1,5 +1,5 @@
 import { h, Fragment } from 'preact';
-import { useEffect, useId } from 'preact/hooks';
+import { useEffect, useId, useMemo } from 'preact/hooks';
 import { SearchIcon, GlobeIcon } from '../../components/Icons.js';
 import { useTypedTranslationWith } from '../../types';
 import styles from './SearchForm.module.css';
@@ -8,6 +8,7 @@ import { useCompletionInput } from './useSuggestionInput.js';
 import { useSuggestions } from './useSuggestions';
 import { useSuffixText } from './SuffixText.js';
 import { getInputSuffix } from '../utils.js';
+import { usePlatformName } from '../../settings.provider.js';
 
 /**
  * @typedef {import('../strings.json')} Strings
@@ -26,6 +27,7 @@ import { getInputSuffix } from '../utils.js';
 export function SearchForm({ term, autoFocus, onChangeTerm, onOpenSuggestion, onSubmitSearch }) {
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
     const suggestionsListId = useId();
+    const platformName = usePlatformName();
 
     const {
         suggestions,
@@ -45,10 +47,12 @@ export function SearchForm({ term, autoFocus, onChangeTerm, onOpenSuggestion, on
         onSubmitSearch,
     });
 
+    const inputRef = useCompletionInput(inputBase, inputCompletion);
+
     const inputSuffix = getInputSuffix(term, selectedSuggestion);
     const inputSuffixText = useSuffixText(inputSuffix);
-
-    const inputRef = useCompletionInput(inputBase, inputCompletion);
+    const inputFont = platformName === 'windows' ? '400 13px / 16px system-ui' : '500 13px / 16px system-ui';
+    const inputSuffixWidth = useMemo(() => measureText(inputSuffixText, inputFont), [inputSuffixText, inputFont]);
 
     useEffect(() => {
         if (autoFocus && inputRef.current) {
@@ -72,7 +76,7 @@ export function SearchForm({ term, autoFocus, onChangeTerm, onOpenSuggestion, on
             onBlurCapture={handleBlur}
             onSubmit={handleSubmit}
         >
-            <div class={styles.inputContainer} style={{ '--suffix-text-width': `${measureText(inputSuffixText)}px` }}>
+            <div class={styles.inputContainer} style={{ '--input-font': inputFont, '--suffix-text-width': `${inputSuffixWidth}px` }}>
                 {inputSuffix?.kind === 'visit' ? <GlobeIcon inert /> : <SearchIcon inert />}
                 <input
                     ref={inputRef}
@@ -121,12 +125,14 @@ export function SearchForm({ term, autoFocus, onChangeTerm, onOpenSuggestion, on
 
 /**
  * @param {string} text
+ * @param {string} font
  * @returns {number}
  */
-function measureText(text) {
+function measureText(text, font) {
+    if (!text) return 0;
     const canvas = document.createElement('canvas');
     const context = canvas.getContext('2d');
-    if (!context) return 0;
-    context.font = '500 13px / 16px system-ui';
+    if (!context) throw new Error('Failed to get canvas context');
+    context.font = font;
     return context.measureText(text).width;
 }

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

@@ -13,7 +13,7 @@
     background: none;
     border: none;
     color: var(--ntp-text-normal);
-    font-weight: 500;
+    font: var(--input-font);
     height: var(--sp-8);
     left: 7px;
     padding-bottom: 0;
@@ -27,13 +27,18 @@
         color: var(--ntp-text-muted);
     }
 
+    [data-platform="windows"] &::selection {
+        background: var(--ntp-selection-background-color);
+        color: var(--ntp-selection-color);
+    }
+
     &:focus {
         outline: none;
     }
 }
 
 .suffixSpacer {
-    font-weight: 500;
+    font: var(--input-font);
     overflow: hidden;
     visibility: hidden;
     white-space: nowrap;
@@ -42,4 +47,5 @@
 .suffix {
     color: var(--ntp-color-primary);
     flex: none;
+    font: var(--input-font);
 }

special-pages/pages/new-tab/app/styles/ntp-theme.css

@@ -58,6 +58,8 @@ body {
     --ntp-surface-tertiary: var(--color-white);
     --ntp-controls-raised-backdrop: var(--color-black-at-9);
     --ntp-controls-raised-fill-primary: var(--color-white);
+    --ntp-selection-color: var(--color-white);
+    --ntp-selection-background-color: #3A69EF;
 }
 
 [data-theme=dark] {
@@ -75,6 +77,8 @@ body {
     --ntp-surface-tertiary: rgba(71, 71, 71, 0.66);
     --ntp-controls-raised-backdrop: var(--color-black-at-60);
     --ntp-controls-raised-fill-primary: var(--color-white-at-18);
+    --ntp-selection-color: var(--color-white);
+    --ntp-selection-background-color: var(--color-blue-30);
 }
 
 /* This comes from the application settings */