Bug 1772891 - follow-up - set virtual folder styles when dialog loaded. r=aleca

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

--HG--
extra : amend_source : 9a95180651c18262212afc1a48a3f938adee06b9

mailnews/base/content/virtualFolderProperties.js

@@ -12,22 +12,8 @@ var gSearchTermSession; // really an in memory temporary filter we use to read i
 var gSearchFolderURIs = "";
 var gMessengerBundle = null;
 var gFolderBundle = null;
-const styles = getComputedStyle(document.body);
-const folderColors = {
-  Inbox: styles.getPropertyValue("--folder-color-inbox"),
-  Sent: styles.getPropertyValue("--folder-color-sent"),
-  Outbox: styles.getPropertyValue("--folder-color-outbox"),
-  Drafts: styles.getPropertyValue("--folder-color-draft"),
-  Trash: styles.getPropertyValue("--folder-color-trash"),
-  Archive: styles.getPropertyValue("--folder-color-archive"),
-  Templates: styles.getPropertyValue("--folder-color-template"),
-  Spam: styles.getPropertyValue("--folder-color-spam"),
-  Virtual: styles.getPropertyValue("--folder-color-folder-filter"),
-  RSS: styles.getPropertyValue("--folder-color-rss"),
-  Newsgroup: styles.getPropertyValue("--folder-color-newsletter"),
-};
-var kCurrentColor = "";
-var kDefaultColor = styles.getPropertyValue("--folder-color-folder");
+var gCurrentColor = "";
+var gDefaultColor = "";
 var gNeedToRestoreFolderSelection = false;
 var { PluralForm } = ChromeUtils.importESModule(
   "resource://gre/modules/PluralForm.sys.mjs"
@@ -162,6 +148,22 @@ function InitDialogWithVirtualFolder(aVirtualFolder) {
     window.arguments[0].folder
   );
 
+  let styles = getComputedStyle(document.body);
+  let folderColors = {
+    Inbox: styles.getPropertyValue("--folder-color-inbox"),
+    Sent: styles.getPropertyValue("--folder-color-sent"),
+    Outbox: styles.getPropertyValue("--folder-color-outbox"),
+    Drafts: styles.getPropertyValue("--folder-color-draft"),
+    Trash: styles.getPropertyValue("--folder-color-trash"),
+    Archive: styles.getPropertyValue("--folder-color-archive"),
+    Templates: styles.getPropertyValue("--folder-color-template"),
+    Spam: styles.getPropertyValue("--folder-color-spam"),
+    Virtual: styles.getPropertyValue("--folder-color-folder-filter"),
+    RSS: styles.getPropertyValue("--folder-color-rss"),
+    Newsgroup: styles.getPropertyValue("--folder-color-newsletter"),
+  };
+  gDefaultColor = styles.getPropertyValue("--folder-color-folder");
+
   // when editing an existing folder, hide the folder picker that stores the parent location of the folder
   document.getElementById("msgNewFolderPicker").collapsed = true;
   document.getElementById("chooseFolderLocationLabel").collapsed = true;
@@ -172,7 +174,7 @@ function InitDialogWithVirtualFolder(aVirtualFolder) {
   document.getElementById("iconColorContainer").collapsed = false;
   // Store the current icon color to allow discarding edits.
   gFolderTreeView = window.arguments[0].treeView;
-  kCurrentColor = gFolderTreeView.getFolderCacheProperty(
+  gCurrentColor = gFolderTreeView.getFolderCacheProperty(
     aVirtualFolder,
     "folderIconColor"
   );
@@ -194,11 +196,11 @@ function InitDialogWithVirtualFolder(aVirtualFolder) {
   }
 
   if (Object.keys(folderColors).includes(selectedFolderName)) {
-    kDefaultColor = folderColors[selectedFolderName];
+    gDefaultColor = folderColors[selectedFolderName];
   }
 
   let colorInput = document.getElementById("color");
-  colorInput.value = kCurrentColor ? kCurrentColor : kDefaultColor;
+  colorInput.value = gCurrentColor || gDefaultColor;
   colorInput.addEventListener("input", event => {
     window.arguments[0].previewSelectedColorCallback(
       aVirtualFolder,
@@ -265,7 +267,7 @@ function onOK(event) {
 
     // Check if the icon color was updated.
     if (
-      kCurrentColor !=
+      gCurrentColor !=
       gFolderTreeView.getFolderCacheProperty(
         window.arguments[0].folder,
         "folderIconColor"
@@ -330,7 +332,7 @@ function onCancel(event) {
     // Restore the icon to the previous color and discard edits.
     window.arguments[0].previewSelectedColorCallback(
       window.arguments[0].folder,
-      kCurrentColor
+      gCurrentColor
     );
   }
 
@@ -421,7 +423,7 @@ function inputColorClicked() {
  */
 function resetColor() {
   inputColorClicked();
-  document.getElementById("color").value = kDefaultColor;
+  document.getElementById("color").value = gDefaultColor;
   window.arguments[0].previewSelectedColorCallback(
     window.arguments[0].folder,
     null