From a90a5cba08fdf6c0ceb95101c275108a152a3aed Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Wed, 12 Jun 2024 07:35:37 +0200 Subject: Merging upstream version 127.0. Signed-off-by: Daniel Baumann --- .../components/firefoxview/HistoryController.mjs | 188 ---------- .../firefoxview/HistoryController.sys.mjs | 383 ++++++++++++++++++++ .../firefoxview/SyncedTabsController.sys.mjs | 2 +- browser/components/firefoxview/card-container.mjs | 131 ++++--- .../firefox-view-notification-manager.sys.mjs | 112 ------ .../firefoxview/firefox-view-places-query.sys.mjs | 187 ---------- browser/components/firefoxview/firefoxview.css | 11 - browser/components/firefoxview/firefoxview.html | 1 - .../components/firefoxview/fxview-empty-state.mjs | 31 +- .../firefoxview/fxview-search-textbox.mjs | 2 +- browser/components/firefoxview/fxview-tab-list.mjs | 12 +- browser/components/firefoxview/helpers.mjs | 21 -- browser/components/firefoxview/history.mjs | 67 ++-- browser/components/firefoxview/jar.mn | 2 +- browser/components/firefoxview/opentabs.mjs | 2 +- browser/components/firefoxview/recentlyclosed.mjs | 7 +- browser/components/firefoxview/search-helpers.mjs | 24 ++ browser/components/firefoxview/syncedtabs.mjs | 1 - .../firefoxview/tests/browser/browser.toml | 3 - .../tests/browser/browser_firefoxview.js | 39 +- .../browser/browser_firefoxview_virtual_list.js | 4 +- .../tests/browser/browser_history_firefoxview.js | 83 ++++- .../tests/browser/browser_notification_dot.js | 392 --------------------- .../browser/browser_syncedtabs_firefoxview.js | 160 +++++++++ .../tests/chrome/test_fxview_tab_list.html | 21 +- 25 files changed, 806 insertions(+), 1080 deletions(-) delete mode 100644 browser/components/firefoxview/HistoryController.mjs create mode 100644 browser/components/firefoxview/HistoryController.sys.mjs delete mode 100644 browser/components/firefoxview/firefox-view-notification-manager.sys.mjs delete mode 100644 browser/components/firefoxview/firefox-view-places-query.sys.mjs create mode 100644 browser/components/firefoxview/search-helpers.mjs delete mode 100644 browser/components/firefoxview/tests/browser/browser_notification_dot.js (limited to 'browser/components/firefoxview') diff --git a/browser/components/firefoxview/HistoryController.mjs b/browser/components/firefoxview/HistoryController.mjs deleted file mode 100644 index d2bda5cec2..0000000000 --- a/browser/components/firefoxview/HistoryController.mjs +++ /dev/null @@ -1,188 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - -const lazy = {}; - -ChromeUtils.defineESModuleGetters(lazy, { - FirefoxViewPlacesQuery: - "resource:///modules/firefox-view-places-query.sys.mjs", - PlacesUtils: "resource://gre/modules/PlacesUtils.sys.mjs", -}); - -let XPCOMUtils = ChromeUtils.importESModule( - "resource://gre/modules/XPCOMUtils.sys.mjs" -).XPCOMUtils; - -XPCOMUtils.defineLazyPreferenceGetter( - lazy, - "maxRowsPref", - "browser.firefox-view.max-history-rows", - -1 -); - -const HISTORY_MAP_L10N_IDS = { - sidebar: { - "history-date-today": "sidebar-history-date-today", - "history-date-yesterday": "sidebar-history-date-yesterday", - "history-date-this-month": "sidebar-history-date-this-month", - "history-date-prev-month": "sidebar-history-date-prev-month", - }, - firefoxview: { - "history-date-today": "firefoxview-history-date-today", - "history-date-yesterday": "firefoxview-history-date-yesterday", - "history-date-this-month": "firefoxview-history-date-this-month", - "history-date-prev-month": "firefoxview-history-date-prev-month", - }, -}; - -export class HistoryController { - host; - allHistoryItems; - historyMapByDate; - historyMapBySite; - searchQuery; - searchResults; - sortOption; - - constructor(host, options) { - this.allHistoryItems = new Map(); - this.historyMapByDate = []; - this.historyMapBySite = []; - this.placesQuery = new lazy.FirefoxViewPlacesQuery(); - this.searchQuery = ""; - this.searchResults = null; - this.sortOption = "date"; - this.searchResultsLimit = options?.searchResultsLimit || 300; - this.component = HISTORY_MAP_L10N_IDS?.[options?.component] - ? options?.component - : "firefoxview"; - this.host = host; - - host.addController(this); - } - - async hostConnected() { - this.placesQuery.observeHistory(data => this.updateAllHistoryItems(data)); - await this.updateHistoryData(); - this.createHistoryMaps(); - } - - hostDisconnected() { - this.placesQuery.close(); - } - - deleteFromHistory() { - lazy.PlacesUtils.history.remove(this.host.triggerNode.url); - } - - async onSearchQuery(e) { - this.searchQuery = e.detail.query; - await this.updateSearchResults(); - this.host.requestUpdate(); - } - - async onChangeSortOption(e) { - this.sortOption = e.target.value; - await this.updateHistoryData(); - await this.updateSearchResults(); - this.host.requestUpdate(); - } - - async updateHistoryData() { - this.allHistoryItems = await this.placesQuery.getHistory({ - daysOld: 60, - limit: lazy.maxRowsPref, - sortBy: this.sortOption, - }); - } - - async updateAllHistoryItems(allHistoryItems) { - if (allHistoryItems) { - this.allHistoryItems = allHistoryItems; - } else { - await this.updateHistoryData(); - } - this.resetHistoryMaps(); - this.host.requestUpdate(); - await this.updateSearchResults(); - } - - async updateSearchResults() { - if (this.searchQuery) { - try { - this.searchResults = await this.placesQuery.searchHistory( - this.searchQuery, - this.searchResultsLimit - ); - } catch (e) { - // Connection interrupted, ignore. - } - } else { - this.searchResults = null; - } - } - - resetHistoryMaps() { - this.historyMapByDate = []; - this.historyMapBySite = []; - } - - createHistoryMaps() { - if (!this.historyMapByDate.length) { - const { - visitsFromToday, - visitsFromYesterday, - visitsByDay, - visitsByMonth, - } = this.placesQuery; - - // Add visits from today and yesterday. - if (visitsFromToday.length) { - this.historyMapByDate.push({ - l10nId: HISTORY_MAP_L10N_IDS[this.component]["history-date-today"], - items: visitsFromToday, - }); - } - if (visitsFromYesterday.length) { - this.historyMapByDate.push({ - l10nId: - HISTORY_MAP_L10N_IDS[this.component]["history-date-yesterday"], - items: visitsFromYesterday, - }); - } - - // Add visits from this month, grouped by day. - visitsByDay.forEach(visits => { - this.historyMapByDate.push({ - l10nId: - HISTORY_MAP_L10N_IDS[this.component]["history-date-this-month"], - items: visits, - }); - }); - - // Add visits from previous months, grouped by month. - visitsByMonth.forEach(visits => { - this.historyMapByDate.push({ - l10nId: - HISTORY_MAP_L10N_IDS[this.component]["history-date-prev-month"], - items: visits, - }); - }); - } else if ( - this.sortOption === "site" && - !this.historyMapBySite.length && - this.component === "firefoxview" - ) { - this.historyMapBySite = Array.from( - this.allHistoryItems.entries(), - ([domain, items]) => ({ - domain, - items, - l10nId: domain ? null : "firefoxview-history-site-localhost", - }) - ).sort((a, b) => a.domain.localeCompare(b.domain)); - } - this.host.requestUpdate(); - } -} diff --git a/browser/components/firefoxview/HistoryController.sys.mjs b/browser/components/firefoxview/HistoryController.sys.mjs new file mode 100644 index 0000000000..b6f316e8e7 --- /dev/null +++ b/browser/components/firefoxview/HistoryController.sys.mjs @@ -0,0 +1,383 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +const lazy = {}; + +import { getLogger } from "chrome://browser/content/firefoxview/helpers.mjs"; + +ChromeUtils.defineESModuleGetters(lazy, { + PlacesQuery: "resource://gre/modules/PlacesQuery.sys.mjs", + PlacesUtils: "resource://gre/modules/PlacesUtils.sys.mjs", +}); + +let XPCOMUtils = ChromeUtils.importESModule( + "resource://gre/modules/XPCOMUtils.sys.mjs" +).XPCOMUtils; + +XPCOMUtils.defineLazyPreferenceGetter( + lazy, + "maxRowsPref", + "browser.firefox-view.max-history-rows", + -1 +); + +const HISTORY_MAP_L10N_IDS = { + sidebar: { + "history-date-today": "sidebar-history-date-today", + "history-date-yesterday": "sidebar-history-date-yesterday", + "history-date-this-month": "sidebar-history-date-this-month", + "history-date-prev-month": "sidebar-history-date-prev-month", + }, + firefoxview: { + "history-date-today": "firefoxview-history-date-today", + "history-date-yesterday": "firefoxview-history-date-yesterday", + "history-date-this-month": "firefoxview-history-date-this-month", + "history-date-prev-month": "firefoxview-history-date-prev-month", + }, +}; + +/** + * A list of visits displayed on a card. + * + * @typedef {object} CardEntry + * + * @property {string} domain + * @property {HistoryVisit[]} items + * @property {string} l10nId + */ + +export class HistoryController { + /** + * @type {{ entries: CardEntry[]; searchQuery: string; sortOption: string; }} + */ + historyCache; + host; + searchQuery; + sortOption; + #todaysDate; + #yesterdaysDate; + + constructor(host, options) { + this.placesQuery = new lazy.PlacesQuery(); + this.searchQuery = ""; + this.sortOption = "date"; + this.searchResultsLimit = options?.searchResultsLimit || 300; + this.component = HISTORY_MAP_L10N_IDS?.[options?.component] + ? options?.component + : "firefoxview"; + this.historyCache = { + entries: [], + searchQuery: null, + sortOption: null, + }; + this.host = host; + + host.addController(this); + } + + hostConnected() { + this.placesQuery.observeHistory(historyMap => this.updateCache(historyMap)); + } + + hostDisconnected() { + ChromeUtils.idleDispatch(() => this.placesQuery.close()); + } + + deleteFromHistory() { + lazy.PlacesUtils.history.remove(this.host.triggerNode.url); + } + + onSearchQuery(e) { + this.searchQuery = e.detail.query; + this.updateCache(); + } + + onChangeSortOption(e) { + this.sortOption = e.target.value; + this.updateCache(); + } + + get historyVisits() { + return this.historyCache.entries; + } + + get searchResults() { + return this.historyCache.searchQuery + ? this.historyCache.entries[0].items + : null; + } + + get totalVisitsCount() { + return this.historyVisits.reduce( + (count, entry) => count + entry.items.length, + 0 + ); + } + + get isHistoryEmpty() { + return !this.historyVisits.length; + } + + /** + * Update cached history. + * + * @param {Map} [historyMap] + * If provided, performs an update using the given data (instead of fetching + * it from the db). + */ + async updateCache(historyMap) { + const { searchQuery, sortOption } = this; + const entries = searchQuery + ? await this.#getVisitsForSearchQuery(searchQuery) + : await this.#getVisitsForSortOption(sortOption, historyMap); + if (this.searchQuery !== searchQuery || this.sortOption !== sortOption) { + // This query is stale, discard results and do not update the cache / UI. + return; + } + for (const { items } of entries) { + for (const item of items) { + this.#normalizeVisit(item); + } + } + this.historyCache = { entries, searchQuery, sortOption }; + this.host.requestUpdate(); + } + + /** + * Normalize data for fxview-tabs-list. + * + * @param {HistoryVisit} visit + * The visit to format. + */ + #normalizeVisit(visit) { + visit.time = visit.date.getTime(); + visit.title = visit.title || visit.url; + visit.icon = `page-icon:${visit.url}`; + visit.primaryL10nId = "fxviewtabrow-tabs-list-tab"; + visit.primaryL10nArgs = JSON.stringify({ + targetURI: visit.url, + }); + visit.secondaryL10nId = "fxviewtabrow-options-menu-button"; + visit.secondaryL10nArgs = JSON.stringify({ + tabTitle: visit.title || visit.url, + }); + } + + async #getVisitsForSearchQuery(searchQuery) { + let items = []; + try { + items = await this.placesQuery.searchHistory( + searchQuery, + this.searchResultsLimit + ); + } catch (e) { + getLogger("HistoryController").warn( + "There is a new search query in progress, so cancelling this one.", + e + ); + } + return [{ items }]; + } + + async #getVisitsForSortOption(sortOption, historyMap) { + if (!historyMap) { + historyMap = await this.#fetchHistory(); + } + switch (sortOption) { + case "date": + this.#setTodaysDate(); + return this.#getVisitsForDate(historyMap); + case "site": + return this.#getVisitsForSite(historyMap); + default: + return []; + } + } + + #setTodaysDate() { + const now = new Date(); + this.#todaysDate = new Date( + now.getFullYear(), + now.getMonth(), + now.getDate() + ); + this.#yesterdaysDate = new Date( + now.getFullYear(), + now.getMonth(), + now.getDate() - 1 + ); + } + + /** + * Get a list of visits, sorted by date, in reverse chronological order. + * + * @param {Map} historyMap + * @returns {CardEntry[]} + */ + #getVisitsForDate(historyMap) { + const entries = []; + const visitsFromToday = this.#getVisitsFromToday(historyMap); + const visitsFromYesterday = this.#getVisitsFromYesterday(historyMap); + const visitsByDay = this.#getVisitsByDay(historyMap); + const visitsByMonth = this.#getVisitsByMonth(historyMap); + + // Add visits from today and yesterday. + if (visitsFromToday.length) { + entries.push({ + l10nId: HISTORY_MAP_L10N_IDS[this.component]["history-date-today"], + items: visitsFromToday, + }); + } + if (visitsFromYesterday.length) { + entries.push({ + l10nId: HISTORY_MAP_L10N_IDS[this.component]["history-date-yesterday"], + items: visitsFromYesterday, + }); + } + + // Add visits from this month, grouped by day. + visitsByDay.forEach(visits => { + entries.push({ + l10nId: HISTORY_MAP_L10N_IDS[this.component]["history-date-this-month"], + items: visits, + }); + }); + + // Add visits from previous months, grouped by month. + visitsByMonth.forEach(visits => { + entries.push({ + l10nId: HISTORY_MAP_L10N_IDS[this.component]["history-date-prev-month"], + items: visits, + }); + }); + return entries; + } + + #getVisitsFromToday(cachedHistory) { + const mapKey = this.placesQuery.getStartOfDayTimestamp(this.#todaysDate); + const visits = cachedHistory.get(mapKey) ?? []; + return [...visits]; + } + + #getVisitsFromYesterday(cachedHistory) { + const mapKey = this.placesQuery.getStartOfDayTimestamp( + this.#yesterdaysDate + ); + const visits = cachedHistory.get(mapKey) ?? []; + return [...visits]; + } + + /** + * Get a list of visits per day for each day on this month, excluding today + * and yesterday. + * + * @param {Map} cachedHistory + * The history cache to process. + * @returns {HistoryVisit[][]} + * A list of visits for each day. + */ + #getVisitsByDay(cachedHistory) { + const visitsPerDay = []; + for (const [time, visits] of cachedHistory.entries()) { + const date = new Date(time); + if ( + this.#isSameDate(date, this.#todaysDate) || + this.#isSameDate(date, this.#yesterdaysDate) + ) { + continue; + } else if (!this.#isSameMonth(date, this.#todaysDate)) { + break; + } else { + visitsPerDay.push(visits); + } + } + return visitsPerDay; + } + + /** + * Get a list of visits per month for each month, excluding this one, and + * excluding yesterday's visits if yesterday happens to fall on the previous + * month. + * + * @param {Map} cachedHistory + * The history cache to process. + * @returns {HistoryVisit[][]} + * A list of visits for each month. + */ + #getVisitsByMonth(cachedHistory) { + const visitsPerMonth = []; + let previousMonth = null; + for (const [time, visits] of cachedHistory.entries()) { + const date = new Date(time); + if ( + this.#isSameMonth(date, this.#todaysDate) || + this.#isSameDate(date, this.#yesterdaysDate) + ) { + continue; + } + const month = this.placesQuery.getStartOfMonthTimestamp(date); + if (month !== previousMonth) { + visitsPerMonth.push(visits); + } else { + visitsPerMonth[visitsPerMonth.length - 1] = visitsPerMonth + .at(-1) + .concat(visits); + } + previousMonth = month; + } + return visitsPerMonth; + } + + /** + * Given two date instances, check if their dates are equivalent. + * + * @param {Date} dateToCheck + * @param {Date} date + * @returns {boolean} + * Whether both date instances have equivalent dates. + */ + #isSameDate(dateToCheck, date) { + return ( + dateToCheck.getDate() === date.getDate() && + this.#isSameMonth(dateToCheck, date) + ); + } + + /** + * Given two date instances, check if their months are equivalent. + * + * @param {Date} dateToCheck + * @param {Date} month + * @returns {boolean} + * Whether both date instances have equivalent months. + */ + #isSameMonth(dateToCheck, month) { + return ( + dateToCheck.getMonth() === month.getMonth() && + dateToCheck.getFullYear() === month.getFullYear() + ); + } + + /** + * Get a list of visits, sorted by site, in alphabetical order. + * + * @param {Map} historyMap + * @returns {CardEntry[]} + */ + #getVisitsForSite(historyMap) { + return Array.from(historyMap.entries(), ([domain, items]) => ({ + domain, + items, + l10nId: domain ? null : "firefoxview-history-site-localhost", + })).sort((a, b) => a.domain.localeCompare(b.domain)); + } + + async #fetchHistory() { + return this.placesQuery.getHistory({ + daysOld: 60, + limit: lazy.maxRowsPref, + sortBy: this.sortOption, + }); + } +} diff --git a/browser/components/firefoxview/SyncedTabsController.sys.mjs b/browser/components/firefoxview/SyncedTabsController.sys.mjs index 6ab8249bfe..9462766545 100644 --- a/browser/components/firefoxview/SyncedTabsController.sys.mjs +++ b/browser/components/firefoxview/SyncedTabsController.sys.mjs @@ -10,7 +10,7 @@ ChromeUtils.defineESModuleGetters(lazy, { import { SyncedTabsErrorHandler } from "resource:///modules/firefox-view-synced-tabs-error-handler.sys.mjs"; import { TabsSetupFlowManager } from "resource:///modules/firefox-view-tabs-setup-manager.sys.mjs"; -import { searchTabList } from "chrome://browser/content/firefoxview/helpers.mjs"; +import { searchTabList } from "chrome://browser/content/firefoxview/search-helpers.mjs"; const SYNCED_TABS_CHANGED = "services.sync.tabs.changed"; const TOPIC_SETUPSTATE_CHANGED = "firefox-view.setupstate.changed"; diff --git a/browser/components/firefoxview/card-container.mjs b/browser/components/firefoxview/card-container.mjs index 1755d97555..84c6acc5c4 100644 --- a/browser/components/firefoxview/card-container.mjs +++ b/browser/components/firefoxview/card-container.mjs @@ -132,76 +132,71 @@ class CardContainer extends MozLitElement { rel="stylesheet" href="chrome://browser/content/firefoxview/card-container.css" /> -
- ${when( - this.toggleDisabled, - () => html`
html`
+ - - - - - - - -
`, - () => html`
+ + + + + +
`, + () => html`
+ - - - - - - - -
` - )} -
+ + + + + + + ` + )} `; } } diff --git a/browser/components/firefoxview/firefox-view-notification-manager.sys.mjs b/browser/components/firefoxview/firefox-view-notification-manager.sys.mjs deleted file mode 100644 index 3f9056a7cd..0000000000 --- a/browser/components/firefoxview/firefox-view-notification-manager.sys.mjs +++ /dev/null @@ -1,112 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - -/** - * This module exports the FirefoxViewNotificationManager singleton, which manages the notification state - * for the Firefox View button - */ - -const RECENT_TABS_SYNC = "services.sync.lastTabFetch"; -const SHOULD_NOTIFY_FOR_TABS = "browser.tabs.firefox-view.notify-for-tabs"; -const lazy = {}; - -import { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs"; - -ChromeUtils.defineESModuleGetters(lazy, { - BrowserWindowTracker: "resource:///modules/BrowserWindowTracker.sys.mjs", - SyncedTabs: "resource://services-sync/SyncedTabs.sys.mjs", -}); - -export const FirefoxViewNotificationManager = new (class { - #currentlyShowing; - constructor() { - XPCOMUtils.defineLazyPreferenceGetter( - this, - "lastTabFetch", - RECENT_TABS_SYNC, - 0, - () => { - this.handleTabSync(); - } - ); - XPCOMUtils.defineLazyPreferenceGetter( - this, - "shouldNotifyForTabs", - SHOULD_NOTIFY_FOR_TABS, - false - ); - // Need to access the pref variable for the observer to start observing - // See the defineLazyPreferenceGetter function header - this.lastTabFetch; - - Services.obs.addObserver(this, "firefoxview-notification-dot-update"); - - this.#currentlyShowing = false; - } - - async handleTabSync() { - if (!this.shouldNotifyForTabs) { - return; - } - let newSyncedTabs = await lazy.SyncedTabs.getRecentTabs(3); - this.#currentlyShowing = this.tabsListChanged(newSyncedTabs); - this.showNotificationDot(); - this.syncedTabs = newSyncedTabs; - } - - showNotificationDot() { - if (this.#currentlyShowing) { - Services.obs.notifyObservers( - null, - "firefoxview-notification-dot-update", - "true" - ); - } - } - - observe(sub, topic, data) { - if (topic === "firefoxview-notification-dot-update" && data === "false") { - this.#currentlyShowing = false; - } - } - - tabsListChanged(newTabs) { - // The first time the tabs list is changed this.tabs is undefined because we haven't synced yet. - // We don't want to show the badge here because it's not an actual change, - // we are just syncing for the first time. - if (!this.syncedTabs) { - return false; - } - - // We loop through all windows to see if any window has currentURI "about:firefoxview" and - // the window is visible because we don't want to show the notification badge in that case - for (let window of lazy.BrowserWindowTracker.orderedWindows) { - // if the url is "about:firefoxview" and the window visible we don't want to show the notification badge - if ( - window.FirefoxViewHandler.tab?.selected && - !window.isFullyOccluded && - window.windowState !== window.STATE_MINIMIZED - ) { - return false; - } - } - - if (newTabs.length > this.syncedTabs.length) { - return true; - } - for (let i = 0; i < newTabs.length; i++) { - let newTab = newTabs[i]; - let oldTab = this.syncedTabs[i]; - - if (newTab?.url !== oldTab?.url) { - return true; - } - } - return false; - } - - shouldNotificationDotBeShowing() { - return this.#currentlyShowing; - } -})(); diff --git a/browser/components/firefoxview/firefox-view-places-query.sys.mjs b/browser/components/firefoxview/firefox-view-places-query.sys.mjs deleted file mode 100644 index 8923905769..0000000000 --- a/browser/components/firefoxview/firefox-view-places-query.sys.mjs +++ /dev/null @@ -1,187 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this - * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import { PlacesQuery } from "resource://gre/modules/PlacesQuery.sys.mjs"; - -/** - * Extension of PlacesQuery which provides additional caches for Firefox View. - */ -export class FirefoxViewPlacesQuery extends PlacesQuery { - /** @type {Date} */ - #todaysDate = null; - /** @type {Date} */ - #yesterdaysDate = null; - - get visitsFromToday() { - if (this.cachedHistory == null || this.#todaysDate == null) { - return []; - } - const mapKey = this.getStartOfDayTimestamp(this.#todaysDate); - return this.cachedHistory.get(mapKey) ?? []; - } - - get visitsFromYesterday() { - if (this.cachedHistory == null || this.#yesterdaysDate == null) { - return []; - } - const mapKey = this.getStartOfDayTimestamp(this.#yesterdaysDate); - return this.cachedHistory.get(mapKey) ?? []; - } - - /** - * Get a list of visits per day for each day on this month, excluding today - * and yesterday. - * - * @returns {HistoryVisit[][]} - * A list of visits for each day. - */ - get visitsByDay() { - const visitsPerDay = []; - for (const [time, visits] of this.cachedHistory.entries()) { - const date = new Date(time); - if ( - this.#isSameDate(date, this.#todaysDate) || - this.#isSameDate(date, this.#yesterdaysDate) - ) { - continue; - } else if (!this.#isSameMonth(date, this.#todaysDate)) { - break; - } else { - visitsPerDay.push(visits); - } - } - return visitsPerDay; - } - - /** - * Get a list of visits per month for each month, excluding this one, and - * excluding yesterday's visits if yesterday happens to fall on the previous - * month. - * - * @returns {HistoryVisit[][]} - * A list of visits for each month. - */ - get visitsByMonth() { - const visitsPerMonth = []; - let previousMonth = null; - for (const [time, visits] of this.cachedHistory.entries()) { - const date = new Date(time); - if ( - this.#isSameMonth(date, this.#todaysDate) || - this.#isSameDate(date, this.#yesterdaysDate) - ) { - continue; - } - const month = this.getStartOfMonthTimestamp(date); - if (month !== previousMonth) { - visitsPerMonth.push(visits); - } else { - visitsPerMonth[visitsPerMonth.length - 1] = visitsPerMonth - .at(-1) - .concat(visits); - } - previousMonth = month; - } - return visitsPerMonth; - } - - formatRowAsVisit(row) { - const visit = super.formatRowAsVisit(row); - this.#normalizeVisit(visit); - return visit; - } - - formatEventAsVisit(event) { - const visit = super.formatEventAsVisit(event); - this.#normalizeVisit(visit); - return visit; - } - - /** - * Normalize data for fxview-tabs-list. - * - * @param {HistoryVisit} visit - * The visit to format. - */ - #normalizeVisit(visit) { - visit.time = visit.date.getTime(); - visit.title = visit.title || visit.url; - visit.icon = `page-icon:${visit.url}`; - visit.primaryL10nId = "fxviewtabrow-tabs-list-tab"; - visit.primaryL10nArgs = JSON.stringify({ - targetURI: visit.url, - }); - visit.secondaryL10nId = "fxviewtabrow-options-menu-button"; - visit.secondaryL10nArgs = JSON.stringify({ - tabTitle: visit.title || visit.url, - }); - } - - async fetchHistory() { - await super.fetchHistory(); - if (this.cachedHistoryOptions.sortBy === "date") { - this.#setTodaysDate(); - } - } - - handlePageVisited(event) { - const visit = super.handlePageVisited(event); - if (!visit) { - return; - } - if ( - this.cachedHistoryOptions.sortBy === "date" && - (this.#todaysDate == null || - (visit.date.getTime() > this.#todaysDate.getTime() && - !this.#isSameDate(visit.date, this.#todaysDate))) - ) { - // If today's date has passed (or is null), it should be updated now. - this.#setTodaysDate(); - } - } - - #setTodaysDate() { - const now = new Date(); - this.#todaysDate = new Date( - now.getFullYear(), - now.getMonth(), - now.getDate() - ); - this.#yesterdaysDate = new Date( - now.getFullYear(), - now.getMonth(), - now.getDate() - 1 - ); - } - - /** - * Given two date instances, check if their dates are equivalent. - * - * @param {Date} dateToCheck - * @param {Date} date - * @returns {boolean} - * Whether both date instances have equivalent dates. - */ - #isSameDate(dateToCheck, date) { - return ( - dateToCheck.getDate() === date.getDate() && - this.#isSameMonth(dateToCheck, date) - ); - } - - /** - * Given two date instances, check if their months are equivalent. - * - * @param {Date} dateToCheck - * @param {Date} month - * @returns {boolean} - * Whether both date instances have equivalent months. - */ - #isSameMonth(dateToCheck, month) { - return ( - dateToCheck.getMonth() === month.getMonth() && - dateToCheck.getFullYear() === month.getFullYear() - ); - } -} diff --git a/browser/components/firefoxview/firefoxview.css b/browser/components/firefoxview/firefoxview.css index a91c90c39e..0789c887bf 100644 --- a/browser/components/firefoxview/firefoxview.css +++ b/browser/components/firefoxview/firefoxview.css @@ -31,17 +31,6 @@ --newtab-background-color: #F9F9FB; --fxview-card-header-font-weight: 500; - - /* Make the attention dot color match the browser UI on Linux, and on HCM - * with a lightweight theme. */ - &[lwtheme] { - --attention-dot-color: light-dark(#2ac3a2, #54ffbd); - } - @media (-moz-platform: linux) { - &:not([lwtheme]) { - --attention-dot-color: AccentColor; - } - } } @media (prefers-color-scheme: dark) { diff --git a/browser/components/firefoxview/firefoxview.html b/browser/components/firefoxview/firefoxview.html index 5bffb5a1d8..bdaa41bd7c 100644 --- a/browser/components/firefoxview/firefoxview.html +++ b/browser/components/firefoxview/firefoxview.html @@ -13,7 +13,6 @@ - diff --git a/browser/components/firefoxview/fxview-empty-state.mjs b/browser/components/firefoxview/fxview-empty-state.mjs index 9e6bc488fa..3e94767043 100644 --- a/browser/components/firefoxview/fxview-empty-state.mjs +++ b/browser/components/firefoxview/fxview-empty-state.mjs @@ -53,7 +53,6 @@ class FxviewEmptyState extends MozLitElement { return html``; } return html` + }" id="card-container" isEmptyState="true" role="group" aria-labelledby="header" aria-describedby="description">
- ${repeat( - this.descriptionLabels, - descLabel => descLabel, - (descLabel, index) => html`

- ${this.linkTemplate(this.descriptionLink)} -

` - )} + + ${repeat( + this.descriptionLabels, + descLabel => descLabel, + (descLabel, index) => html`

+ ${this.linkTemplate(this.descriptionLink)} +

` + )} +
diff --git a/browser/components/firefoxview/fxview-search-textbox.mjs b/browser/components/firefoxview/fxview-search-textbox.mjs index 1332f5f3f6..107aa8f7a4 100644 --- a/browser/components/firefoxview/fxview-search-textbox.mjs +++ b/browser/components/firefoxview/fxview-search-textbox.mjs @@ -20,7 +20,7 @@ const SEARCH_DEBOUNCE_TIMEOUT_MS = 1000; * * There is no actual searching done here. That needs to be implemented by the * `fxview-search-textbox-query` event handler. `searchTabList()` from - * `helpers.mjs` can be used as a starting point. + * `search-helpers.mjs` can be used as a starting point. * * @property {string} placeholder * The placeholder text for the search box. diff --git a/browser/components/firefoxview/fxview-tab-list.mjs b/browser/components/firefoxview/fxview-tab-list.mjs index 57181e3bea..63be9379db 100644 --- a/browser/components/firefoxview/fxview-tab-list.mjs +++ b/browser/components/firefoxview/fxview-tab-list.mjs @@ -11,7 +11,7 @@ import { when, } from "chrome://global/content/vendor/lit.all.mjs"; import { MozLitElement } from "chrome://global/content/lit-utils.mjs"; -import { escapeRegExp } from "./helpers.mjs"; +import { escapeRegExp } from "./search-helpers.mjs"; // eslint-disable-next-line import/no-unassigned-import import "chrome://global/content/elements/moz-button.mjs"; @@ -49,7 +49,6 @@ if (!window.IS_STORYBOOK) { * @property {number} maxTabsLength - The max number of tabs for the list * @property {Array} tabItems - Items to show in the tab list * @property {string} searchQuery - The query string to highlight, if provided. - * @property {string} searchInProgress - Whether a search has been initiated. * @property {string} secondaryActionClass - The class used to style the secondary action element * @property {string} tertiaryActionClass - The class used to style the tertiary action element */ @@ -65,7 +64,6 @@ export class FxviewTabListBase extends MozLitElement { this.maxTabsLength = 25; this.tabItems = []; this.compactRows = false; - this.searchInProgress = false; this.updatesPaused = true; this.#register(); } @@ -80,12 +78,12 @@ export class FxviewTabListBase extends MozLitElement { tabItems: { type: Array }, updatesPaused: { type: Boolean }, searchQuery: { type: String }, - searchInProgress: { type: Boolean }, secondaryActionClass: { type: String }, tertiaryActionClass: { type: String }, }; static queries = { + emptyState: "fxview-empty-state", rowEls: { all: "fxview-tab-row", }, @@ -308,11 +306,7 @@ export class FxviewTabListBase extends MozLitElement { } render() { - if ( - this.searchQuery && - this.tabItems.length === 0 && - !this.searchInProgress - ) { + if (this.searchQuery && !this.tabItems.length) { return this.emptySearchResultsTemplate(); } return html` diff --git a/browser/components/firefoxview/helpers.mjs b/browser/components/firefoxview/helpers.mjs index b206deef18..fb41fac0e1 100644 --- a/browser/components/firefoxview/helpers.mjs +++ b/browser/components/firefoxview/helpers.mjs @@ -125,27 +125,6 @@ export function isSearchEnabled() { return lazy.searchEnabledPref; } -/** - * Escape special characters for regular expressions from a string. - * - * @param {string} string - * The string to sanitize. - * @returns {string} The sanitized string. - */ -export function escapeRegExp(string) { - return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); -} - -/** - * Search a tab list for items that match the given query. - */ -export function searchTabList(query, tabList) { - const regex = RegExp(escapeRegExp(query), "i"); - return tabList.filter( - ({ title, url }) => regex.test(title) || regex.test(url) - ); -} - /** * Get or create a logger, whose log-level is controlled by a pref * diff --git a/browser/components/firefoxview/history.mjs b/browser/components/firefoxview/history.mjs index 478422d49b..4919f94e9c 100644 --- a/browser/components/firefoxview/history.mjs +++ b/browser/components/firefoxview/history.mjs @@ -15,13 +15,13 @@ import { import { ViewPage } from "./viewpage.mjs"; // eslint-disable-next-line import/no-unassigned-import import "chrome://browser/content/migration/migration-wizard.mjs"; -import { HistoryController } from "./HistoryController.mjs"; // eslint-disable-next-line import/no-unassigned-import import "chrome://global/content/elements/moz-button.mjs"; const lazy = {}; ChromeUtils.defineESModuleGetters(lazy, { + HistoryController: "resource:///modules/HistoryController.sys.mjs", ProfileAge: "resource://gre/modules/ProfileAge.sys.mjs", }); @@ -47,7 +47,7 @@ class HistoryInView extends ViewPage { this.cumulativeSearches = 0; } - controller = new HistoryController(this, { + controller = new lazy.HistoryController(this, { searchResultsLimit: SEARCH_RESULTS_LIMIT, }); @@ -57,7 +57,7 @@ class HistoryInView extends ViewPage { } this._started = true; - this.controller.updateAllHistoryItems(); + this.controller.updateCache(); this.toggleVisibilityInCardContainer(); } @@ -170,8 +170,8 @@ class HistoryInView extends ViewPage { this.recordContextMenuTelemetry("delete-from-history", e); } - async onChangeSortOption(e) { - await this.controller.onChangeSortOption(e); + onChangeSortOption(e) { + this.controller.onChangeSortOption(e); Services.telemetry.recordEvent( "firefoxview_next", "sort_history", @@ -184,8 +184,8 @@ class HistoryInView extends ViewPage { ); } - async onSearchQuery(e) { - await this.controller.onSearchQuery(e); + onSearchQuery(e) { + this.controller.onSearchQuery(e); this.cumulativeSearches = this.controller.searchQuery ? this.cumulativeSearches + 1 : 0; @@ -287,7 +287,7 @@ class HistoryInView extends ViewPage { get cardsTemplate() { if (this.controller.searchResults) { return this.#searchResultsTemplate(); - } else if (this.controller.allHistoryItems.size) { + } else if (!this.controller.isHistoryEmpty) { return this.#historyCardsTemplate(); } return this.#emptyMessageTemplate(); @@ -295,14 +295,11 @@ class HistoryInView extends ViewPage { #historyCardsTemplate() { let cardsTemplate = []; - if ( - this.controller.sortOption === "date" && - this.controller.historyMapByDate.length - ) { - this.controller.historyMapByDate.forEach(historyItem => { - if (historyItem.items.length) { + switch (this.controller.sortOption) { + case "date": + cardsTemplate = this.controller.historyVisits.map(historyItem => { let dateArg = JSON.stringify({ date: historyItem.items[0].time }); - cardsTemplate.push(html` + return html`

${this.panelListTemplate()} - `); - } - }); - } else if (this.controller.historyMapBySite.length) { - this.controller.historyMapBySite.forEach(historyItem => { - if (historyItem.items.length) { - cardsTemplate.push(html` + `; + }); + break; + case "site": + cardsTemplate = this.controller.historyVisits.map(historyItem => { + return html`

${historyItem.domain}

@@ -338,15 +334,15 @@ class HistoryInView extends ViewPage { dateTimeFormat="dateTime" hasPopup="menu" maxTabsLength=${this.maxTabsLength} - .tabItems=${[...historyItem.items]} + .tabItems=${historyItem.items} @fxview-tab-list-primary-action=${this.onPrimaryAction} @fxview-tab-list-secondary-action=${this.onSecondaryAction} > ${this.panelListTemplate()} - `); - } - }); + `; + }); + break; } return cardsTemplate; } @@ -420,7 +416,6 @@ class HistoryInView extends ViewPage { .tabItems=${this.controller.searchResults} @fxview-tab-list-primary-action=${this.onPrimaryAction} @fxview-tab-list-secondary-action=${this.onSecondaryAction} - .searchInProgress=${this.controller.placesQuery.searchInProgress} > ${this.panelListTemplate()} @@ -491,12 +486,19 @@ class HistoryInView extends ViewPage { class="import-history-banner" hideHeader="true" ?hidden=${!this.shouldShowImportBanner()} + role="group" + aria-labelledby="header" + aria-describedby="description" >
@@ -518,7 +520,7 @@ class HistoryInView extends ViewPage {
`; diff --git a/browser/components/firefoxview/tests/browser/browser.toml b/browser/components/firefoxview/tests/browser/browser.toml index db8b2ea25c..c9036286d7 100644 --- a/browser/components/firefoxview/tests/browser/browser.toml +++ b/browser/components/firefoxview/tests/browser/browser.toml @@ -43,9 +43,6 @@ skip-if = ["true"] # Bug 1869605 and # Bug 1870296 ["browser_history_firefoxview.js"] -["browser_notification_dot.js"] -skip-if = ["true"] # Bug 1851453 - ["browser_opentabs_cards.js"] ["browser_opentabs_changes.js"] diff --git a/browser/components/firefoxview/tests/browser/browser_firefoxview.js b/browser/components/firefoxview/tests/browser/browser_firefoxview.js index 1a51d61f42..00083d7c91 100644 --- a/browser/components/firefoxview/tests/browser/browser_firefoxview.js +++ b/browser/components/firefoxview/tests/browser/browser_firefoxview.js @@ -31,20 +31,47 @@ add_task(async function test_aria_roles() { ); let recentlyClosedEmptyState = recentlyClosedComponent.emptyState; let descriptionEls = recentlyClosedEmptyState.descriptionEls; + const recentlyClosedCard = SpecialPowers.wrap( + recentlyClosedEmptyState + ).openOrClosedShadowRoot.querySelector("card-container"); is( - descriptionEls[1].querySelector("a").getAttribute("aria-details"), - "card-container", - "The link within the recently closed empty state has the expected 'aria-details' attribute." + recentlyClosedCard.getAttribute("aria-labelledby"), + "header", + "The recently closed empty state container has the expected 'aria-labelledby' attribute." + ); + is( + recentlyClosedCard.getAttribute("aria-describedby"), + "description", + "The recently closed empty state container has the expected 'aria-describedby' attribute." + ); + is( + recentlyClosedCard.getAttribute("role"), + "group", + "The recently closed empty state container has the expected 'role' attribute." ); let syncedTabsComponent = document.querySelector( "view-syncedtabs[slot=syncedtabs]" ); let syncedTabsEmptyState = syncedTabsComponent.emptyState; + const syncedCard = + SpecialPowers.wrap( + syncedTabsEmptyState + ).openOrClosedShadowRoot.querySelector("card-container"); + is( + syncedCard.getAttribute("aria-labelledby"), + "header", + "The synced tabs empty state container has the expected 'aria-labelledby' attribute." + ); + is( + syncedCard.getAttribute("aria-describedby"), + "description", + "The synced tabs empty state container has the expected 'aria-describedby' attribute." + ); is( - syncedTabsEmptyState.querySelector("button").getAttribute("aria-details"), - "empty-container", - "The button within the synced tabs empty state has the expected 'aria-details' attribute." + syncedCard.getAttribute("role"), + "group", + "The synced tabs empty state container has the expected 'role' attribute." ); // Test keyboard navigation from card-container summary diff --git a/browser/components/firefoxview/tests/browser/browser_firefoxview_virtual_list.js b/browser/components/firefoxview/tests/browser/browser_firefoxview_virtual_list.js index bf53796ef7..e9502079d9 100644 --- a/browser/components/firefoxview/tests/browser/browser_firefoxview_virtual_list.js +++ b/browser/components/firefoxview/tests/browser/browser_firefoxview_virtual_list.js @@ -32,7 +32,9 @@ add_task(async function test_max_render_count_on_win_resize() { await navigateToViewAndWait(document, "history"); let historyComponent = document.querySelector("view-history"); - let tabList = historyComponent.lists[0]; + let tabList = await TestUtils.waitForCondition( + () => historyComponent.lists[0] + ); let rootVirtualList = tabList.rootVirtualListEl; const initialHeight = window.outerHeight; diff --git a/browser/components/firefoxview/tests/browser/browser_history_firefoxview.js b/browser/components/firefoxview/tests/browser/browser_history_firefoxview.js index 847ce4d9fd..0bbc009eab 100644 --- a/browser/components/firefoxview/tests/browser/browser_history_firefoxview.js +++ b/browser/components/firefoxview/tests/browser/browser_history_firefoxview.js @@ -57,15 +57,11 @@ function isElInViewport(element) { async function historyComponentReady(historyComponent, expectedHistoryItems) { await TestUtils.waitForCondition( - () => - [...historyComponent.controller.allHistoryItems.values()].reduce( - (acc, { length }) => acc + length, - 0 - ) === expectedHistoryItems, + () => historyComponent.controller.totalVisitsCount === expectedHistoryItems, "History component ready" ); - let expected = historyComponent.controller.historyMapByDate.length; + let expected = historyComponent.controller.historyVisits.length; let actual = historyComponent.cards.length; is(expected, actual, `Total number of cards should be ${expected}`); @@ -242,8 +238,7 @@ add_task(async function test_list_ordering() { await TestUtils.waitForCondition(() => historyComponent.fullyUpdated); await sortHistoryTelemetry(sortHistoryEvent); - let expectedNumOfCards = - historyComponent.controller.historyMapBySite.length; + let expectedNumOfCards = historyComponent.controller.historyVisits.length; info(`Total number of cards should be ${expectedNumOfCards}`); await BrowserTestUtils.waitForMutationCondition( @@ -475,7 +470,7 @@ add_task(async function test_search_history() { EventUtils.sendString("Bogus Query", content); await TestUtils.waitForCondition(() => { const tabList = historyComponent.lists[0]; - return tabList?.shadowRoot.querySelector("fxview-empty-state"); + return tabList?.emptyState; }, "There are no matching search results."); info("Clear the search query."); @@ -485,7 +480,7 @@ add_task(async function test_search_history() { { childList: true, subtree: true }, () => historyComponent.cards.length === - historyComponent.controller.historyMapByDate.length + historyComponent.controller.historyVisits.length ); searchTextbox.blur(); @@ -494,7 +489,7 @@ add_task(async function test_search_history() { EventUtils.sendString("Bogus Query", content); await TestUtils.waitForCondition(() => { const tabList = historyComponent.lists[0]; - return tabList?.shadowRoot.querySelector("fxview-empty-state"); + return tabList?.emptyState; }, "There are no matching search results."); info("Clear the search query with keyboard."); @@ -514,11 +509,69 @@ add_task(async function test_search_history() { { childList: true, subtree: true }, () => historyComponent.cards.length === - historyComponent.controller.historyMapByDate.length + historyComponent.controller.historyVisits.length ); }); }); +add_task(async function test_search_ignores_stale_queries() { + await PlacesUtils.history.clear(); + const historyEntries = createHistoryEntries(); + await PlacesUtils.history.insertMany(historyEntries); + + let bogusQueryInProgress = false; + const searchDeferred = Promise.withResolvers(); + const realDatabase = await PlacesUtils.promiseLargeCacheDBConnection(); + const mockDatabase = { + executeCached: async (sql, options) => { + if (options.query === "Bogus Query") { + bogusQueryInProgress = true; + await searchDeferred.promise; + } + return realDatabase.executeCached(sql, options); + }, + interrupt: () => searchDeferred.reject(), + }; + const stub = sinon + .stub(PlacesUtils, "promiseLargeCacheDBConnection") + .resolves(mockDatabase); + + await withFirefoxView({}, async browser => { + const { document } = browser.contentWindow; + await navigateToViewAndWait(document, "history"); + const historyComponent = document.querySelector("view-history"); + historyComponent.profileAge = 8; + await historyComponentReady(historyComponent, historyEntries.length); + const searchTextbox = await TestUtils.waitForCondition( + () => historyComponent.searchTextbox, + "The search textbox is displayed." + ); + + info("Input a bogus search query."); + EventUtils.synthesizeMouseAtCenter(searchTextbox, {}, content); + EventUtils.sendString("Bogus Query", content); + await TestUtils.waitForCondition(() => bogusQueryInProgress); + + info("Clear the bogus query."); + EventUtils.synthesizeMouseAtCenter(searchTextbox.clearButton, {}, content); + await searchTextbox.updateComplete; + + info("Input a real search query."); + EventUtils.synthesizeMouseAtCenter(searchTextbox, {}, content); + EventUtils.sendString("Example Domain 1", content); + await TestUtils.waitForCondition(() => { + const { rowEls } = historyComponent.lists[0]; + return rowEls.length === 1 && rowEls[0].mainEl.href === URLs[1]; + }, "There is one matching search result."); + searchDeferred.resolve(); + await TestUtils.waitForTick(); + const tabList = historyComponent.lists[0]; + ok(!tabList.emptyState, "Empty state should not be shown."); + }); + + stub.restore(); +}); + add_task(async function test_persist_collapse_card_after_view_change() { await PlacesUtils.history.clear(); await addHistoryItems(today); @@ -528,11 +581,7 @@ add_task(async function test_persist_collapse_card_after_view_change() { const historyComponent = document.querySelector("view-history"); historyComponent.profileAge = 8; await TestUtils.waitForCondition( - () => - [...historyComponent.controller.allHistoryItems.values()].reduce( - (acc, { length }) => acc + length, - 0 - ) === 4 + () => historyComponent.controller.totalVisitsCount === 4 ); let firstHistoryCard = historyComponent.cards[0]; ok( diff --git a/browser/components/firefoxview/tests/browser/browser_notification_dot.js b/browser/components/firefoxview/tests/browser/browser_notification_dot.js deleted file mode 100644 index 0fa747d40f..0000000000 --- a/browser/components/firefoxview/tests/browser/browser_notification_dot.js +++ /dev/null @@ -1,392 +0,0 @@ -/* Any copyright is dedicated to the Public Domain. - * http://creativecommons.org/publicdomain/zero/1.0/ */ - -const tabsList1 = syncedTabsData1[0].tabs; -const tabsList2 = syncedTabsData1[1].tabs; -const BADGE_TOP_RIGHT = "75% 25%"; - -const { SyncedTabs } = ChromeUtils.importESModule( - "resource://services-sync/SyncedTabs.sys.mjs" -); - -function setupRecentDeviceListMocks() { - const sandbox = sinon.createSandbox(); - sandbox.stub(fxAccounts.device, "recentDeviceList").get(() => [ - { - id: 1, - name: "My desktop", - isCurrentDevice: true, - type: "desktop", - tabs: [], - }, - { - id: 2, - name: "My iphone", - type: "mobile", - tabs: [], - }, - ]); - - sandbox.stub(UIState, "get").returns({ - status: UIState.STATUS_SIGNED_IN, - syncEnabled: true, - }); - - return sandbox; -} - -function waitForWindowActive(win, active) { - info("Waiting for window activation"); - return Promise.all([ - BrowserTestUtils.waitForEvent(win, active ? "focus" : "blur"), - BrowserTestUtils.waitForEvent(win, active ? "activate" : "deactivate"), - ]); -} - -async function waitForNotificationBadgeToBeShowing(fxViewButton) { - info("Waiting for attention attribute to be set"); - await BrowserTestUtils.waitForMutationCondition( - fxViewButton, - { attributes: true }, - () => fxViewButton.hasAttribute("attention") - ); - return fxViewButton.hasAttribute("attention"); -} - -async function waitForNotificationBadgeToBeHidden(fxViewButton) { - info("Waiting for attention attribute to be removed"); - await BrowserTestUtils.waitForMutationCondition( - fxViewButton, - { attributes: true }, - () => !fxViewButton.hasAttribute("attention") - ); - return !fxViewButton.hasAttribute("attention"); -} - -async function clickFirefoxViewButton(win) { - await BrowserTestUtils.synthesizeMouseAtCenter( - "#firefox-view-button", - { type: "mousedown" }, - win.browsingContext - ); -} - -function getBackgroundPositionForElement(ele) { - let style = ele.ownerGlobal.getComputedStyle(ele); - return style.getPropertyValue("background-position"); -} - -let previousFetchTime = 0; - -async function resetSyncedTabsLastFetched() { - Services.prefs.clearUserPref("services.sync.lastTabFetch"); - previousFetchTime = 0; - await TestUtils.waitForTick(); -} - -async function initTabSync() { - let recentFetchTime = Math.floor(Date.now() / 1000); - // ensure we don't try to set the pref with the same value, which will not produce - // the expected pref change effects - while (recentFetchTime == previousFetchTime) { - await TestUtils.waitForTick(); - recentFetchTime = Math.floor(Date.now() / 1000); - } - Assert.greater( - recentFetchTime, - previousFetchTime, - "The new lastTabFetch value is greater than the previous" - ); - - info("initTabSync, updating lastFetch:" + recentFetchTime); - Services.prefs.setIntPref("services.sync.lastTabFetch", recentFetchTime); - previousFetchTime = recentFetchTime; - await TestUtils.waitForTick(); -} - -add_setup(async function () { - await resetSyncedTabsLastFetched(); - await SpecialPowers.pushPrefEnv({ - set: [["browser.tabs.firefox-view.notify-for-tabs", true]], - }); - - // Clear any synced tabs from previous tests - FirefoxViewNotificationManager.syncedTabs = null; - Services.obs.notifyObservers( - null, - "firefoxview-notification-dot-update", - "false" - ); -}); - -/** - * Test that the notification badge will show and hide in the correct cases - */ -add_task(async function testNotificationDot() { - const sandbox = setupRecentDeviceListMocks(); - const syncedTabsMock = sandbox.stub(SyncedTabs, "getRecentTabs"); - sandbox.spy(SyncedTabs, "syncTabs"); - - let win = await BrowserTestUtils.openNewBrowserWindow(); - let fxViewBtn = win.document.getElementById("firefox-view-button"); - ok(fxViewBtn, "Got the Firefox View button"); - - // Initiate a synced tabs update with new tabs - syncedTabsMock.returns(tabsList1); - await initTabSync(); - - ok( - BrowserTestUtils.isVisible(fxViewBtn), - "The Firefox View button is showing" - ); - - info( - "testNotificationDot, button is showing, badge should be initially hidden" - ); - ok( - await waitForNotificationBadgeToBeHidden(fxViewBtn), - "The notification badge is not showing initially" - ); - - // Initiate a synced tabs update with new tabs - syncedTabsMock.returns(tabsList2); - await initTabSync(); - - ok( - await waitForNotificationBadgeToBeShowing(fxViewBtn), - "The notification badge is showing after first tab sync" - ); - - // check that switching to the firefoxviewtab removes the badge - await clickFirefoxViewButton(win); - - info( - "testNotificationDot, after clicking the button, badge should become hidden" - ); - ok( - await waitForNotificationBadgeToBeHidden(fxViewBtn), - "The notification badge is not showing after going to Firefox View" - ); - - await BrowserTestUtils.waitForCondition(() => { - return SyncedTabs.syncTabs.calledOnce; - }); - - ok(SyncedTabs.syncTabs.calledOnce, "SyncedTabs.syncTabs() was called once"); - - syncedTabsMock.returns(tabsList1); - // Initiate a synced tabs update with new tabs - await initTabSync(); - - // The noti badge would show but we are on a Firefox View page so no need to show the noti badge - info( - "testNotificationDot, after updating the recent tabs, badge should be hidden" - ); - ok( - await waitForNotificationBadgeToBeHidden(fxViewBtn), - "The notification badge is not showing after tab sync while Firefox View is focused" - ); - - let newTab = await BrowserTestUtils.openNewForegroundTab(win.gBrowser); - syncedTabsMock.returns(tabsList2); - await initTabSync(); - - ok( - await waitForNotificationBadgeToBeShowing(fxViewBtn), - "The notification badge is showing after navigation to a new tab" - ); - - // check that switching back to the Firefox View tab removes the badge - await clickFirefoxViewButton(win); - - info( - "testNotificationDot, after switching back to fxview, badge should be hidden" - ); - ok( - await waitForNotificationBadgeToBeHidden(fxViewBtn), - "The notification badge is not showing after focusing the Firefox View tab" - ); - - await BrowserTestUtils.switchTab(win.gBrowser, newTab); - - // Initiate a synced tabs update with no new tabs - await initTabSync(); - - info( - "testNotificationDot, after switching back to fxview with no new tabs, badge should be hidden" - ); - ok( - await waitForNotificationBadgeToBeHidden(fxViewBtn), - "The notification badge is not showing after a tab sync with the same tabs" - ); - - await BrowserTestUtils.closeWindow(win); - - sandbox.restore(); -}); - -/** - * Tests the notification badge with multiple windows - */ -add_task(async function testNotificationDotOnMultipleWindows() { - const sandbox = setupRecentDeviceListMocks(); - - await resetSyncedTabsLastFetched(); - const syncedTabsMock = sandbox.stub(SyncedTabs, "getRecentTabs"); - - // Create a new window - let win1 = await BrowserTestUtils.openNewBrowserWindow(); - await win1.delayedStartupPromise; - let fxViewBtn = win1.document.getElementById("firefox-view-button"); - ok(fxViewBtn, "Got the Firefox View button"); - - syncedTabsMock.returns(tabsList1); - // Initiate a synced tabs update - await initTabSync(); - - // Create another window - let win2 = await BrowserTestUtils.openNewBrowserWindow(); - await win2.delayedStartupPromise; - let fxViewBtn2 = win2.document.getElementById("firefox-view-button"); - - await clickFirefoxViewButton(win2); - - // Make sure the badge doesn't show on any window - info( - "testNotificationDotOnMultipleWindows, badge is initially hidden on window 1" - ); - ok( - await waitForNotificationBadgeToBeHidden(fxViewBtn), - "The notification badge is not showing in the inital window" - ); - info( - "testNotificationDotOnMultipleWindows, badge is initially hidden on window 2" - ); - ok( - await waitForNotificationBadgeToBeHidden(fxViewBtn2), - "The notification badge is not showing in the second window" - ); - - // Minimize the window. - win2.minimize(); - - await TestUtils.waitForCondition( - () => !win2.gBrowser.selectedBrowser.docShellIsActive, - "Waiting for docshell to be marked as inactive after minimizing the window" - ); - - syncedTabsMock.returns(tabsList2); - info("Initiate a synced tabs update with new tabs"); - await initTabSync(); - - // The badge will show because the View tab is minimized - // Make sure the badge shows on all windows - info( - "testNotificationDotOnMultipleWindows, after new synced tabs and minimized win2, badge is visible on window 1" - ); - ok( - await waitForNotificationBadgeToBeShowing(fxViewBtn), - "The notification badge is showing in the initial window" - ); - info( - "testNotificationDotOnMultipleWindows, after new synced tabs and minimized win2, badge is visible on window 2" - ); - ok( - await waitForNotificationBadgeToBeShowing(fxViewBtn2), - "The notification badge is showing in the second window" - ); - - win2.restore(); - await TestUtils.waitForCondition( - () => win2.gBrowser.selectedBrowser.docShellIsActive, - "Waiting for docshell to be marked as active after restoring the window" - ); - - await BrowserTestUtils.closeWindow(win1); - await BrowserTestUtils.closeWindow(win2); - - sandbox.restore(); -}); - -/** - * Tests the notification badge is in the correct spot and that the badge shows when opening a new window - * if another window is showing the badge - */ -add_task(async function testNotificationDotLocation() { - const sandbox = setupRecentDeviceListMocks(); - await resetSyncedTabsLastFetched(); - const syncedTabsMock = sandbox.stub(SyncedTabs, "getRecentTabs"); - - syncedTabsMock.returns(tabsList1); - - let win1 = await BrowserTestUtils.openNewBrowserWindow(); - let fxViewBtn = win1.document.getElementById("firefox-view-button"); - ok(fxViewBtn, "Got the Firefox View button"); - - // Initiate a synced tabs update - await initTabSync(); - syncedTabsMock.returns(tabsList2); - // Initiate another synced tabs update - await initTabSync(); - - ok( - await waitForNotificationBadgeToBeShowing(fxViewBtn), - "The notification badge is showing initially" - ); - - // Create a new window - let win2 = await BrowserTestUtils.openNewBrowserWindow(); - await win2.delayedStartupPromise; - - // Make sure the badge is showing on the new window - let fxViewBtn2 = win2.document.getElementById("firefox-view-button"); - ok( - await waitForNotificationBadgeToBeShowing(fxViewBtn2), - "The notification badge is showing in the second window after opening" - ); - - // Make sure the badge is below and center now - isnot( - getBackgroundPositionForElement(fxViewBtn), - BADGE_TOP_RIGHT, - "The notification badge is not showing in the top right in the initial window" - ); - isnot( - getBackgroundPositionForElement(fxViewBtn2), - BADGE_TOP_RIGHT, - "The notification badge is not showing in the top right in the second window" - ); - - CustomizableUI.addWidgetToArea( - "firefox-view-button", - CustomizableUI.AREA_NAVBAR - ); - - // Make sure both windows still have the notification badge - ok( - await waitForNotificationBadgeToBeShowing(fxViewBtn), - "The notification badge is showing in the initial window" - ); - ok( - await waitForNotificationBadgeToBeShowing(fxViewBtn2), - "The notification badge is showing in the second window" - ); - - // Make sure the badge is in the top right now - is( - getBackgroundPositionForElement(fxViewBtn), - BADGE_TOP_RIGHT, - "The notification badge is showing in the top right in the initial window" - ); - is( - getBackgroundPositionForElement(fxViewBtn2), - BADGE_TOP_RIGHT, - "The notification badge is showing in the top right in the second window" - ); - - CustomizableUI.reset(); - await BrowserTestUtils.closeWindow(win1); - await BrowserTestUtils.closeWindow(win2); - - sandbox.restore(); -}); diff --git a/browser/components/firefoxview/tests/browser/browser_syncedtabs_firefoxview.js b/browser/components/firefoxview/tests/browser/browser_syncedtabs_firefoxview.js index 1bf387f578..872efd37a0 100644 --- a/browser/components/firefoxview/tests/browser/browser_syncedtabs_firefoxview.js +++ b/browser/components/firefoxview/tests/browser/browser_syncedtabs_firefoxview.js @@ -13,6 +13,11 @@ add_setup(async function () { registerCleanupFunction(async function () { await tearDown(gSandbox); }); + + // set tab sync false so we don't skip setup states + await SpecialPowers.pushPrefEnv({ + set: [["services.sync.engine.tabs", false]], + }); }); async function promiseTabListsUpdated({ tabLists }) { @@ -748,3 +753,158 @@ add_task(async function search_synced_tabs_recent_browsing() { await SpecialPowers.popPrefEnv(); await tearDown(sandbox); }); + +add_task(async function test_mobile_connected() { + Services.prefs.setBoolPref("services.sync.engine.tabs", false); + const sandbox = setupMocks({ + state: UIState.STATUS_SIGNED_IN, + fxaDevices: [ + { + id: 1, + name: "This Device", + isCurrentDevice: true, + type: "desktop", + tabs: [], + }, + { + id: 2, + name: "Other Device", + type: "mobile", + tabs: [], + }, + ], + }); + await withFirefoxView({}, async browser => { + const { document } = browser.contentWindow; + // ensure tab sync is false so we don't skip onto next step + ok( + !Services.prefs.getBoolPref("services.sync.engine.tabs", false), + "services.sync.engine.tabs is initially false" + ); + + Services.obs.notifyObservers(null, UIState.ON_UPDATE); + await navigateToViewAndWait(document, "syncedtabs"); + + is(fxAccounts.device.recentDeviceList?.length, 2, "2 devices connected"); + ok( + fxAccounts.device.recentDeviceList?.some( + device => device.type == "mobile" + ), + "A connected device is type:mobile" + ); + }); + await tearDown(sandbox); + Services.prefs.setBoolPref("services.sync.engine.tabs", true); +}); + +add_task(async function test_tablet_connected() { + Services.prefs.setBoolPref("services.sync.engine.tabs", false); + const sandbox = setupMocks({ + state: UIState.STATUS_SIGNED_IN, + fxaDevices: [ + { + id: 1, + name: "This Device", + isCurrentDevice: true, + type: "desktop", + tabs: [], + }, + { + id: 2, + name: "Other Device", + type: "tablet", + tabs: [], + }, + ], + }); + await withFirefoxView({}, async browser => { + const { document } = browser.contentWindow; + // ensure tab sync is false so we don't skip onto next step + ok( + !Services.prefs.getBoolPref("services.sync.engine.tabs", false), + "services.sync.engine.tabs is initially false" + ); + + Services.obs.notifyObservers(null, UIState.ON_UPDATE); + await navigateToViewAndWait(document, "syncedtabs"); + + is(fxAccounts.device.recentDeviceList?.length, 2, "2 devices connected"); + ok( + fxAccounts.device.recentDeviceList?.some( + device => device.type == "tablet" + ), + "A connected device is type:tablet" + ); + }); + await tearDown(sandbox); + Services.prefs.setBoolPref("services.sync.engine.tabs", true); +}); + +add_task(async function test_tab_sync_enabled() { + const sandbox = setupMocks({ + state: UIState.STATUS_SIGNED_IN, + fxaDevices: [ + { + id: 1, + name: "This Device", + isCurrentDevice: true, + type: "desktop", + tabs: [], + }, + { + id: 2, + name: "Other Device", + type: "mobile", + tabs: [], + }, + ], + }); + await withFirefoxView({}, async browser => { + const { document } = browser.contentWindow; + Services.obs.notifyObservers(null, UIState.ON_UPDATE); + let syncedTabsComponent = document.querySelector( + "view-syncedtabs:not([slot=syncedtabs])" + ); + + // test initial state, with the pref not enabled + await navigateToViewAndWait(document, "syncedtabs"); + // test with the pref toggled on + Services.prefs.setBoolPref("services.sync.engine.tabs", true); + await TestUtils.waitForCondition( + () => syncedTabsComponent.fullyUpdated, + "Synced tabs component is fully updated." + ); + ok(!syncedTabsComponent.emptyState, "No empty state is being displayed."); + + // reset and test clicking the action button + Services.prefs.setBoolPref("services.sync.engine.tabs", false); + await TestUtils.waitForCondition( + () => syncedTabsComponent.fullyUpdated, + "Synced tabs component is fully updated." + ); + await TestUtils.waitForCondition( + () => syncedTabsComponent.emptyState, + "The empty state is rendered." + ); + + const actionButton = syncedTabsComponent.emptyState?.querySelector( + "button[data-action=sync-tabs-disabled]" + ); + EventUtils.synthesizeMouseAtCenter(actionButton, {}, browser.contentWindow); + await TestUtils.waitForCondition( + () => syncedTabsComponent.fullyUpdated, + "Synced tabs component is fully updated." + ); + await TestUtils.waitForCondition( + () => !syncedTabsComponent.emptyState, + "The empty state is rendered." + ); + + ok(true, "The empty state is no longer displayed when sync is enabled"); + ok( + Services.prefs.getBoolPref("services.sync.engine.tabs", false), + "tab sync pref should be enabled after button click" + ); + }); + await tearDown(sandbox); +}); diff --git a/browser/components/firefoxview/tests/chrome/test_fxview_tab_list.html b/browser/components/firefoxview/tests/chrome/test_fxview_tab_list.html index 52ddc277c7..abea8725ee 100644 --- a/browser/components/firefoxview/tests/chrome/test_fxview_tab_list.html +++ b/browser/components/firefoxview/tests/chrome/test_fxview_tab_list.html @@ -37,8 +37,8 @@ const { BrowserTestUtils } = ChromeUtils.importESModule( "resource://testing-common/BrowserTestUtils.sys.mjs" ); - const { FirefoxViewPlacesQuery } = ChromeUtils.importESModule( - "resource:///modules/firefox-view-places-query.sys.mjs" + const { PlacesQuery } = ChromeUtils.importESModule( + "resource://gre/modules/PlacesQuery.sys.mjs" ); const { PlacesUtils } = ChromeUtils.importESModule( "resource://gre/modules/PlacesUtils.sys.mjs" @@ -52,7 +52,7 @@ const fxviewTabList = document.querySelector("fxview-tab-list"); let tabItems = []; - const placesQuery = new FirefoxViewPlacesQuery(); + const placesQuery = new PlacesQuery(); const URLs = [ "http://mochi.test:8888/browser/", @@ -106,7 +106,20 @@ }); await historyUpdated.promise; - fxviewTabList.tabItems = [...history.values()].flat(); + fxviewTabList.tabItems = Array.from(history.values()).flat().map(visit => ({ + ...visit, + time: visit.date.getTime(), + title: visit.title || visit.url, + icon: `page-icon:${visit.url}`, + primaryL10nId: "fxviewtabrow-tabs-list-tab", + primaryL10nArgs: JSON.stringify({ + targetURI: visit.url, + }), + secondaryL10nId: "fxviewtabrow-options-menu-button", + secondaryL10nArgs: JSON.stringify({ + tabTitle: visit.title || visit.url, + }), + })); await fxviewTabList.getUpdateComplete(); tabItems = Array.from(fxviewTabList.rowEls); -- cgit v1.2.3