history: adding sites support (#1954)

* history: adding sites support

* Add separator above "Sites" item

* Add tests for the divider change

* Target sites only

* Follow the same approach to use the css

* Update test screenshots

* Remove unncessary tests -- screenshots covers it already

---------

Co-authored-by: Moon Kyong <[email protected]>
Co-authored-by: Moon Kyong <[email protected]>

Author: 3 people

special-pages/pages/history/app/components/Item.js

@@ -18,7 +18,7 @@ export const Item = memo(
      * @param {string} props.url - The text to be displayed for the item.
      * @param {string} props.domain - The text to be displayed for the domain
      * @param {number} props.kind - The kind or type of the item that determines its visual style.
-     * @param {string} props.dateTimeOfDay - the time of day, like 11.00am.
+     * @param {string} [props.dateTimeOfDay] - the time of day, like 11.00am.
      * @param {string} props.dateRelativeDay - the time of day, like 11.00am.
      * @param {string|null} props.etldPlusOne
      * @param {number} props.index - original index
@@ -63,7 +63,7 @@ export const Item = memo(
                     <span class={styles.domain} data-testid="Item.domain" title={props.domain}>
                         {props.domain}
                     </span>
-                    <span class={styles.time}>{dateTimeOfDay}</span>
+                    {dateTimeOfDay && <span className={styles.time}>{dateTimeOfDay}</span>}
                     <button class={styles.dots} data-action={BTN_ACTION_ENTRIES_MENU} data-index={index} value={props.id} tabindex={-1}>
                         <Dots />
                     </button>

special-pages/pages/history/app/components/Sidebar.js

@@ -28,6 +28,7 @@ const iconMap = {
     saturday: 'icons/day.svg',
     sunday: 'icons/day.svg',
     older: 'icons/older.svg',
+    sites: 'icons/sites.svg',
 };
 
 /** @type {Record<RangeId, (t: (s: keyof json) => string) => string>} */
@@ -43,6 +44,7 @@ const titleMap = {
     saturday: (t) => t('range_saturday'),
     sunday: (t) => t('range_sunday'),
     older: (t) => t('range_older'),
+    sites: (t) => t('range_sites'),
 };
 
 /**
@@ -106,7 +108,7 @@ function Item({ current, range, onClick, onDelete, count }) {
         if (range === 'all' && current.value === null) {
             return cn(styles.item, styles.active);
         }
-        return cn(styles.item, current.value === range && styles.active);
+        return cn(styles.item, current.value === range && styles.active, styles[`item_${range}`]);
     });
 
     return (
@@ -182,6 +184,7 @@ function labels(range, t) {
         case 'thursday':
         case 'friday':
         case 'saturday':
+        case 'sites':
         case 'sunday':
             return { linkLabel: t('show_history_for', { range }), buttonLabel: t('delete_history_for', { range }) };
         case 'older':

special-pages/pages/history/app/components/Sidebar.module.css

@@ -39,6 +39,23 @@
             background: var(--color-white-at-6);
         }
     }
+
+    &.item_sites {
+        margin-top: 16px;
+
+        &::before {
+            content: '';
+            position: absolute;
+            top: -8px;
+            left: 16px;
+            right: 16px;
+            border-top: 1px solid var(--color-black-at-6);
+        }
+
+        [data-theme="dark"] &::before {
+            border-top: 1px solid var(--color-white-at-6);
+        }
+    }
 }
 
 .item:hover .delete[aria-disabled="true"] {

special-pages/pages/history/app/history.service.js

@@ -421,6 +421,7 @@ export function toRange(input) {
         'sunday',
         'recentlyOpened',
         'older',
+        'sites',
     ];
     return valid.includes(input) ? /** @type {import('../types/history.js').RangeId} */ (input) : null;
 }

special-pages/pages/history/app/mocks/mock-transport.js

@@ -40,6 +40,7 @@ export function mockTransport() {
             { id: 'saturday', count: 1 },
             { id: 'friday', count: 1 },
             { id: 'older', count: 1 },
+            { id: 'sites', count: 1 },
         ],
     };
 
@@ -268,8 +269,10 @@ function queryResponseFrom(memory, msg) {
         const response = asResponse(memory.slice(0, 10), msg.params.offset, msg.params.limit);
         const range = msg.params.query.range;
         response.value = response.value.map((item) => {
+            if (!('range' in msg.params.query)) return item; // unreachable
             return {
                 ...item,
+                dateTimeOfDay: msg.params.query.range === 'sites' ? undefined : item.dateTimeOfDay,
                 title: 'range:' + range + ' ' + item.title,
             };
         });

special-pages/pages/history/app/strings.json

@@ -106,5 +106,9 @@
   "range_older":  {
     "title": "Older",
     "note": "Label on a button that shows older history entries."
+  },
+  "range_sites":  {
+    "title": "Sites",
+    "note": "Label on a button that shows which sites have been visited"
   }
 }

special-pages/pages/history/integration-tests/history.page.js

@@ -601,6 +601,15 @@ export class HistoryTestPage {
         const rgb = `rgb(${[r, g, b].join(', ')})`;
         await expect(this.page.locator('[data-layout-mode="normal"]')).toHaveCSS('background-color', rgb, { timeout: 50 });
     }
+
+    async lastItemDividerHasColor({ rgb }) {
+        const lastItem = this.sidebar().locator('.Sidebar_item').last();
+        const borderTopColor = await lastItem.evaluate((el) => {
+            const before = window.getComputedStyle(el, '::before');
+            return before.borderTopColor;
+        });
+        expect(borderTopColor).toBe(rgb);
+    }
 }
 
 /**