Skip to content
This repository was archived by the owner on Jul 9, 2025. It is now read-only.

Commit 2523752

Browse files
author
Jonathan Sudiaman
committed
Bug 1851447 - Add search for recent browsing r=fxview-reviewers,fluent-reviewers,flod,sclements,kcochrane
Slightly different from the previous search revisions. In this case, rather than having their own search boxes, the recent browsing components share a single search box located within the parent element. Thus, `fxview-search-textbox-query` event listeners are added/removed from the //parent// component rather than the components themselves. Differential Revision: https://phabricator.services.mozilla.com/D195596
1 parent a4d904b commit 2523752

File tree

11 files changed

+399
-61
lines changed

11 files changed

+399
-61
lines changed

‎browser/components/firefoxview/helpers.mjs

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ export const NOW_THRESHOLD_MS = 91000;
3131
// Configure logging level via this pref
3232
export const LOGGING_PREF = "browser.tabs.firefox-view.logLevel";
3333

34+
export const MAX_TABS_FOR_RECENT_BROWSING = 5;
35+
3436
export function formatURIForDisplay(uriString) {
3537
return lazy.BrowserUtils.formatURIStringForDisplay(uriString);
3638
}

‎browser/components/firefoxview/opentabs.mjs

Lines changed: 68 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
isSearchEnabled,
1515
placeLinkOnClipboard,
1616
searchTabList,
17+
MAX_TABS_FOR_RECENT_BROWSING,
1718
} from "./helpers.mjs";
1819
import { ViewPage, ViewPageContent } from "./viewpage.mjs";
1920

@@ -111,6 +112,13 @@ class OpenTabsInView extends ViewPage {
111112
card.paused = false;
112113
card.viewVisibleCallback?.();
113114
}
115+
116+
if (this.recentBrowsing) {
117+
this.recentBrowsingElement.addEventListener(
118+
"fxview-search-textbox-query",
119+
this
120+
);
121+
}
114122
}
115123

116124
disconnectedCallback() {
@@ -136,6 +144,13 @@ class OpenTabsInView extends ViewPage {
136144
card.paused = true;
137145
card.viewHiddenCallback?.();
138146
}
147+
148+
if (this.recentBrowsing) {
149+
this.recentBrowsingElement.removeEventListener(
150+
"fxview-search-textbox-query",
151+
this
152+
);
153+
}
139154
}
140155

141156
viewVisibleCallback() {
@@ -276,10 +291,15 @@ class OpenTabsInView extends ViewPage {
276291
.tabs=${tabs}
277292
.recentBrowsing=${true}
278293
.paused=${this.paused}
294+
.searchQuery=${this.searchQuery}
279295
></view-opentabs-card>`;
280296
}
281297

282298
handleEvent({ detail, target, type }) {
299+
if (this.recentBrowsing && type === "fxview-search-textbox-query") {
300+
this.onSearchQuery({ detail });
301+
return;
302+
}
283303
const win = target.ownerGlobal;
284304
const tabs = this.windows.get(win);
285305
switch (type) {
@@ -372,6 +392,7 @@ class OpenTabsInViewCard extends ViewPageContent {
372392
recentBrowsing: { type: Boolean },
373393
searchQuery: { type: String },
374394
searchResults: { type: Array },
395+
showAll: { type: Boolean },
375396
};
376397
static MAX_TABS_FOR_COMPACT_HEIGHT = 7;
377398

@@ -384,6 +405,7 @@ class OpenTabsInViewCard extends ViewPageContent {
384405
this.devices = [];
385406
this.searchQuery = "";
386407
this.searchResults = null;
408+
this.showAll = false;
387409
}
388410

389411
static queries = {
@@ -401,14 +423,23 @@ class OpenTabsInViewCard extends ViewPageContent {
401423
}
402424

403425
getMaxTabsLength() {
404-
if (this.recentBrowsing) {
405-
return 5;
426+
if (this.recentBrowsing && !this.showAll) {
427+
return MAX_TABS_FOR_RECENT_BROWSING;
406428
} else if (this.classList.contains("height-limited") && !this.showMore) {
407429
return OpenTabsInViewCard.MAX_TABS_FOR_COMPACT_HEIGHT;
408430
}
409431
return -1;
410432
}
411433

434+
isShowAllLinkVisible() {
435+
return (
436+
this.recentBrowsing &&
437+
this.searchQuery &&
438+
this.searchResults.length > MAX_TABS_FOR_RECENT_BROWSING &&
439+
!this.showAll
440+
);
441+
}
442+
412443
toggleShowMore(event) {
413444
if (
414445
event.type == "click" ||
@@ -420,6 +451,17 @@ class OpenTabsInViewCard extends ViewPageContent {
420451
}
421452
}
422453

454+
enableShowAll(event) {
455+
if (
456+
event.type == "click" ||
457+
(event.type == "keydown" && event.code == "Enter") ||
458+
(event.type == "keydown" && event.code == "Space")
459+
) {
460+
event.preventDefault();
461+
this.showAll = true;
462+
}
463+
}
464+
423465
onTabListRowClick(event) {
424466
const tab = event.originalTarget.tabElement;
425467
const browserWindow = tab.ownerGlobal;
@@ -461,12 +503,14 @@ class OpenTabsInViewCard extends ViewPageContent {
461503
shortPageName=${this.recentBrowsing ? "opentabs" : null}
462504
?showViewAll=${this.recentBrowsing}
463505
>
464-
${this.recentBrowsing
465-
? html`<h3
466-
slot="header"
467-
data-l10n-id=${"firefoxview-opentabs-header"}
468-
></h3>`
469-
: html`<h3 slot="header">${this.title}</h3>`}
506+
${when(
507+
this.recentBrowsing,
508+
() => html`<h3
509+
slot="header"
510+
data-l10n-id="firefoxview-opentabs-header"
511+
></h3>`,
512+
() => html`<h3 slot="header">${this.title}</h3>`
513+
)}
470514
<div class="fxview-tab-list-container" slot="main">
471515
<fxview-tab-list
472516
class="with-context-menu"
@@ -480,8 +524,18 @@ class OpenTabsInViewCard extends ViewPageContent {
480524
><view-opentabs-contextmenu slot="menu"></view-opentabs-contextmenu>
481525
</fxview-tab-list>
482526
</div>
483-
${!this.recentBrowsing
484-
? html` <div
527+
${when(
528+
this.recentBrowsing,
529+
() => html` <div
530+
@click=${this.enableShowAll}
531+
@keydown=${this.enableShowAll}
532+
data-l10n-id="firefoxview-show-all"
533+
?hidden=${!this.isShowAllLinkVisible()}
534+
slot="footer"
535+
tabindex="0"
536+
></div>`,
537+
() =>
538+
html` <div
485539
@click=${this.toggleShowMore}
486540
@keydown=${this.toggleShowMore}
487541
data-l10n-id="${this.showMore
@@ -493,12 +547,15 @@ class OpenTabsInViewCard extends ViewPageContent {
493547
slot="footer"
494548
tabindex="0"
495549
></div>`
496-
: null}
550+
)}
497551
</card-container>
498552
`;
499553
}
500554

501555
willUpdate(changedProperties) {
556+
if (changedProperties.has("searchQuery")) {
557+
this.showAll = false;
558+
}
502559
if (changedProperties.has("searchQuery") || changedProperties.has("tabs")) {
503560
this.updateSearchResults();
504561
}

‎browser/components/firefoxview/recentbrowsing.mjs

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,20 @@
22
* License, v. 2.0. If a copy of the MPL was not distributed with this
33
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
44

5-
import { html } from "chrome://global/content/vendor/lit.all.mjs";
5+
import { html, when } from "chrome://global/content/vendor/lit.all.mjs";
66
import { ViewPage } from "./viewpage.mjs";
7+
import { isSearchEnabled } from "./helpers.mjs";
78

89
class RecentBrowsingInView extends ViewPage {
910
constructor() {
1011
super();
1112
this.pageType = "recentbrowsing";
1213
}
1314

15+
static queries = {
16+
searchTextbox: "fxview-search-textbox",
17+
};
18+
1419
viewVisibleCallback() {
1520
for (let child of this.children) {
1621
let childView = child.firstElementChild;
@@ -38,6 +43,15 @@ class RecentBrowsingInView extends ViewPage {
3843
class="page-header heading-large"
3944
data-l10n-id="firefoxview-overview-header"
4045
></h2>
46+
${when(
47+
isSearchEnabled(),
48+
() => html`<div class="search-container">
49+
<fxview-search-textbox
50+
data-l10n-id="firefoxview-search-text-box-recentbrowsing"
51+
data-l10n-attrs="placeholder"
52+
></fxview-search-textbox>
53+
</div>`
54+
)}
4155
</div>
4256
<div class="cards-container">
4357
<slot></slot>

‎browser/components/firefoxview/recentlyclosed.mjs

Lines changed: 64 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@ import {
88
ifDefined,
99
when,
1010
} from "chrome://global/content/vendor/lit.all.mjs";
11-
import { isSearchEnabled, searchTabList } from "./helpers.mjs";
11+
import {
12+
isSearchEnabled,
13+
searchTabList,
14+
MAX_TABS_FOR_RECENT_BROWSING,
15+
} from "./helpers.mjs";
1216
import { ViewPage } from "./viewpage.mjs";
1317
// eslint-disable-next-line import/no-unassigned-import
1418
import "chrome://browser/content/firefoxview/card-container.mjs";
@@ -37,14 +41,18 @@ class RecentlyClosedTabsInView extends ViewPage {
3741
this.boundObserve = (...args) => this.observe(...args);
3842
this.firstUpdateComplete = false;
3943
this.fullyUpdated = false;
40-
this.maxTabsLength = this.recentBrowsing ? 5 : 25;
44+
this.maxTabsLength = this.recentBrowsing
45+
? MAX_TABS_FOR_RECENT_BROWSING
46+
: 25;
4147
this.recentlyClosedTabs = [];
4248
this.searchQuery = "";
4349
this.searchResults = null;
50+
this.showAll = false;
4451
}
4552

4653
static properties = {
4754
searchResults: { type: Array },
55+
showAll: { type: Boolean },
4856
};
4957

5058
static queries = {
@@ -80,6 +88,13 @@ class RecentlyClosedTabsInView extends ViewPage {
8088
this.boundObserve,
8189
SS_NOTIFY_BROWSER_SHUTDOWN_FLUSH
8290
);
91+
92+
if (this.recentBrowsing) {
93+
this.recentBrowsingElement.addEventListener(
94+
"fxview-search-textbox-query",
95+
this
96+
);
97+
}
8398
}
8499

85100
stop() {
@@ -96,13 +111,26 @@ class RecentlyClosedTabsInView extends ViewPage {
96111
this.boundObserve,
97112
SS_NOTIFY_BROWSER_SHUTDOWN_FLUSH
98113
);
114+
115+
if (this.recentBrowsing) {
116+
this.recentBrowsingElement.removeEventListener(
117+
"fxview-search-textbox-query",
118+
this
119+
);
120+
}
99121
}
100122

101123
disconnectedCallback() {
102124
super.disconnectedCallback();
103125
this.stop();
104126
}
105127

128+
handleEvent(event) {
129+
if (this.recentBrowsing && event.type === "fxview-search-textbox-query") {
130+
this.onSearchQuery(event);
131+
}
132+
}
133+
106134
// We remove all the observers when the instance is not visible to the user
107135
viewHiddenCallback() {
108136
this.stop();
@@ -137,10 +165,7 @@ class RecentlyClosedTabsInView extends ViewPage {
137165
}
138166
// sort the aggregated list to most-recently-closed first
139167
recentlyClosedTabsData.sort((a, b) => a.closedAt < b.closedAt);
140-
this.recentlyClosedTabs = recentlyClosedTabsData.slice(
141-
0,
142-
this.maxTabsLength
143-
);
168+
this.recentlyClosedTabs = recentlyClosedTabsData;
144169
this.normalizeRecentlyClosedData();
145170
if (this.searchQuery) {
146171
this.#updateSearchResults();
@@ -343,7 +368,7 @@ class RecentlyClosedTabsInView extends ViewPage {
343368
<fxview-tab-list
344369
class="with-dismiss-button"
345370
slot="main"
346-
.maxTabsLength=${this.maxTabsLength}
371+
.maxTabsLength=${this.showAll ? -1 : this.maxTabsLength}
347372
.searchQuery=${ifDefined(
348373
this.searchResults && this.searchQuery
349374
)}
@@ -357,6 +382,17 @@ class RecentlyClosedTabsInView extends ViewPage {
357382
this.recentBrowsing && !this.recentlyClosedTabs.length,
358383
() => html` <div slot="main">${this.emptyMessageTemplate()}</div> `
359384
)}
385+
${when(
386+
this.isShowAllLinkVisible(),
387+
() => html` <div
388+
@click=${this.enableShowAll}
389+
@keydown=${this.enableShowAll}
390+
data-l10n-id="firefoxview-show-all"
391+
?hidden=${!this.isShowAllLinkVisible()}
392+
slot="footer"
393+
tabindex="0"
394+
></div>`
395+
)}
360396
</card-container>
361397
${when(
362398
this.selectedTab && !this.recentlyClosedTabs.length,
@@ -368,6 +404,7 @@ class RecentlyClosedTabsInView extends ViewPage {
368404

369405
onSearchQuery(e) {
370406
this.searchQuery = e.detail.query;
407+
this.showAll = false;
371408
this.#updateSearchResults();
372409
}
373410

@@ -376,5 +413,25 @@ class RecentlyClosedTabsInView extends ViewPage {
376413
? searchTabList(this.searchQuery, this.recentlyClosedTabs)
377414
: null;
378415
}
416+
417+
isShowAllLinkVisible() {
418+
return (
419+
this.recentBrowsing &&
420+
this.searchQuery &&
421+
this.searchResults.length > this.maxTabsLength &&
422+
!this.showAll
423+
);
424+
}
425+
426+
enableShowAll(event) {
427+
if (
428+
event.type == "click" ||
429+
(event.type == "keydown" && event.code == "Enter") ||
430+
(event.type == "keydown" && event.code == "Space")
431+
) {
432+
event.preventDefault();
433+
this.showAll = true;
434+
}
435+
}
379436
}
380437
customElements.define("view-recentlyclosed", RecentlyClosedTabsInView);

0 commit comments

Comments
 (0)