ntp: support big sur (#1380)

* ntp: support big sur

* Fixing favorites grid on big sur

* fixing privacy stats layout

* don't use aspect ratio

* fixing outlines

Author: shakyShane

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

@@ -31,7 +31,7 @@ export function App() {
     // prettier-ignore
     const {
         buttonRef,
-        wrapperRef,
+        asideRef,
         visibility,
         displayChildren,
         animating,
@@ -47,8 +47,8 @@ export function App() {
     return (
         <Fragment>
             <BackgroundConsumer browser={browser} />
-            <div class={styles.layout} ref={wrapperRef} data-animating={animating} data-drawer-visibility={visibility}>
-                <main class={cn(styles.main, styles.mainScroller)} data-main-scroller data-theme={main}>
+            <div class={styles.layout} data-animating={animating} data-drawer-visibility={visibility}>
+                <main class={cn(styles.main, styles.mainLayout, styles.mainScroller)} data-main-scroller data-theme={main}>
                     <div class={styles.content}>
                         <div className={styles.tube} data-content-tube data-platform={platformName}>
                             <WidgetList />
@@ -69,11 +69,12 @@ export function App() {
                 </main>
                 {customizerKind === 'drawer' && (
                     <aside
-                        class={cn(styles.aside, styles.asideScroller)}
+                        class={cn(styles.aside, styles.asideLayout, styles.asideScroller)}
                         tabindex={tabIndex}
                         aria-hidden={hidden}
                         data-theme={browser}
                         data-browser-panel
+                        ref={asideRef}
                     >
                         <div class={styles.asideContent}>
                             <InlineErrorBoundary

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

@@ -28,7 +28,8 @@ body:has([data-reset-layout="true"]) .tube {
 }
 
 :global(.vertical-space) {
-    padding-block: 1rem;
+    padding-top: 1rem;
+    padding-bottom: 1rem;
 }
 
 /** Don't affect layout if empty (eg: if a widget was toggled) **/
@@ -37,16 +38,8 @@ body:has([data-reset-layout="true"]) .tube {
 }
 
 .layout {
-    display: grid;
-    grid-template-columns: auto 0 0;
-    grid-template-areas: "main gap aside";
-    transition: all .3s ease-in-out;
     position: relative;
     z-index: 1;
-
-    &[data-drawer-visibility='visible'] {
-        grid-template-columns: auto 4px var(--ntp-combined-width);
-    }
 }
 
 .main {
@@ -56,6 +49,14 @@ body:has([data-reset-layout="true"]) .tube {
     color: var(--ntp-text-normal);
 }
 
+.mainLayout {
+    padding-right: 0;
+    transition: padding-right .3s;
+    [data-drawer-visibility='visible'] & {
+        padding-right: var(--ntp-combined-width);
+    }
+}
+
 .mainScroller {
     &::-webkit-scrollbar {
         width: 4px;
@@ -82,6 +83,7 @@ body:has([data-reset-layout="true"]) .tube {
     height: 100vh;
     z-index: 1;
     overflow: auto;
+    width: var(--ntp-combined-width);
 
     /** todo: is this re-usable in any way, or unique? */
     box-shadow: 0px 0px 1px 0px #FFF inset, 0px 0px 2px 0px rgba(0, 0, 0, 0.08), 0px 8px 12px 0px rgba(0, 0, 0, 0.12);
@@ -100,6 +102,19 @@ body:has([data-reset-layout="true"]) .tube {
     }
 }
 
+.asideLayout {
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 1;
+    transform: translateX(100%);
+    transition: transform .3s;
+
+    [data-drawer-visibility="visible"] & {
+        transform: translateX(0)
+    }
+}
+
 .asideContent {
     opacity: 1;
     width: var(--ntp-drawer-width);

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

@@ -6,7 +6,6 @@ import { useMessaging } from '../types.js';
 const CLOSE_DRAWER_EVENT = 'close-drawer';
 const TOGGLE_DRAWER_EVENT = 'toggle-drawer';
 const OPEN_DRAWER_EVENT = 'open-drawer';
-const REQUEST_VISIBILITY_EVENT = 'request-visibility';
 
 /**
  * @typedef {'hidden' | 'visible'} DrawerVisibility
@@ -21,8 +20,8 @@ const REQUEST_VISIBILITY_EVENT = 'request-visibility';
  *  - 3: we provide a way for child components to render AFTER animations have ended, again for performance.
  * @param {DrawerVisibility} initial
  * @return {{
- *     wrapperRef: import("preact").RefObject<HTMLDivElement>,
  *     buttonRef: import("preact").RefObject<HTMLButtonElement>,
+ *     asideRef: import("preact").RefObject<HTMLDivElement>,
  *     visibility: import("@preact/signals").Signal<DrawerVisibility>,
  *     buttonId: string,
  *     drawerId: string,
@@ -33,7 +32,7 @@ const REQUEST_VISIBILITY_EVENT = 'request-visibility';
  */
 export function useDrawer(initial) {
     const { isReducedMotion } = useEnv();
-    const wrapperRef = useRef(/** @type {HTMLDivElement|null} */ (null));
+    const asideRef = useRef(/** @type {HTMLDivElement|null} */ (null));
     const buttonRef = useRef(/** @type {HTMLButtonElement|null} */ (null));
 
     // id's for accessibility
@@ -55,8 +54,8 @@ export function useDrawer(initial) {
     // react to the global API events
     useLayoutEffect(() => {
         const controller = new AbortController();
-        const wrapper = wrapperRef.current;
-        if (!wrapper) return;
+        const aside = asideRef.current;
+        if (!aside) return;
 
         /**
          * @param {DrawerVisibility} value
@@ -81,17 +80,8 @@ export function useDrawer(initial) {
         window.addEventListener(TOGGLE_DRAWER_EVENT, toggle, { signal: controller.signal });
         window.addEventListener(OPEN_DRAWER_EVENT, open, { signal: controller.signal });
 
-        // allow anywhere in the application to read the current state
-        wrapper.addEventListener(
-            REQUEST_VISIBILITY_EVENT,
-            (/** @type {CustomEvent} */ e) => {
-                e.detail.value = visibility.value;
-            },
-            { signal: controller.signal },
-        );
-
         // update `displayChildren` when animations complete.
-        wrapper?.addEventListener(
+        aside?.addEventListener(
             'transitionend',
             (e) => {
                 // ignore child animations
@@ -111,12 +101,15 @@ export function useDrawer(initial) {
         );
 
         // set animating = true when a parent transition starts
-        wrapper?.addEventListener(
+        aside?.addEventListener(
             'transitionstart',
             (e) => {
                 // ignore child animations
                 if (e.target !== e.currentTarget) return;
-                animating.value = true;
+                batch(() => {
+                    animating.value = true;
+                    displayChildren.value = true;
+                });
             },
             { signal: controller.signal },
         );
@@ -141,14 +134,14 @@ export function useDrawer(initial) {
     }, [initial, ntp]);
 
     return {
-        wrapperRef,
         buttonRef,
         visibility,
         displayChildren,
         buttonId,
         drawerId,
         hidden,
         animating,
+        asideRef,
     };
 }
 

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

@@ -16,13 +16,11 @@
     border-radius: 50%;
 
     &[aria-checked="true"] {
-        outline: 2px solid var(--ntp-color-primary);
-        outline-offset: 2px;
+        box-shadow: var(--focus-ring-primary);
     }
 
     &:focus-visible {
-        outline: 2px solid var(--ntp-focus-outline-color);
-        outline-offset: 2px;
+        box-shadow: var(--focus-ring-primary);
     }
 
     &:active {

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

@@ -102,7 +102,8 @@
 }
 .bgPanel {
     display: grid;
-    aspect-ratio: 16/10.6;
+    width: 100%;
+    height: 4rem;
     border-radius: 4px;
     align-items: center;
     justify-content: center;
@@ -111,12 +112,11 @@
     box-shadow: 0 0 0 1px var(--ntp-surface-border-color) inset;
 
     &[aria-checked="true"] {
-        outline: 2px solid var(--ntp-color-primary);
-        outline-offset: 2px;
+        box-shadow: var(--focus-ring-primary);
     }
+
     &:focus-visible {
-        outline: 2px solid var(--ntp-focus-outline-color);
-        outline-offset: 2px;
+        box-shadow: var(--focus-ring-primary);
     }
 
     &:active {

special-pages/pages/new-tab/app/favorites/components/Favorites.js

@@ -23,7 +23,7 @@ export const ROW_CAPACITY = 6;
 /**
  * Note: These values MUST match exactly what's defined in the CSS.
  */
-const ITEM_HEIGHT = 98;
+const ITEM_HEIGHT = 90;
 const ROW_GAP = 8;
 
 /**

special-pages/pages/new-tab/app/favorites/components/PragmaticDND.js

@@ -230,7 +230,7 @@ export function useItemState(url, id) {
                         },
                     );
                 },
-                getIsSticky: () => true,
+                getIsSticky: () => false,
                 canDrop: ({ source }) => {
                     return source.data.instanceId === instanceId && source.data.type === 'grid-item' && source.data.id !== id;
                 },

special-pages/pages/new-tab/app/favorites/components/Tile.js

@@ -90,7 +90,7 @@ function ImageLoader({ faviconSrc, faviconMax, title, url }) {
     return (
         <img
             src={src}
-            className={styles.favicon}
+            class={styles.favicon}
             alt={`favicon for ${title}`}
             onLoad={imgLoaded}
             onError={imgError}
@@ -122,8 +122,8 @@ export function Placeholder() {
     const id = useId();
     const { state, ref } = useItemState(`PLACEHOLDER-URL-${id}`, `PLACEHOLDER-ID-${id}`);
     return (
-        <div className={styles.item} ref={ref} data-edge={'closestEdge' in state && state.closestEdge}>
-            <div className={cn(styles.icon, styles.placeholder)} />
+        <div class={styles.item} ref={ref} data-edge={'closestEdge' in state && state.closestEdge}>
+            <div class={cn(styles.icon, styles.placeholder)} />
             {state.type === 'is-dragging-over' && state.closestEdge ? <div class={styles.dropper} data-edge={state.closestEdge} /> : null}
         </div>
     );

special-pages/pages/new-tab/app/favorites/components/Tile.module.css

@@ -1,13 +1,11 @@
 .item {
-    display: grid;
-    grid-row-gap: calc(6 * var(--px-in-rem));
-    align-content: center;
-    justify-content: center;
+    display: block;
     position: relative;
     text-decoration: none;
     color: currentColor;
-    padding-inline: var(--sp-3);
     outline: none;
+    padding-left: var(--sp-3);
+    padding-right: var(--sp-3);
 
     &:focus-visible .icon {
         box-shadow: var(--focus-ring);
@@ -33,6 +31,7 @@
     justify-items: center;
     width: 4rem;
     height: 4rem;
+    margin-bottom: 4px;
     border-radius: var(--border-radius-lg);
 }
 
@@ -92,9 +91,8 @@
 .text {
     text-align: center;
     font-size: calc(10 * var(--px-in-rem));
-    line-height: calc(13 * var(--px-in-rem));
+    line-height: 1.1;
     font-weight: 400;
-    min-height: 2.8em;
     overflow: hidden;
     text-overflow: ellipsis;
     line-clamp: 2;

special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.module.css

@@ -26,15 +26,12 @@
     grid-template-columns: 1.5rem auto 2rem;
     grid-column-gap: var(--sp-2);
     grid-row-gap: var(--sp-1);
-    grid-template-rows: auto;
-    grid-template-areas: 'icon title expander';
-}
-.heading:has(.subtitle) {
     grid-template-rows: auto auto;
     grid-template-areas:
         'icon title expander'
         'empty label label';
 }
+
 .headingIcon {
     grid-area: icon;
     width: 1.5rem;