1 files changed, 65 insertions, 0 deletions
diff --git a/browser/components/firefoxview/recentbrowsing.mjs b/browser/components/firefoxview/recentbrowsing.mjs
new file mode 100644
index 0000000000..cd832d2c2f
--- /dev/null
+++ b/browser/components/firefoxview/recentbrowsing.mjs
@@ -0,0 +1,65 @@
+/* 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",
+  };
+
+  static properties = {
+    ...ViewPage.properties,
+  };
+
+  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.css"
+      />
+      <div class="sticky-container bottom-fade">
+        <h2 class="page-header" 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"
+              .size=${this.searchTextboxSize}
+              pageName="recentbrowsing"
+            ></fxview-search-textbox>
+          </div>`
+        )}
+      </div>
+      <div class="cards-container">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+customElements.define("view-recentbrowsing", RecentBrowsingInView);