Release build 7.24.0 [ci release]

Author: shakyShane

.github/workflows/build-pr.yml

@@ -15,10 +15,10 @@ jobs:
             - name: Checkout repository
               uses: actions/checkout@v4
 
-            - name: Use Node.js 20
+            - name: Use Node.js
               uses: actions/setup-node@v4
               with:
-                  node-version: 20.x
+                  node-version-file: '.nvmrc'
             - uses: actions/cache@v4
               with:
                   path: ~/.npm

.github/workflows/build.yml

@@ -15,7 +15,7 @@ jobs:
             - uses: actions/checkout@v4
             - uses: actions/setup-node@v4
               with:
-                  node-version: 20
+                  node-version-file: '.nvmrc'
                   cache: 'npm'
 
             - name: Fetch files and ensure branches exist

.github/workflows/tests.yml

@@ -20,10 +20,10 @@ jobs:
                 os: [ubuntu-latest, windows-latest]
         steps:
             - uses: actions/checkout@v4
-            - name: Use Node.js 20
+            - name: Use Node.js
               uses: actions/setup-node@v4
               with:
-                  node-version: 20.x
+                  node-version-file: '.nvmrc'
             - uses: actions/cache@v4
               with:
                   path: ~/.npm
@@ -42,10 +42,10 @@ jobs:
         timeout-minutes: 10
         steps:
             - uses: actions/checkout@v4
-            - name: Use Node.js 20
+            - name: Use Node.js
               uses: actions/setup-node@v4
               with:
-                  node-version: 20.x
+                  node-version-file: '.nvmrc'
             - uses: actions/cache@v4
               with:
                   path: ~/.npm
@@ -85,10 +85,10 @@ jobs:
             url: ${{ steps.deployment.outputs.page_url }}
         steps:
             - uses: actions/checkout@v4
-            - name: Use Node.js 20
+            - name: Use Node.js
               uses: actions/setup-node@v4
               with:
-                  node-version: 20.x
+                  node-version-file: '.nvmrc'
             - name: Cache build outputs
               id: docs-output
               uses: actions/cache@v4

.nvmrc

@@ -1 +1 @@
-20
+22

CHANGELOG.txt

@@ -1,14 +1,3 @@
-- history: adding multi-select (#1487)
-- Fixed post-loaded error detection (#1519)
-- build(deps-dev): bump @duckduckgo/privacy-configuration (#1514)
-- build(deps): bump @atlaskit/pragmatic-drag-and-drop from 1.4.0 to 1.5.0 (#1450)
-- build(deps-dev): bump eslint in the eslint group across 1 directory (#1517)
-- build(deps-dev): bump rollup in the rollup group across 1 directory (#1498)
-- build(deps-dev): bump the typescript group across 1 directory with 4 updates (#1515)
-- build(deps-dev): bump @playwright/test from 1.49.1 to 1.50.1 (#1455)
-- build(deps-dev): bump esbuild from 0.24.2 to 0.25.0 (#1477)
-- build(deps): bump @rive-app/canvas-single from 2.25.3 to 2.26.3 (#1505)
-- build(deps-dev): bump typescript-eslint from 8.23.0 to 8.25.0 (#1513)
-- build(deps-dev): bump jasmine and @types/jasmine (#1512)
-- making the favicon component re-usable (#1510)
-- fixed flakey test with comparing titles (#1508)
+- history: ship review changes (#1522)
+- build(deps-dev): bump prettier from 3.4.2 to 3.5.3 (#1528)
+- Node 22 + use .nvmrc as single place to define version (#1523)

Sources/ContentScopeScripts/dist/pages/history/dist/index.css

@@ -263,18 +263,27 @@ body {
   background-color: var(--history-background-color);
 }
 .App_layout {
+  --sidebar-width: 250px;
+  --main-padding-left: 48px;
+  --main-padding-right: 76px;
+  --windows-scrollbar: 15px;
   display: grid;
-  grid-template-columns: 250px 1fr;
+  grid-template-columns: var(--sidebar-width) 1fr;
   grid-template-rows: max-content 1fr;
   grid-template-areas: "aside header" "aside main";
   overflow: hidden;
   height: 100vh;
   background-color: var(--history-background-color);
 }
+.App_layout[data-layout-mode=reduced] {
+  --sidebar-width: 230px;
+  --main-padding-left: 28px;
+  --main-padding-right: 56px;
+}
 .App_header {
   grid-area: header;
-  padding-left: 48px;
-  padding-right: 76px;
+  padding-left: var(--main-padding-left);
+  padding-right: var(--main-padding-right);
 }
 .App_search {
   justify-self: flex-end;
@@ -287,23 +296,16 @@ body {
 .App_main {
   grid-area: main;
   overflow: auto;
-  padding-left: 48px;
-  padding-right: 76px;
+  padding-left: var(--main-padding-left);
+  padding-right: var(--main-padding-right);
   padding-top: 24px;
 }
 .App_customScroller {
   overflow-y: scroll;
+  scrollbar-gutter: stable;
 }
-.App_customScroller::-webkit-scrollbar {
-  width: 12px;
-}
-.App_customScroller::-webkit-scrollbar-track {
-  border-radius: 6px;
-}
-.App_customScroller::-webkit-scrollbar-thumb {
-  background: rgb(108, 108, 108);
-  border: 4px solid var(--history-background-color);
-  border-radius: 6px;
+[data-platform=windows] .App_customScroller {
+  padding-right: calc(var(--main-padding-right) - var(--windows-scrollbar));
 }
 
 /* pages/history/app/components/Header.module.css */
@@ -410,7 +412,8 @@ body {
 .Item_item {
 }
 .Item_title {
-  height: 32px;
+  --title-height: 32px;
+  height: var(--title-height);
   width: 100%;
   font-size: var(--title-3-em-font-size);
   font-weight: var(--title-3-em-font-weight);
@@ -424,7 +427,8 @@ body {
   position: relative;
 }
 .Item_row {
-  height: 28px;
+  --row-height: 28px;
+  height: var(--row-height);
   display: flex;
   gap: 8px;
   align-items: center;
@@ -444,8 +448,7 @@ body {
   color: var(--row-color);
   border-radius: var(--row-radius);
 }
-.Item_hover:hover,
-.Item_hover:focus-within {
+.Item_hover:hover {
   --dots-opacity: visible;
   --time-opacity: 0;
   --time-visibility: hidden;
@@ -464,18 +467,20 @@ body {
   --row-color: var(--color-white-at-84);
   --dots-bg-hover: var(--color-white-at-9);
 }
-[data-is-selected=true] .Item_row {
-  border-radius: 0;
-}
-[data-is-selected=true]:first-of-type .Item_row,
-[data-is-selected=true]:not([data-is-selected=true] + [data-is-selected=true]) .Item_row {
-  border-top-left-radius: var(--row-radius);
-  border-top-right-radius: var(--row-radius);
-}
-[data-is-selected=true]:last-of-type .Item_row,
-[data-is-selected=true]:not(:has(+ [data-is-selected=true])) .Item_row {
-  border-bottom-left-radius: var(--row-radius);
-  border-bottom-right-radius: var(--row-radius);
+@supports selector(:has(*)) {
+  [data-is-selected=true] .Item_row {
+    border-radius: 0;
+  }
+  [data-is-selected=true]:first-of-type .Item_row,
+  [data-is-selected=true]:not([data-is-selected=true] + [data-is-selected=true]) .Item_row {
+    border-top-left-radius: var(--row-radius);
+    border-top-right-radius: var(--row-radius);
+  }
+  [data-is-selected=true]:last-of-type .Item_row,
+  [data-is-selected=true]:not(:has(+ [data-is-selected=true])) .Item_row {
+    border-bottom-left-radius: var(--row-radius);
+    border-bottom-right-radius: var(--row-radius);
+  }
 }
 .Item_favicon {
   flex-shrink: 0;
@@ -490,6 +495,7 @@ body {
   text-overflow: ellipsis;
   text-decoration: none;
   color: inherit;
+  line-height: var(--row-height);
 }
 .Item_domain {
   font-weight: 400;
@@ -500,10 +506,8 @@ body {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-@media screen and (min-width: 800px) {
-  .Item_domain {
-    flex-shrink: 0;
-  }
+[data-layout-mode=normal] .Item_domain {
+  flex-shrink: 0;
 }
 .Item_domain:before {
   content: "- ";
@@ -513,6 +517,8 @@ body {
   flex-shrink: 0;
   opacity: var(--time-opacity);
   visibility: var(--time-visibility);
+  font-feature-settings: "tnum";
+  font-variant-numeric: tabular-nums;
 }
 .Item_dots {
   position: absolute;
@@ -535,9 +541,6 @@ body {
 .Item_dots:hover {
   background: var(--dots-bg-hover);
 }
-.Item_dots:focus-visible {
-  opacity: 1;
-}
 .Item_last {
   margin-bottom: 24px;
 }
@@ -646,6 +649,7 @@ body {
 .Sidebar_item {
   position: relative;
   border-radius: 8px;
+  display: flex;
 }
 .Sidebar_item:hover,
 .Sidebar_item:focus-visible {
@@ -655,6 +659,22 @@ body {
 [data-theme=dark] .Sidebar_item:focus-visible {
   background: var(--color-white-at-6);
 }
+.Sidebar_item:hover .Sidebar_delete[aria-disabled=true] {
+  opacity: 0.3;
+  cursor: default;
+}
+.Sidebar_active {
+  background: var(--color-black-at-12);
+}
+.Sidebar_active:hover {
+  background: var(--color-black-at-18);
+}
+[data-theme=dark] .Sidebar_active {
+  background: var(--color-white-at-9);
+}
+[data-theme=dark] .Sidebar_active:hover {
+  background: var(--color-white-at-12);
+}
 .Sidebar_link {
   height: 40px;
   display: flex;
@@ -665,19 +685,16 @@ body {
   font-weight: 510;
   color: var(--history-text-normal);
   gap: 6px;
-}
-.Sidebar_active {
-  background: var(--color-black-at-12);
-}
-[data-theme=dark] .Sidebar_active {
-  background: var(--color-white-at-9);
+  border: 0;
+  box-shadow: none;
+  background: transparent;
+  flex: 1;
+  white-space: normal;
+  text-align: left;
 }
 .Sidebar_delete {
   height: 40px;
   width: 40px;
-  position: absolute;
-  top: 0;
-  right: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -713,10 +730,6 @@ body {
 .Sidebar_delete svg path {
   fill-opacity: 0.6;
 }
-.Sidebar_item:hover .Sidebar_delete[aria-disabled=true] {
-  opacity: 0.3;
-  cursor: default;
-}
 .Sidebar_icon {
   width: 16px;
   height: 16px;