Bug 736243 - Show category colours in the category selection menulist. r=aleca

Adds a colour for each selected category. When no categories are selected, it looks just like an ordinary menulist.
When one category is selected, the colour blob lines up with that in the calendar selection menulist.

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

--HG--
extra : moz-landing-system : lando

calendar/base/modules/utils/calViewUtils.jsm

@@ -452,7 +452,12 @@ calview.colorTracker = {
     }
 
     let style = aDocument.documentElement.style;
-    let color = this.categoryBranch.getStringPref(aCategoryName, "transparent");
+    let color = this.categoryBranch.getStringPref(aCategoryName, "");
+    if (color == "") {
+      // Don't use the getStringPref default, the value might actually be ""
+      // and we don't want that.
+      color = "transparent";
+    }
     style.setProperty(`--category-${aCategoryName}-color`, color);
   },
   _addAllCategoriesToDocument(aDocument) {

calendar/base/themes/common/dialogs/calendar-event-dialog.css

@@ -194,19 +194,39 @@ label.label {
 .item-calendar,
 #item-categories {
   flex: 1;
+  width: 100%;
 }
 
 #item-calendar::part(icon) {
   margin-inline: 7px 3px;
 }
+
 #item-calendar::part(icon),
-#item-calendar > menupopup > menuitem .menu-iconic-icon {
+#item-calendar > menupopup > menuitem .menu-iconic-icon,
+#item-categories::part(color),
+#item-categories > menupopup > menuitem .menu-iconic-icon {
   width: 10px;
   height: 10px;
   border-radius: 5px;
   background-color: var(--item-color);
 }
 
+#item-categories::part(color) {
+  margin-inline-end: 1px;
+}
+
+#item-categories::part(color first) {
+  margin-inline-start: 7px;
+}
+
+#item-categories::part(color last) {
+  margin-inline-end: 3px !important;
+}
+
+#item-categories-textbox {
+  margin: 0 8px;
+}
+
 #event-grid-item-calendar-td,
 #event-grid-category-color-td,
 .event-input-td {
@@ -261,16 +281,6 @@ label.label {
   padding: 0;
 }
 
-#item-categories-textbox {
-  margin: 0 8px;
-}
-
-#item-calendar,
-.item-calendar,
-#item-categories {
-  width: 100%;
-}
-
 .datepicker-menulist {
   margin-left: 0 !important;
 }

calendar/base/themes/linux/dialogs/calendar-event-dialog.css

@@ -2,6 +2,10 @@
  * 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/. */
 
+#item-categories > menupopup > menuitem .menu-iconic-icon {
+  margin-inline-start: 16px;
+}
+
 /*--------------------------------------------------------------------
  *   Event dialog keep duration button
  *-------------------------------------------------------------------*/

calendar/base/themes/windows/dialogs/calendar-event-dialog.css

@@ -2,6 +2,11 @@
  * 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/. */
 
+#item-categories > menupopup > menuitem .menu-iconic-icon {
+  display: inline;
+  margin-inline: 28px -4px;
+}
+
 /*--------------------------------------------------------------------
  *   Event dialog keep duration button
  *-------------------------------------------------------------------*/

calendar/lightning/content/lightning-item-iframe.js

@@ -970,6 +970,8 @@ function loadCategories(aItem) {
     if (itemCategories.includes(cat)) {
       item.setAttribute("checked", "true");
     }
+    let cssSafeId = cal.view.formatStringForCSSRule(cat);
+    item.style.setProperty("--item-color", `var(--category-${cssSafeId}-color)`);
     categoryPopup.appendChild(item);
   }
 
@@ -1006,6 +1008,26 @@ function updateCategoryMenulist() {
     label = cal.l10n.getCalString("None");
   }
   categoryMenulist.setAttribute("label", label);
+
+  let labelBox = categoryMenulist.shadowRoot.querySelector("#label-box");
+  let labelLabel = labelBox.querySelector("#label");
+  for (let box of labelBox.querySelectorAll("box")) {
+    box.remove();
+  }
+  for (let i = 0; i < categoryList.length; i++) {
+    let box = labelBox.insertBefore(document.createXULElement("box"), labelLabel);
+    // Normal CSS selectors like :first-child don't work on shadow DOM items,
+    // so we have to set up something they do work on.
+    let parts = ["color"];
+    if (i == 0) {
+      parts.push("first");
+    }
+    if (i == categoryList.length - 1) {
+      parts.push("last");
+    }
+    box.setAttribute("part", parts.join(" "));
+    box.style.setProperty("--item-color", categoryList[i].style.getPropertyValue("--item-color"));
+  }
 }
 
 /**