Merging upstream version 126.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 95 insertions, 25 deletions

diff --git a/browser/base/content/browser-sidebar.js b/browser/components/sidebar/browser-sidebar.js
index 2d730700a6..55664f8cfc 100644
--- a/browser/base/content/browser-sidebar.js
+++ b/browser/components/sidebar/browser-sidebar.js
@@ -36,7 +36,9 @@ var SidebarUI = {
         "viewHistorySidebar",
         makeSidebar({
           elementId: "sidebar-switcher-history",
-          url: "chrome://browser/content/places/historySidebar.xhtml",
+          url: this.sidebarRevampEnabled
+            ? "chrome://browser/content/sidebar/sidebar-history.html"
+            : "chrome://browser/content/places/historySidebar.xhtml",
           menuId: "menu_historySidebar",
           triggerButtonId: "appMenuViewHistorySidebar",
         }),
@@ -45,10 +47,20 @@ var SidebarUI = {
         "viewTabsSidebar",
         makeSidebar({
           elementId: "sidebar-switcher-tabs",
-          url: "chrome://browser/content/syncedtabs/sidebar.xhtml",
+          url: this.sidebarRevampEnabled
+            ? "chrome://browser/content/sidebar/sidebar-syncedtabs.html"
+            : "chrome://browser/content/syncedtabs/sidebar.xhtml",
           menuId: "menu_tabsSidebar",
         }),
       ],
+      [
+        "viewMegalistSidebar",
+        makeSidebar({
+          elementId: "sidebar-switcher-megalist",
+          url: "chrome://global/content/megalist/megalist.html",
+          menuId: "menu_megalistSidebar",
+        }),
+      ],
     ]));
   },
 
@@ -98,7 +110,7 @@ var SidebarUI = {
     return this._inited;
   },
 
-  init() {
+  async init() {
     this._box = document.getElementById("sidebar-box");
     this._splitter = document.getElementById("sidebar-splitter");
     this._reversePositionButton = document.getElementById(
@@ -108,12 +120,18 @@ var SidebarUI = {
     this._switcherTarget = document.getElementById("sidebar-switcher-target");
     this._switcherArrow = document.getElementById("sidebar-switcher-arrow");
 
-    this._switcherTarget.addEventListener("command", () => {
-      this.toggleSwitcherPanel();
-    });
-    this._switcherTarget.addEventListener("keydown", event => {
-      this.handleKeydown(event);
-    });
+    if (this.sidebarRevampEnabled) {
+      await import("chrome://browser/content/sidebar/sidebar-launcher.mjs");
+      document.getElementById("sidebar-launcher").hidden = false;
+      document.getElementById("sidebar-header").hidden = true;
+    } else {
+      this._switcherTarget.addEventListener("command", () => {
+        this.toggleSwitcherPanel();
+      });
+      this._switcherTarget.addEventListener("keydown", event => {
+        this.handleKeydown(event);
+      });
+    }
 
     this._inited = true;
 
@@ -122,6 +140,32 @@ var SidebarUI = {
     this._initDeferred.resolve();
   },
 
+  toggleMegalistItem() {
+    const sideMenuPopupItem = document.getElementById(
+      "sidebar-switcher-megalist"
+    );
+    sideMenuPopupItem.style.display = Services.prefs.getBoolPref(
+      "browser.megalist.enabled",
+      false
+    )
+      ? ""
+      : "none";
+  },
+
+  setMegalistMenubarVisibility(aEvent) {
+    const popup = aEvent.target;
+    if (popup != aEvent.currentTarget) {
+      return;
+    }
+
+    // Show the megalist item if enabled
+    const megalistItem = popup.querySelector("#menu_megalistSidebar");
+    megalistItem.hidden = !Services.prefs.getBoolPref(
+      "browser.megalist.enabled",
+      false
+    );
+  },
+
   uninit() {
     // If this is the last browser window, persist various values that should be
     // remembered for after a restart / reopening a browser window.
@@ -159,7 +203,7 @@ var SidebarUI = {
 
   /**
    * The handler for Services.obs.addObserver.
-   **/
+   */
   observe(_subject, topic, _data) {
     switch (topic) {
       case "intl:app-locales-changed": {
@@ -216,6 +260,7 @@ var SidebarUI = {
 
   /**
    * Handles keydown on the the switcherTarget button
+   *
    * @param  {Event} event
    */
   handleKeydown(event) {
@@ -241,6 +286,7 @@ var SidebarUI = {
   },
 
   showSwitcherPanel() {
+    this.toggleMegalistItem();
     this._switcherPanel.addEventListener(
       "popuphiding",
       () => {
@@ -292,19 +338,25 @@ var SidebarUI = {
     [...browser.children].forEach((node, i) => {
       node.style.order = i + 1;
     });
+    let sidebarLauncher = document.querySelector("sidebar-launcher");
 
     if (!this._positionStart) {
-      // DOM ordering is:     |  sidebar-box  | splitter |   appcontent  |
-      // Want to display as:  |   appcontent  | splitter |  sidebar-box  |
-      // So we just swap box and appcontent ordering
+      // DOM ordering is:     sidebar-launcher |  sidebar-box  | splitter |   appcontent  |
+      // Want to display as:  |   appcontent  | splitter |  sidebar-box  | sidebar-launcher
+      // So we just swap box and appcontent ordering and move sidebar-launcher to the end
       let appcontent = document.getElementById("appcontent");
       let boxOrdinal = this._box.style.order;
       this._box.style.order = appcontent.style.order;
+
       appcontent.style.order = boxOrdinal;
+      // the launcher should be on the right of the sidebar-box
+      sidebarLauncher.style.order = parseInt(this._box.style.order) + 1;
       // Indicate we've switched ordering to the box
       this._box.setAttribute("positionend", true);
+      sidebarLauncher.setAttribute("positionend", true);
     } else {
       this._box.removeAttribute("positionend");
+      sidebarLauncher.removeAttribute("positionend");
     }
 
     this.hideSwitcherPanel();
@@ -317,8 +369,9 @@ var SidebarUI = {
 
   /**
    * Try and adopt the status of the sidebar from another window.
+   *
    * @param {Window} sourceWindow - Window to use as a source for sidebar status.
-   * @return true if we adopted the state, or false if the caller should
+   * @returns {boolean} true if we adopted the state, or false if the caller should
    * initialize the state itself.
    */
   adoptFromWindow(sourceWindow) {
@@ -461,7 +514,7 @@ var SidebarUI = {
    * @param  {string}  commandID     ID of the sidebar.
    * @param  {DOMNode} [triggerNode] Node, usually a button, that triggered the
    *                                 visibility toggling of the sidebar.
-   * @return {Promise}
+   * @returns {Promise}
    */
   toggle(commandID = this.lastOpenedId, triggerNode) {
     if (
@@ -508,7 +561,7 @@ var SidebarUI = {
    * @param {string}  commandID     ID of the sidebar to use.
    * @param {DOMNode} [triggerNode] Node, usually a button, that triggered the
    *                                showing of the sidebar.
-   * @return {Promise<boolean>}
+   * @returns {Promise<boolean>}
    */
   async show(commandID, triggerNode) {
     let panelType = commandID.substring(4, commandID.length - 7);
@@ -537,7 +590,7 @@ var SidebarUI = {
    * when a window opens (not triggered by user interaction).
    *
    * @param {string} commandID ID of the sidebar.
-   * @return {Promise<boolean>}
+   * @returns {Promise<boolean>}
    */
   async showInitially(commandID) {
     let panelType = commandID.substring(4, commandID.length - 7);
@@ -559,31 +612,40 @@ var SidebarUI = {
    * when a window is opened and we don't want to ping telemetry.
    *
    * @param {string} commandID ID of the sidebar.
-   * @return {Promise<void>}
+   * @returns {Promise<void>}
    */
   _show(commandID) {
     return new Promise(resolve => {
-      this.selectMenuItem(commandID);
+      if (this.sidebarRevampEnabled) {
+        this._box.dispatchEvent(
+          new CustomEvent("sidebar-show", { detail: { viewId: commandID } })
+        );
+      } else {
+        this.hideSwitcherPanel();
+      }
 
+      this.selectMenuItem(commandID);
       this._box.hidden = this._splitter.hidden = false;
+      // sets the sidebar to the left or right, based on a pref
       this.setPosition();
 
-      this.hideSwitcherPanel();
-
       this._box.setAttribute("checked", "true");
       this._box.setAttribute("sidebarcommand", commandID);
-      this.lastOpenedId = commandID;
 
       let { url, title, sourceL10nEl } = this.sidebars.get(commandID);
+
+      // use to live update <tree> elements if the locale changes
+      this.lastOpenedId = commandID;
       this.title = title;
-      // Keep the title element in sync with any l10n changes.
+      // Keep the title element in the switcher in sync with any l10n changes.
       this.observeTitleChanges(sourceL10nEl);
+
       this.browser.setAttribute("src", url); // kick off async load
 
       if (this.browser.contentDocument.location.href != url) {
         this.browser.addEventListener(
           "load",
-          event => {
+          () => {
             // We're handling the 'load' event before it bubbles up to the usual
             // (non-capturing) event handlers. Let it bubble up before resolving.
             setTimeout(() => {
@@ -616,7 +678,9 @@ var SidebarUI = {
     }
 
     this.hideSwitcherPanel();
-
+    if (this.sidebarRevampEnabled) {
+      this._box.dispatchEvent(new CustomEvent("sidebar-hide"));
+    }
     this.selectMenuItem("");
 
     // Replace the document currently displayed in the sidebar with about:blank
@@ -672,3 +736,9 @@ XPCOMUtils.defineLazyPreferenceGetter(
   true,
   SidebarUI.setPosition.bind(SidebarUI)
 );
+XPCOMUtils.defineLazyPreferenceGetter(
+  SidebarUI,
+  "sidebarRevampEnabled",
+  "sidebar.revamp",
+  false
+);