# HG changeset patch # User Alessandro Castellani # Date 1590617261 25200 # Wed May 27 15:07:41 2020 -0700 # Node ID 452b2f5ddc5374f2b8cdd92f2b6fa53648cf91bb # Parent 1317619f493e6c9718d92299ece67ec97e287254 Bug 1637668 - Follow up improvements to Folder Pane icons colour customization. r=mkmelin diff --git a/mail/base/content/folderPane.js b/mail/base/content/folderPane.js --- a/mail/base/content/folderPane.js +++ b/mail/base/content/folderPane.js @@ -145,18 +145,20 @@ var gFolderTreeView = { /** * Called when the window is initially loaded. This function initializes the * folder-pane to the view last shown before the application was closed. */ load(aTree, aJSONFile) { this._treeElement = aTree; this.messengerBundle = document.getElementById("bundle_messenger"); - this.inlineStyle = document.getElementById("inlineStyle"); - this.previewStyle = document.getElementById("previewStyle"); + this.folderColorStyle = document.getElementById("folderColorsStyle"); + this.folderColorPreview = document.getElementById( + "folderColorsStylePreview" + ); // The folder pane can be used for other trees which may not have these // elements. Collapse them if no account is currently available. let hasAccounts = MailServices.accounts.accounts.length > 0; if (document.getElementById("folderpane_splitter")) { document.getElementById("folderpane_splitter").collapsed = !hasAccounts; } if (document.getElementById("folderPaneBox")) { @@ -1705,16 +1707,18 @@ var gFolderTreeView = { // Store the color in the cache property so we can use this for // properties changes and updates. gFolderTreeView.setFolderCacheProperty( this._rowMap[i]._folder, "folderIconColor", iconColor ); this.appendColor(iconColor); + // Null out to avoid memory bloat. + folder.msgDatabase = null; } } }, _sortedAccounts() { let accounts = allAccountsSorted(true); // Don't show deferred pop accounts. @@ -2621,24 +2625,28 @@ var gFolderTreeView = { }, /** * Append inline CSS style for those icons where a custom color was defined. * * @param {string} iconColor - The hash color. */ appendColor(iconColor) { - if (!this.inlineStyle || !iconColor) { + if (!this.folderColorStyle || !iconColor) { return; } - let selector = `customColor-${iconColor.replace("#", "")}`; - - // Append the inline CSS styling. - this.inlineStyle.textContent += `treechildren::-moz-tree-image(folderNameCol, ${selector}) {fill: ${iconColor};}`; + // Append the new CSS styling. + this.folderColorStyle.sheet.insertRule( + `treechildren::-moz-tree-image(folderNameCol, customColor-${iconColor.replace( + "#", + "" + )}) {fill: ${iconColor};}`, + this.folderColorStyle.sheet.cssRules.length + ); }, }; /** * The ftvItem object represents a single row in the tree view. Because I'm lazy * I'm just going to define the expected interface here. You are free to return * an alternative object, provided that it matches this interface: * @@ -3384,59 +3392,59 @@ var gFolderTreeController = { /** * Update the inline preview style in the messagener.xhtml file to show * users a preview of the defined color. * * @param {ftvItem} folder - The folder where the color is defined. * @param {string} newColor - The new hash color to preview. */ previewSelectedColor(folder, newColor) { - // If the color is null, it measn we're resetting to the default value. + // If the color is null, it means we're resetting to the default value. if (!newColor) { gFolderTreeView.setFolderCacheProperty(folder, "folderIconColor", ""); // Clear the preview CSS. - gFolderTreeView.previewStyle.textContent = ""; + gFolderTreeView.folderColorPreview.textContent = ""; // Force the folder update to see the new color. gFolderTreeView._tree.invalidateRow( gFolderTreeView.getIndexOfFolder(folder) ); return; } // Add the new color property. gFolderTreeView.setFolderCacheProperty(folder, "folderIconColor", newColor); let selector = `customColor-${newColor.replace("#", "")}`; // Add the inline CSS styling. - gFolderTreeView.previewStyle.textContent = `treechildren::-moz-tree-image(folderNameCol, ${selector}) {fill: ${newColor};}`; + gFolderTreeView.folderColorPreview.textContent = `treechildren::-moz-tree-image(folderNameCol, ${selector}) {fill: ${newColor};}`; // Force the folder update to set the new color. gFolderTreeView._tree.invalidateRow( gFolderTreeView.getIndexOfFolder(folder) ); }, /** * Clear the preview style and add the new selected color to the persistent * inline style in the messenger.xhtml file. * * @param {ftvItem} folder - The folder where the new color was defined. */ updateColor(folder) { // Clear the preview CSS. - gFolderTreeView.previewStyle.textContent = ""; + gFolderTreeView.folderColorPreview.textContent = ""; let newColor = gFolderTreeView.getFolderCacheProperty( folder, "folderIconColor" ); - // Append new incline color if defined. + // Append new inline color if defined. gFolderTreeView.appendColor(newColor); // Store the new color in the Folder database. folder.msgDatabase.dBFolderInfo.setCharProperty( "folderIconColor", newColor ); diff --git a/mail/base/content/messenger.xhtml b/mail/base/content/messenger.xhtml --- a/mail/base/content/messenger.xhtml +++ b/mail/base/content/messenger.xhtml @@ -39,20 +39,16 @@ - - - - # All DTD information is stored in a separate file so that it can be shared by # hiddenWindowMac.xhtml.