Bug 1803571 - Seed unified toolbar contents from default state. r=aleca

Differential Revision: https://phabricator.services.mozilla.com/D163875

--HG--
extra : rebase_source : c00a5300e1e788ce02f513e5dd70388550a1d48a
extra : histedit_source : d0db1a3e34f680b2deeab43664b218f2425f6e95

mail/base/content/messenger.xhtml

@@ -91,6 +91,7 @@
   <link rel="localization" href="messenger/messageheader/headerFields.ftl" />
   <link rel="localization" href="messenger/mailWidgets.ftl" />
   <link rel="localization" href="messenger/unifiedToolbar.ftl" />
+  <link rel="localization" href="messenger/unifiedToolbarItems.ftl" />
 
   <title>&titledefault.label;@PRE_RELEASE_SUFFIX@</title>
 

mail/components/unifiedToolbar/content/unified-toolbar-customization.mjs

@@ -28,7 +28,6 @@ class UnifiedToolbarCustomization extends HTMLElement {
     }
     this.hasConnected = true;
 
-    document.l10n.addResourceIds(["messenger/unifiedToolbarItems.ftl"]);
     const template = document
       .getElementById("unifiedToolbarCustomizationTemplate")
       .content.cloneNode(true);

mail/components/unifiedToolbar/content/unified-toolbar.mjs

@@ -2,8 +2,8 @@
  * 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/. */
 
-// Temporary, should be dynamically loaded based on customiozation state.
-import "./search-bar.mjs"; // eslint-disable-line import/no-unassigned-import
+import { getDefaultItemIdsForSpace } from "resource:///modules/CustomizableItems.mjs";
+import "./customizable-element.mjs"; // eslint-disable-line import/no-unassigned-import
 
 /**
  * Unified toolbar container custom element. Used to contain the state
@@ -12,6 +12,13 @@ import "./search-bar.mjs"; // eslint-disable-line import/no-unassigned-import
  * document.
  */
 class UnifiedToolbar extends HTMLElement {
+  /**
+   * List containing the customizable content of the unified toolbar.
+   *
+   * @type {?HTMLUListElement}
+   */
+  #toolbarContent = null;
+
   connectedCallback() {
     if (this.hasConnected) {
       return;
@@ -23,6 +30,8 @@ class UnifiedToolbar extends HTMLElement {
       .getElementById("unifiedToolbarTemplate")
       .content.cloneNode(true);
 
+    // TODO Don't show context menu when there is a native one, like for example
+    // in a search field.
     template
       .querySelector("#unifiedToolbarContainer")
       .addEventListener("contextmenu", event => {
@@ -30,6 +39,8 @@ class UnifiedToolbar extends HTMLElement {
           .getElementById("unifiedToolbarMenu")
           .openPopupAtScreen(event.screenX, event.screenY, true);
       });
+    this.#toolbarContent = template.querySelector("#unifiedToolbarContent");
+    this.initialize();
 
     this.append(template);
 
@@ -58,5 +69,21 @@ class UnifiedToolbar extends HTMLElement {
     );
     document.body.appendChild(customization);
   }
+
+  /**
+   * Initialize the unified toolbar contents.
+   */
+  initialize() {
+    const defaultItems = getDefaultItemIdsForSpace();
+    this.#toolbarContent.replaceChildren(
+      ...defaultItems.map(itemId => {
+        const element = document.createElement("li", {
+          is: "customizable-element",
+        });
+        element.setAttribute("item-id", itemId);
+        return element;
+      })
+    );
+  }
 }
 customElements.define("unified-toolbar", UnifiedToolbar);

mail/components/unifiedToolbar/content/unifiedToolbarTemplates.inc.xhtml

@@ -19,8 +19,8 @@
   <html:div id="unifiedToolbarContainer">
     <html:div id="unifiedToolbar" role="toolbar">
 #include ../../../base/content/spacesToolbarPin.inc.xhtml
-      <html:div id="unifiedToolbarContent">
-      </html:div>
+      <html:ul id="unifiedToolbarContent">
+      </html:ul>
       <html:div id="notification-popup-box" hidden="true">
         <html:img id="addons-notification-icon"
                   src="chrome://messenger/skin/icons/new/compact/extension.svg"

mail/themes/shared/mail/unifiedToolbar.css

@@ -29,17 +29,32 @@
   flex: 1 1 auto;
   display: flex;
   justify-content: start;
+  align-items: center;
+  list-style-type: none;
+  overflow: hidden;
+  flex-wrap: nowrap;
+  margin: 0;
+  padding: 0;
 }
 
-.spacer {
+#unifiedToolbarContent li {
+  padding: 0;
+  margin: 0;
+}
+
+#unifiedToolbarContent [is="customizable-element"] .preview {
+  display: none;
+}
+
+#unifiedToolbarContent .spacer {
   flex: 1 1 auto;
 }
 
-.search-bar {
+#unifiedToolbarContent .search-bar {
   flex: 1 0 33%;
 }
 
-.search-button-icon {
+#unifiedToolbarContent .search-button-icon {
   content: var(--icon-search);
 }
 

mail/themes/shared/mail/unifiedToolbarCustomizationPane.css

@@ -32,6 +32,8 @@
   height: 2em;
   align-items: center;
   justify-content: start;
+  overflow: hidden;
+  flex-wrap: nowrap;
 }
 
 /* TODO factor out stuff shared with real toolbar? */