301 lines
8.8 KiB
JavaScript
301 lines
8.8 KiB
JavaScript
/* 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 { html, when } from "chrome://global/content/vendor/lit.all.mjs";
|
|
import { navigateToLink } from "chrome://browser/content/firefoxview/helpers.mjs";
|
|
|
|
import { SidebarPage } from "./sidebar-page.mjs";
|
|
|
|
ChromeUtils.defineESModuleGetters(lazy, {
|
|
HistoryController: "resource:///modules/HistoryController.sys.mjs",
|
|
Sanitizer: "resource:///modules/Sanitizer.sys.mjs",
|
|
});
|
|
|
|
const NEVER_REMEMBER_HISTORY_PREF = "browser.privatebrowsing.autostart";
|
|
const DAYS_EXPANDED_INITIALLY = 2;
|
|
|
|
export class SidebarHistory extends SidebarPage {
|
|
static queries = {
|
|
cards: { all: "moz-card" },
|
|
emptyState: "fxview-empty-state",
|
|
lists: { all: "sidebar-tab-list" },
|
|
menuButton: ".menu-button",
|
|
searchTextbox: "fxview-search-textbox",
|
|
};
|
|
|
|
constructor() {
|
|
super();
|
|
this.handlePopupEvent = this.handlePopupEvent.bind(this);
|
|
}
|
|
|
|
controller = new lazy.HistoryController(this, {
|
|
component: "sidebar",
|
|
});
|
|
|
|
connectedCallback() {
|
|
super.connectedCallback();
|
|
const { document: doc } = this.topWindow;
|
|
this._menu = doc.getElementById("sidebar-history-menu");
|
|
this._menuSortByDate = doc.getElementById("sidebar-history-sort-by-date");
|
|
this._menuSortBySite = doc.getElementById("sidebar-history-sort-by-site");
|
|
this._menu.addEventListener("command", this);
|
|
this._menu.addEventListener("popuphidden", this.handlePopupEvent);
|
|
this.addContextMenuListeners();
|
|
this.addSidebarFocusedListeners();
|
|
this.controller.updateCache();
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
super.disconnectedCallback();
|
|
this._menu.removeEventListener("command", this);
|
|
this._menu.removeEventListener("popuphidden", this.handlePopupEvent);
|
|
this.removeContextMenuListeners();
|
|
this.removeSidebarFocusedListeners();
|
|
}
|
|
|
|
handleContextMenuEvent(e) {
|
|
this.triggerNode = this.findTriggerNode(e, "sidebar-tab-row");
|
|
if (!this.triggerNode) {
|
|
e.preventDefault();
|
|
}
|
|
}
|
|
|
|
handleCommandEvent(e) {
|
|
switch (e.target.id) {
|
|
case "sidebar-history-sort-by-date":
|
|
this.controller.onChangeSortOption(e, "date");
|
|
break;
|
|
case "sidebar-history-sort-by-site":
|
|
this.controller.onChangeSortOption(e, "site");
|
|
break;
|
|
case "sidebar-history-clear":
|
|
lazy.Sanitizer.showUI(this.topWindow);
|
|
break;
|
|
case "sidebar-history-context-delete-page":
|
|
this.controller.deleteFromHistory();
|
|
break;
|
|
default:
|
|
super.handleCommandEvent(e);
|
|
break;
|
|
}
|
|
}
|
|
|
|
// We should let moz-button handle this, see bug 1875374.
|
|
handlePopupEvent(e) {
|
|
if (e.type == "popuphidden") {
|
|
this.menuButton.setAttribute("aria-expanded", false);
|
|
}
|
|
}
|
|
|
|
handleSidebarFocusedEvent() {
|
|
this.searchTextbox?.focus();
|
|
}
|
|
|
|
onPrimaryAction(e) {
|
|
navigateToLink(e);
|
|
}
|
|
|
|
onSecondaryAction(e) {
|
|
this.triggerNode = e.detail.item;
|
|
this.controller.deleteFromHistory();
|
|
}
|
|
|
|
/**
|
|
* The template to use for cards-container.
|
|
*/
|
|
get cardsTemplate() {
|
|
if (this.controller.isHistoryPending) {
|
|
// don't render cards until initial history visits entries are available
|
|
return "";
|
|
} else if (this.controller.searchResults) {
|
|
return this.#searchResultsTemplate();
|
|
} else if (!this.controller.isHistoryEmpty) {
|
|
return this.#historyCardsTemplate();
|
|
}
|
|
return this.#emptyMessageTemplate();
|
|
}
|
|
|
|
#historyCardsTemplate() {
|
|
const { historyVisits } = this.controller;
|
|
switch (this.controller.sortOption) {
|
|
case "date":
|
|
return historyVisits.map(
|
|
({ l10nId, items }, i) =>
|
|
html` <moz-card
|
|
type="accordion"
|
|
?expanded=${i < DAYS_EXPANDED_INITIALLY}
|
|
data-l10n-attrs="heading"
|
|
data-l10n-id=${l10nId}
|
|
data-l10n-args=${JSON.stringify({
|
|
date: items[0].time,
|
|
})}
|
|
>
|
|
<div>${this.#tabListTemplate(this.getTabItems(items))}</div>
|
|
</moz-card>`
|
|
);
|
|
case "site":
|
|
return historyVisits.map(
|
|
({ domain, items }) =>
|
|
html` <moz-card type="accordion" expanded heading=${domain}>
|
|
<div>${this.#tabListTemplate(this.getTabItems(items))}</div>
|
|
</moz-card>`
|
|
);
|
|
default:
|
|
return [];
|
|
}
|
|
}
|
|
|
|
#emptyMessageTemplate() {
|
|
let descriptionHeader;
|
|
let descriptionLabels;
|
|
let descriptionLink;
|
|
if (Services.prefs.getBoolPref(NEVER_REMEMBER_HISTORY_PREF, false)) {
|
|
// History pref set to never remember history
|
|
descriptionHeader = "firefoxview-dont-remember-history-empty-header-2";
|
|
descriptionLabels = [
|
|
"firefoxview-dont-remember-history-empty-description-one",
|
|
];
|
|
descriptionLink = {
|
|
url: "about:preferences#privacy",
|
|
name: "history-settings-url-two",
|
|
};
|
|
} else {
|
|
descriptionHeader = "firefoxview-history-empty-header";
|
|
descriptionLabels = [
|
|
"firefoxview-history-empty-description",
|
|
"firefoxview-history-empty-description-two",
|
|
];
|
|
descriptionLink = {
|
|
url: "about:preferences#privacy",
|
|
name: "history-settings-url",
|
|
};
|
|
}
|
|
return html`
|
|
<fxview-empty-state
|
|
headerLabel=${descriptionHeader}
|
|
.descriptionLabels=${descriptionLabels}
|
|
.descriptionLink=${descriptionLink}
|
|
class="empty-state history"
|
|
isSelectedTab
|
|
mainImageUrl="chrome://browser/content/firefoxview/history-empty.svg"
|
|
openLinkInParentWindow
|
|
>
|
|
</fxview-empty-state>
|
|
`;
|
|
}
|
|
|
|
#searchResultsTemplate() {
|
|
return html` <moz-card
|
|
data-l10n-attrs="heading"
|
|
data-l10n-id="sidebar-search-results-header"
|
|
data-l10n-args=${JSON.stringify({
|
|
query: this.controller.searchQuery,
|
|
})}
|
|
>
|
|
<div>
|
|
${when(
|
|
this.controller.searchResults.length,
|
|
() =>
|
|
html`<h3
|
|
slot="secondary-header"
|
|
data-l10n-id="firefoxview-search-results-count"
|
|
data-l10n-args="${JSON.stringify({
|
|
count: this.controller.searchResults.length,
|
|
})}"
|
|
></h3>`
|
|
)}
|
|
${this.#tabListTemplate(
|
|
this.getTabItems(this.controller.searchResults),
|
|
this.controller.searchQuery
|
|
)}
|
|
</div>
|
|
</moz-card>`;
|
|
}
|
|
|
|
#tabListTemplate(tabItems, searchQuery) {
|
|
return html`<sidebar-tab-list
|
|
maxTabsLength="-1"
|
|
.searchQuery=${searchQuery}
|
|
secondaryActionClass="delete-button"
|
|
.tabItems=${tabItems}
|
|
@fxview-tab-list-primary-action=${this.onPrimaryAction}
|
|
@fxview-tab-list-secondary-action=${this.onSecondaryAction}
|
|
>
|
|
</sidebar-tab-list>`;
|
|
}
|
|
|
|
onSearchQuery(e) {
|
|
this.controller.onSearchQuery(e);
|
|
}
|
|
|
|
getTabItems(items) {
|
|
return items.map(item => ({
|
|
...item,
|
|
secondaryL10nId: "sidebar-history-delete",
|
|
secondaryL10nArgs: null,
|
|
}));
|
|
}
|
|
|
|
openMenu(e) {
|
|
const menuPos = this.sidebarController._positionStart
|
|
? "after_start" // Sidebar is on the left. Open menu to the right.
|
|
: "after_end"; // Sidebar is on the right. Open menu to the left.
|
|
this._menu.openPopup(e.target, menuPos, 0, 0, false, false, e);
|
|
this.menuButton.setAttribute("aria-expanded", true);
|
|
}
|
|
|
|
willUpdate() {
|
|
this._menuSortByDate.setAttribute(
|
|
"checked",
|
|
this.controller.sortOption == "date"
|
|
);
|
|
this._menuSortBySite.setAttribute(
|
|
"checked",
|
|
this.controller.sortOption == "site"
|
|
);
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
${this.stylesheet()}
|
|
<link
|
|
rel="stylesheet"
|
|
href="chrome://browser/content/sidebar/sidebar-history.css"
|
|
/>
|
|
<div class="sidebar-panel">
|
|
<sidebar-panel-header
|
|
data-l10n-id="sidebar-menu-history-header"
|
|
data-l10n-attrs="heading"
|
|
view="viewHistorySidebar"
|
|
>
|
|
</sidebar-panel-header>
|
|
<div class="options-container">
|
|
<fxview-search-textbox
|
|
data-l10n-id="firefoxview-search-text-box-history"
|
|
data-l10n-attrs="placeholder"
|
|
@fxview-search-textbox-query=${this.onSearchQuery}
|
|
.size=${15}
|
|
></fxview-search-textbox>
|
|
<moz-button
|
|
class="menu-button"
|
|
@click=${this.openMenu}
|
|
data-l10n-id="sidebar-options-menu-button"
|
|
aria-haspopup="menu"
|
|
aria-expanded="false"
|
|
view=${this.view}
|
|
type="icon ghost"
|
|
iconsrc="chrome://global/skin/icons/more.svg"
|
|
>
|
|
</moz-button>
|
|
</div>
|
|
${this.cardsTemplate}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define("sidebar-history", SidebarHistory);
|