Release build 10.18.0 [ci release]

Author: jonathanKingston

CHANGELOG.txt

@@ -1,3 +1,6 @@
-- NTP: Improve TabSwitcher hover interactions and visual design (#1853)
-- Update AI chat and search placeholders and add Duck.ai toggle labels in (#1852)
-- Fix WebKit blur event bug in omnibar components (#1851)
+- NTP: Address omnibar design feedback (#1860)
+- Fix disappearing search icon in WebKit (#1858)
+- Add building tips (#1807)
+- build(deps-dev): bump eslint from 9.31.0 to 9.32.0 in the eslint group (#1854)
+- build(deps-dev): bump wait-on from 8.0.3 to 8.0.4 (#1856)
+- build(deps-dev): bump typedoc in the typescript group (#1855)

CODEOWNERS

@@ -1,7 +1,7 @@
 * @duckduckgo/content-scope-scripts-owners
 
 # Documentation - anyone can edit
-injected/docs/ *
+injected/docs/
 
 # Feature owners
 injected/src/features/fingerprinting-* @duckduckgo/content-scope-scripts-owners @jonathanKingston @englehardt

Sources/ContentScopeScripts/dist/pages/new-tab/dist/index.css

@@ -1468,7 +1468,7 @@ body:not([data-platform-name]) .Button_button:active {
   align-items: center;
   display: flex;
   flex-direction: column;
-  padding-bottom: calc(14px + 9px + var(--sp-7));
+  padding-bottom: calc(var(--sp-3) + var(--sp-7) + var(--sp-3));
 }
 .AiChatForm_textarea {
   align-self: stretch;
@@ -1496,13 +1496,10 @@ body:not([data-platform-name]) .Button_button:active {
   bottom: 0;
   justify-content: space-between;
   left: 0;
-  padding: 14px 9px 9px;
+  padding: var(--sp-3);
   position: absolute;
   right: 0;
 }
-.AiChatForm_hasScroll .AiChatForm_buttons {
-  padding-top: 9px;
-}
 .AiChatForm_submitButton {
   align-items: center;
   background: var(--color-blue-50);
@@ -1533,7 +1530,7 @@ body:not([data-platform-name]) .Button_button:active {
 }
 .Container_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;
@@ -1546,14 +1543,12 @@ body:not([data-platform-name]) .Button_button:active {
 }
 .Container_inner:not(:has([role=listbox])).Container_focusRing,
 .Container_inner:not(:has([role=listbox])):focus-within:not(.Container_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);
+    0 0 0 5px rgba(57, 105, 239, 0.2);
 }
 .Container_inner: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),
@@ -1577,10 +1572,10 @@ body:not([data-platform-name]) .Button_button:active {
 .SearchForm_inputContainer {
   align-items: center;
   display: flex;
-  padding: var(--sp-1);
+  padding: var(--sp-1) 7px;
 }
 .SearchForm_inputContainer svg {
-  flex-shrink: 0;
+  flex: none;
   margin: var(--sp-2);
 }
 .SearchForm_input {
@@ -1589,13 +1584,13 @@ body:not([data-platform-name]) .Button_button:active {
   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;
 }
 .SearchForm_input::placeholder {
   color: var(--ntp-text-muted);
@@ -1604,13 +1599,14 @@ body:not([data-platform-name]) .Button_button:active {
   outline: none;
 }
 .SearchForm_suffixSpacer {
+  font-weight: 500;
   overflow: hidden;
   visibility: hidden;
-  white-space: pre;
+  white-space: nowrap;
 }
 .SearchForm_suffix {
   color: var(--ntp-color-primary);
-  flex-shrink: 0;
+  flex: none;
 }
 
 /* pages/new-tab/app/omnibar/components/SuggestionsList.module.css */
@@ -1623,37 +1619,56 @@ body:not([data-platform-name]) .Button_button:active {
 .SuggestionsList_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;
 }
 .SuggestionsList_item svg {
-  flex-shrink: 0;
+  flex: none;
   margin: var(--sp-2);
 }
-.SuggestionsList_item[aria-selected=true] {
-  background: var(--ddg-color-primary);
-  border-radius: 4px;
+.SuggestionsList_item[aria-selected=true],
+.SuggestionsList_item:active {
   color: var(--color-white);
 }
-.SuggestionsList_item[aria-selected=true] .SuggestionsList_suffix {
+:is(.SuggestionsList_item[aria-selected=true], .SuggestionsList_item:active) .SuggestionsList_suffix {
   color: var(--color-white);
 }
+:is(.SuggestionsList_item[aria-selected=true], .SuggestionsList_item:active) .SuggestionsList_badge {
+  background: var(--color-white-at-30);
+}
+.SuggestionsList_item[aria-selected=true] {
+  background: var(--ddg-color-primary);
+}
+.SuggestionsList_item:active {
+  background: var(--color-blue-60);
+}
 .SuggestionsList_title {
-  white-space: pre;
+  flex: none;
+  max-width: 60%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .SuggestionsList_suffix {
   color: var(--ntp-text-muted);
+  flex: initial;
   font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .SuggestionsList_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;
@@ -1692,6 +1707,7 @@ body:not([data-platform-name]) .Button_button:active {
   justify-content: center;
   padding: 0 var(--sp-3);
   position: relative;
+  transform: translateZ(0);
   z-index: 1;
 }
 .TabSwitcher_tab:hover:not([aria-selected=true])::before {
@@ -1722,6 +1738,7 @@ body:not([data-platform-name]) .Button_button:active {
   translate: calc(2px + var(--tab-index) * (100% + 2px));
   width: calc((100% - 4px - (var(--tab-count) - 1) * 2px) / var(--tab-count));
   will-change: translate;
+  z-index: 0;
 }
 [data-theme=dark] .TabSwitcher_blob {
   box-shadow:

Sources/ContentScopeScripts/dist/pages/new-tab/dist/index.js

@@ -7771,6 +7771,19 @@
         textAreaRef.current.focus();
       }
     }, [autoFocus]);
+    _2(() => {
+      const textArea = textAreaRef.current;
+      const form = formRef.current;
+      if (!textArea || !form) return;
+      const { paddingTop, paddingBottom } = window.getComputedStyle(textArea);
+      textArea.style.height = "auto";
+      textArea.style.height = `calc(${textArea.scrollHeight}px - ${paddingTop} - ${paddingBottom})`;
+      if (textArea.scrollHeight > textArea.clientHeight) {
+        form.classList.add(AiChatForm_default.hasScroll);
+      } else {
+        form.classList.remove(AiChatForm_default.hasScroll);
+      }
+    }, [chat]);
     const disabled = chat.length === 0;
     const handleSubmit = (event) => {
       event.preventDefault();
@@ -7799,19 +7812,6 @@
         target: eventToTarget2(event, platformName)
       });
     };
-    const handleChange = (event) => {
-      const form = formRef.current;
-      const textArea = event.currentTarget;
-      const { paddingTop, paddingBottom } = window.getComputedStyle(textArea);
-      textArea.style.height = "auto";
-      textArea.style.height = `calc(${textArea.scrollHeight}px - ${paddingTop} - ${paddingBottom})`;
-      if (textArea.scrollHeight > textArea.clientHeight) {
-        form?.classList.add(AiChatForm_default.hasScroll);
-      } else {
-        form?.classList.remove(AiChatForm_default.hasScroll);
-      }
-      onChange(textArea.value);
-    };
     return /* @__PURE__ */ _("form", { ref: formRef, class: AiChatForm_default.form, onClick: () => textAreaRef.current?.focus(), onSubmit: handleSubmit }, /* @__PURE__ */ _(
       "textarea",
       {
@@ -7826,7 +7826,7 @@
         onBlurCapture: onBlur,
         onInput,
         onKeyDown: handleKeyDown,
-        onChange: handleChange
+        onChange: (event) => onChange(event.currentTarget.value)
       }
     ), /* @__PURE__ */ _("div", { class: AiChatForm_default.buttons }, /* @__PURE__ */ _(
       "button",
@@ -7949,8 +7949,8 @@
         list: "SuggestionsList_list",
         item: "SuggestionsList_item",
         suffix: "SuggestionsList_suffix",
-        title: "SuggestionsList_title",
-        badge: "SuggestionsList_badge"
+        badge: "SuggestionsList_badge",
+        title: "SuggestionsList_title"
       };
     }
   });
@@ -8525,7 +8525,7 @@
     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(text2).width;
   }
   var init_SearchForm2 = __esm({
@@ -8628,7 +8628,7 @@
       SearchForm,
       {
         key: `search-${resetKey}`,
-        term: query,
+        term: query.replace(/\n/g, ""),
         autoFocus,
         onChangeTerm: setQuery,
         onOpenSuggestion: handleOpenSuggestion,