Merge branch 'main' into dependabot/npm_and_yarn/main/stylelint-6979e71028

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)
 

injected/unit-test/dependency-format.spec.js

@@ -0,0 +1,14 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+describe('Dependency format check', () => {
+    it('should use a 13-digit numeric tag (not a commit hash or short hash) for @duckduckgo/privacy-configuration', () => {
+        const __filename = fileURLToPath(import.meta.url);
+        const __dirname = path.dirname(__filename);
+        const pkg = JSON.parse(fs.readFileSync(path.join(__dirname, '../package.json'), 'utf-8'));
+        const dep = pkg.dependencies['@duckduckgo/privacy-configuration'];
+        // Only allow 13-digit numeric tags and not a commit hash or short hash
+        expect(dep).toMatch(/^github:duckduckgo\/privacy-configuration#\d{13}$/);
+    });
+});

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/components/Icons.js

@@ -170,7 +170,7 @@ export function BackChevron() {
  */
 export function SearchIcon(props) {
     return (
-        <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <svg width="16" height="16" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
             <g clip-path="url(#Find-Search-16_svg__a)">
                 <path
                     fill="currentColor"
@@ -194,7 +194,7 @@ export function SearchIcon(props) {
  */
 export function SearchColorIcon(props) {
     return (
-        <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <svg width="16" height="16" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
             <g clip-path="url(#Search-Find-Color-16_svg__a)">
                 <path fill="#ADC2FC" d="M12 7A5 5 0 1 1 2 7a5 5 0 0 1 10 0Z" />
                 <path fill="#fff" d="M7 2a4.98 4.98 0 0 1 3.403 1.338 5.5 5.5 0 0 0-7.065 7.065A5 5 0 0 1 7 2Z" opacity=".5" />
@@ -218,7 +218,7 @@ export function SearchColorIcon(props) {
  */
 export function AiChatIcon(props) {
     return (
-        <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <svg width="16" height="16" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
             <g fill="currentColor" clip-path="url(#Ai-Chat-16_svg__a)">
                 <path
                     fill-rule="evenodd"
@@ -242,7 +242,7 @@ export function AiChatIcon(props) {
  */
 export function AiChatColorIcon(props) {
     return (
-        <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <svg width="16" height="16" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
             <g clip-path="url(#Ai-Chat-Gradient-Color-16_svg__a)">
                 <path
                     fill="url(#Ai-Chat-Gradient-Color-16_svg__b)"
@@ -292,7 +292,7 @@ export function AiChatColorIcon(props) {
  */
 export function ArrowRightIcon(props) {
     return (
-        <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <svg width="16" height="16" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
             <path
                 fill="currentColor"
                 d="M8.187 1.689a.625.625 0 0 1 .885-.884l5.31 5.316c.83.83.83 2.174 0 3.004l-5.31 5.315a.625.625 0 0 1-.885-.884l5.305-5.308H.625a.625.625 0 1 1 0-1.25h12.867z"
@@ -307,7 +307,7 @@ export function ArrowRightIcon(props) {
  */
 export function GlobeIcon(props) {
     return (
-        <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <svg width="16" height="16" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
             <g clip-path="url(#Globe-16_svg__a)">
                 <path
                     fill="currentColor"
@@ -331,7 +331,7 @@ export function GlobeIcon(props) {
  */
 export function HistoryIcon(props) {
     return (
-        <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <svg width="16" height="16" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
             <g fill="currentColor" clip-path="url(#History-16_svg__a)">
                 <path d="m2.072 4.918-.08-.004A6.753 6.753 0 1 1 1.246 8 .623.623 0 1 0 0 8a8 8 0 1 0 1.247-4.29V1.115a.623.623 0 0 0-1.247 0v2.977c0 1.145.928 2.072 2.072 2.072h2.486a.623.623 0 0 0 0-1.246z" />
                 <path d="M8.625 3.625a.625.625 0 1 0-1.25 0V8c0 .166.066.325.183.442l2.375 2.375a.625.625 0 1 0 .884-.884L8.625 7.741z" />
@@ -351,7 +351,7 @@ export function HistoryIcon(props) {
  */
 export function FavoriteIcon(props) {
     return (
-        <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <svg width="16" height="16" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
             <g clip-path="url(#Favorite-16_svg__a)">
                 <path
                     fill="currentColor"
@@ -375,7 +375,7 @@ export function FavoriteIcon(props) {
  */
 export function BookmarkIcon(props) {
     return (
-        <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <svg width="16" height="16" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
             <g clip-path="url(#Bookmark-16_svg__a)">
                 <path
                     fill="currentColor"
@@ -399,15 +399,15 @@ export function BookmarkIcon(props) {
  */
 export function BrowserIcon(props) {
     return (
-        <svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <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/customizer/CustomizerProvider.js

@@ -14,6 +14,14 @@ import { applyDefaultStyles } from './utils.js';
  * @typedef {import('../service.hooks.js').Events<CustomizerData, undefined>} Events
  */
 
+/**
+ * @typedef {{
+ *   title: string,
+ *   icon: import('preact').ComponentChild,
+ *   onClick: () => void,
+ * }} SettingsLinkData
+ */
+
 /**
  * These are the values exposed to consumers.
  */
@@ -47,6 +55,10 @@ export const CustomizerContext = createContext({
      * @param {UserImageContextMenu} _params
      */
     customizerContextMenu: (_params) => {},
+    /**
+     * @type {import('@preact/signals').Signal<Record<string, SettingsLinkData>>}
+     */
+    settingsLinks: signal({}),
 });
 
 /**
@@ -126,8 +138,11 @@ export function CustomizerProvider({ service, initialData, children }) {
     /** @type {(p: UserImageContextMenu) => void} */
     const customizerContextMenu = useCallback((params) => service.contextMenu(params), [service]);
 
+    /** @type {import('@preact/signals').Signal<Record<string, SettingsLinkData>>} */
+    const settingsLinks = useSignal({});
+
     return (
-        <CustomizerContext.Provider value={{ data, select, upload, setTheme, deleteImage, customizerContextMenu }}>
+        <CustomizerContext.Provider value={{ data, select, upload, setTheme, deleteImage, customizerContextMenu, settingsLinks }}>
             <CustomizerThemesContext.Provider value={{ main, browser }}>{children}</CustomizerThemesContext.Provider>
         </CustomizerContext.Provider>
     );

special-pages/pages/new-tab/app/customizer/components/CustomizerDrawer.js

@@ -13,7 +13,7 @@ export function CustomizerDrawer({ displayChildren }) {
 }
 
 function CustomizerConsumer() {
-    const { data, select, upload, setTheme, deleteImage, customizerContextMenu } = useContext(CustomizerContext);
+    const { data, select, upload, setTheme, deleteImage, customizerContextMenu, settingsLinks } = useContext(CustomizerContext);
     return (
         <CustomizerDrawerInner
             data={data}
@@ -22,6 +22,7 @@ function CustomizerConsumer() {
             setTheme={setTheme}
             deleteImage={deleteImage}
             customizerContextMenu={customizerContextMenu}
+            settingsLinks={settingsLinks}
         />
     );
 }

special-pages/pages/new-tab/app/customizer/components/CustomizerDrawerInner.js

@@ -13,10 +13,12 @@ import { BorderedSection, CustomizerSection } from './CustomizerSection.js';
 import { SettingsLink } from './SettingsLink.js';
 import { DismissButton } from '../../components/DismissButton.jsx';
 import { InlineErrorBoundary } from '../../InlineErrorBoundary.js';
-import { useTypedTranslationWith } from '../../types.js';
+import { useMessaging, useTypedTranslationWith } from '../../types.js';
+import { Open } from '../../components/icons/Open.js';
 
 /**
  * @import { Widgets, WidgetConfigItem, WidgetVisibility, VisibilityMenuItem, CustomizerData, BackgroundData, UserImageContextMenu } from '../../../types/new-tab.js'
+ * @import { SettingsLinkData } from '../CustomizerProvider';
  * @import enStrings from '../strings.json';
  */
 
@@ -28,10 +30,12 @@ import { useTypedTranslationWith } from '../../types.js';
  * @param {(theme: import('../../../types/new-tab').ThemeData) => void} props.setTheme
  * @param {(id: string) => void} props.deleteImage
  * @param {(p: UserImageContextMenu) => void} props.customizerContextMenu
+ * @param {import('@preact/signals').Signal<Record<string, SettingsLinkData>>} props.settingsLinks
  */
-export function CustomizerDrawerInner({ data, select, onUpload, setTheme, deleteImage, customizerContextMenu }) {
+export function CustomizerDrawerInner({ data, select, onUpload, setTheme, deleteImage, customizerContextMenu, settingsLinks }) {
     const { close } = useDrawerControls();
     const { t } = useTypedTranslationWith(/** @type {enStrings} */ ({}));
+    const messaging = useMessaging();
     return (
         <div class={styles.root}>
             <header class={cn(styles.header, styles.internal)}>
@@ -65,7 +69,14 @@ export function CustomizerDrawerInner({ data, select, onUpload, setTheme, delete
                                 <VisibilityMenuSection />
                             </CustomizerSection>
                             <BorderedSection>
-                                <SettingsLink />
+                                {Object.entries(settingsLinks.value).map(([key, link]) => (
+                                    <SettingsLink key={key} title={link.title} icon={link.icon} onClick={() => link.onClick()} />
+                                ))}
+                                <SettingsLink
+                                    title={t('customizer_settings_link')}
+                                    icon={<Open />}
+                                    onClick={() => messaging.open({ target: 'settings' })}
+                                />
                             </BorderedSection>
                         </div>
                     )}

special-pages/pages/new-tab/app/customizer/components/CustomizerDrawerInner.module.css

@@ -257,11 +257,12 @@
     align-items: center;
     text-decoration: none;
     color: var(--ntp-color-primary);
+    margin-bottom: var(--sp-3);
 
     &:focus {
         outline: none;
     }
     &:focus-visible {
         text-decoration: underline;
     }
-}
+}