forked from mirrors/gecko-dev
25237524ed
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
62 lines
1.7 KiB
JavaScript
62 lines
1.7 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/. */
|
|
|
|
import { html, when } from "chrome://global/content/vendor/lit.all.mjs";
|
|
import { ViewPage } from "./viewpage.mjs";
|
|
import { isSearchEnabled } from "./helpers.mjs";
|
|
|
|
class RecentBrowsingInView extends ViewPage {
|
|
constructor() {
|
|
super();
|
|
this.pageType = "recentbrowsing";
|
|
}
|
|
|
|
static queries = {
|
|
searchTextbox: "fxview-search-textbox",
|
|
};
|
|
|
|
viewVisibleCallback() {
|
|
for (let child of this.children) {
|
|
let childView = child.firstElementChild;
|
|
childView.paused = false;
|
|
childView.viewVisibleCallback();
|
|
}
|
|
}
|
|
|
|
viewHiddenCallback() {
|
|
for (let child of this.children) {
|
|
let childView = child.firstElementChild;
|
|
childView.paused = true;
|
|
childView.viewHiddenCallback();
|
|
}
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<link
|
|
rel="stylesheet"
|
|
href="chrome://browser/content/firefoxview/firefoxview-next.css"
|
|
/>
|
|
<div class="sticky-container bottom-fade">
|
|
<h2
|
|
class="page-header heading-large"
|
|
data-l10n-id="firefoxview-overview-header"
|
|
></h2>
|
|
${when(
|
|
isSearchEnabled(),
|
|
() => html`<div class="search-container">
|
|
<fxview-search-textbox
|
|
data-l10n-id="firefoxview-search-text-box-recentbrowsing"
|
|
data-l10n-attrs="placeholder"
|
|
></fxview-search-textbox>
|
|
</div>`
|
|
)}
|
|
</div>
|
|
<div class="cards-container">
|
|
<slot></slot>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
customElements.define("view-recentbrowsing", RecentBrowsingInView);
|