Bug 606683 - Allow customization of toolbars in Composer and formatting toolbar in MailNews Composition - formatting toolbar part. r=frg DONTBUILD
authorIan Neal <iann_cvs@blueyonder.co.uk>
Tue, 07 Apr 2020 21:50:42 +0100
changeset 39188 e66503accfbafa9aaef7d71e1b5a2f1d088debad
parent 39187 fdd49148dcc159bf1a51633e3b9acf3a14d345f9
child 39189 ca7b96352c89729abcfa11f6798dea94487e5a0d
push id402
push userclokep@gmail.com
push dateMon, 29 Jun 2020 20:48:04 +0000
reviewersfrg
bugs606683
Bug 606683 - Allow customization of toolbars in Composer and formatting toolbar in MailNews Composition - formatting toolbar part. r=frg DONTBUILD
editor/ui/composer.js
editor/ui/composer/content/editingOverlay.js
editor/ui/composer/content/editor.js
editor/ui/composer/content/editor.xhtml
editor/ui/composer/content/editorOverlay.xhtml
editor/ui/composer/content/editorPrefsOverlay.xhtml
editor/ui/composer/content/pref-toolbars.xhtml
editor/ui/jar.mn
editor/ui/locales/en-US/chrome/composer/editorOverlay.dtd
editor/ui/locales/en-US/chrome/composer/editorPrefsOverlay.dtd
editor/ui/locales/en-US/chrome/composer/editorSmileyOverlay.dtd
editor/ui/locales/en-US/chrome/composer/pref-toolbars.dtd
editor/ui/locales/jar.mn
suite/base/content/utilityOverlay.js
suite/mailnews/components/compose/content/MsgComposeCommands.js
suite/mailnews/components/compose/content/messengercompose.xul
suite/themes/classic/editor/editorFormatToolbar.css
suite/themes/classic/jar.mn
suite/themes/classic/mac/editor/editorFormatToolbar.css
suite/themes/modern/editor/editorFormatToolbar.css
suite/themes/modern/jar.mn
--- a/editor/ui/composer.js
+++ b/editor/ui/composer.js
@@ -27,30 +27,16 @@ pref("editor.hrule.width",              
 pref("editor.hrule.width_percent",          true);
 pref("editor.hrule.shading",                true);
 pref("editor.hrule.align",                  1); // center
 
 pref("editor.table.maintain_structure", true);
 
 pref("editor.prettyprint", true);
 
-pref("editor.toolbars.showbutton.bold", true);
-pref("editor.toolbars.showbutton.italic", true);
-pref("editor.toolbars.showbutton.underline", true);
-pref("editor.toolbars.showbutton.DecreaseFontSize", true);
-pref("editor.toolbars.showbutton.IncreaseFontSize", true);
-pref("editor.toolbars.showbutton.ul", true);
-pref("editor.toolbars.showbutton.ol", true);
-pref("editor.toolbars.showbutton.outdent", true);
-pref("editor.toolbars.showbutton.indent", true);
-
-pref("editor.toolbars.showbutton.absolutePosition", true);
-pref("editor.toolbars.showbutton.decreaseZIndex", true);
-pref("editor.toolbars.showbutton.increaseZIndex", true);
-
 pref("editor.history.url_maximum", 10);
 
 pref("editor.publish.",                      "");
 pref("editor.lastFileLocation.image",        "");
 pref("editor.lastFileLocation.html",         "");
 pref("editor.save_associated_files",         true);
 pref("editor.always_show_publish_dialog",    false);
 
--- a/editor/ui/composer/content/editingOverlay.js
+++ b/editor/ui/composer/content/editingOverlay.js
@@ -41,17 +41,16 @@ function EditorOnLoad()
           charset = arrayArgComponents[1];
       }
     }
   }
 
   // XUL elements we use when switching from normal editor to edit source.
   gContentWindowDeck = document.getElementById("ContentWindowDeck");
   gFormatToolbar = document.getElementById("FormatToolbar");
-  gViewFormatToolbar = document.getElementById("viewFormatToolbar");
 
   // Continue with normal startup.
   EditorStartup(url, charset);
 
   // Hide Highlight button if we are in an HTML editor with CSS mode off
   // and tell the editor if a CR in a paragraph creates a new paragraph.
   var cmd = document.getElementById("cmd_highlight");
   if (cmd) {
@@ -172,19 +171,16 @@ function EditorStartup(aUrl, aCharset)
   // EditorSharedStartup also used by Message Composer.
   EditorSharedStartup();
 
   // Commands specific to the Composer Application window,
   //  (i.e., not embedded editors)
   //  such as file-related commands, HTML Source editing, Edit Modes...
   SetupComposerWindowCommands();
 
-  ShowHideToolbarButtons();
-  gEditorToolbarPrefListener = new nsPrefListener(kEditorToolbarPrefs);
-
   gCSSPrefListener = new nsPrefListener(kUseCssPref);
   gReturnInParagraphPrefListener = new nsPrefListener(kCRInParagraphsPref);
   Services.obs.addObserver(EditorCanClose, "quit-application-requested");
 
   // Get url for editor content and load it. The editor gets instantiated by
   // the editingSession when the URL has finished loading.
   try {
     var contentViewer = GetCurrentEditorElement().markupDocumentViewer;
@@ -198,17 +194,16 @@ function EditorStartup(aUrl, aCharset)
   editorToolbox.customizeDone = EditorToolboxCustomizeDone;
   editorToolbox.customizeChange = EditorToolboxCustomizeChange;
 }
 
 function EditorShutdown()
 {
   Services.obs.removeObserver(EditorCanClose, "quit-application-requested");
 
-  gEditorToolbarPrefListener.shutdown();
   gCSSPrefListener.shutdown();
   gReturnInParagraphPrefListener.shutdown();
 
   try
   {
     var commandManager = GetCurrentCommandManager();
     commandManager.removeCommandObserver(gEditorDocumentObserver,
                                          "obs_documentCreated");
--- a/editor/ui/composer/content/editor.js
+++ b/editor/ui/composer/content/editor.js
@@ -50,17 +50,16 @@ var gPreviousNonSourceDisplayMode = 1;
 var gEditorDisplayMode = -1;
 var gDocWasModified = false; // Check if clean document, if clean then unload when user "Opens"
 var gContentWindow = 0;
 var gSourceContentWindow = 0;
 var gSourceTextEditor = null;
 var gContentWindowDeck;
 var gFormatToolbar;
 var gFormatToolbarHidden = false;
-var gViewFormatToolbar;
 var gChromeState;
 var gColorObj = {
   LastTextColor: "",
   LastBackgroundColor: "",
   LastHighlightColor: "",
   Type: "",
   SelectedType: "",
   NoDefault: false,
@@ -70,17 +69,16 @@ var gColorObj = {
   PageColor: "",
   TextColor: "",
   TableColor: "",
   CellColor: "",
 };
 var gDefaultTextColor = "";
 var gDefaultBackgroundColor = "";
 var gCSSPrefListener;
-var gEditorToolbarPrefListener;
 var gReturnInParagraphPrefListener;
 var gLocalFonts = null;
 
 var gLastFocusNode = null;
 var gLastFocusNodeWasSelected = false;
 
 // These must be kept in synch with the XUL <options> lists
 var gFontSizeNames = [
@@ -90,59 +88,19 @@ var gFontSizeNames = [
   "medium",
   "large",
   "x-large",
   "xx-large",
 ];
 
 var nsIFilePicker = Ci.nsIFilePicker;
 
-var kEditorToolbarPrefs = "editor.toolbars.showbutton.";
 var kUseCssPref = "editor.use_css";
 var kCRInParagraphsPref = "editor.CR_creates_new_p";
 
-function ShowHideToolbarSeparators(toolbar) {
-  // Make sure the toolbar actually exists.
-  if (!toolbar) {
-    return;
-  }
-  var childNodes = toolbar.childNodes;
-  var separator = null;
-  var hideSeparator = true;
-  for (var i = 0; childNodes[i].localName != "spacer"; i++) {
-    if (childNodes[i].localName == "toolbarseparator") {
-      if (separator) {
-        separator.hidden = true;
-      }
-      separator = childNodes[i];
-    } else if (!childNodes[i].hidden) {
-      if (separator) {
-        separator.hidden = hideSeparator;
-      }
-      separator = null;
-      hideSeparator = false;
-    }
-  }
-}
-
-function ShowHideToolbarButtons() {
-  let array = Services.prefs.getChildList(kEditorToolbarPrefs);
-  for (let i in array) {
-    let prefName = array[i];
-    let id = prefName.substr(kEditorToolbarPrefs.length);
-    let button =
-      document.getElementById(id + "Button") ||
-      document.getElementById(id + "-button");
-    if (button) {
-      button.hidden = !Services.prefs.getBoolPref(prefName);
-    }
-  }
-  ShowHideToolbarSeparators(document.getElementById("FormatToolbar"));
-}
-
 function nsPrefListener(prefName) {
   this.startup(prefName);
 }
 
 // implements nsIObserver
 nsPrefListener.prototype = {
   domain: "",
   startup(prefName) {
@@ -184,23 +142,16 @@ nsPrefListener.prototype = {
           cmd.setAttribute("state", "transparent");
           cmd.collapsed = true;
         }
 
         if (editor) {
           editor.isCSSEnabled = useCSS;
         }
       }
-    } else if (prefName.startsWith(kEditorToolbarPrefs)) {
-      let id = prefName.substr(kEditorToolbarPrefs.length) + "Button";
-      let button = document.getElementById(id);
-      if (button) {
-        button.hidden = !Services.prefs.getBoolPref(prefName);
-        ShowHideToolbarSeparators(button.parentNode);
-      }
     } else if (editor && prefName == kCRInParagraphsPref) {
       editor.returnInParagraphCreatesNewParagraph = Services.prefs.getBoolPref(
         prefName
       );
     }
   },
 };
 
@@ -364,17 +315,16 @@ var gEditorDocumentObserver = {
             HideItem("fileExportToText");
             HideItem("previewInBrowser");
 
             /* XXX When paste actually converts formatted rich text to pretty formatted plain text
        and pasteNoFormatting is fixed to paste the text without formatting (what paste
        currently does), then this item shouldn't be hidden: */
             HideItem("menu_pasteNoFormatting");
 
-            HideItem("cmd_viewFormatToolbar");
             HideItem("cmd_viewEditModeToolbar");
 
             HideItem("viewSep1");
             HideItem("viewNormalMode");
             HideItem("viewAllTagsMode");
             HideItem("viewSourceMode");
             HideItem("viewPreviewMode");
 
@@ -2002,17 +1952,17 @@ function SetDisplayMode(mode) {
   ResetStructToolbar();
   if (mode == kDisplayModeSource) {
     // Switch to the sourceWindow (second in the deck)
     gContentWindowDeck.selectedIndex = 1;
 
     // Hide the formatting toolbar if not already hidden
     gFormatToolbarHidden = gFormatToolbar.hidden;
     gFormatToolbar.hidden = true;
-    gViewFormatToolbar.hidden = true;
+    gFormatToolbar.setAttribute("hideinmenu", "true");
 
     gSourceContentWindow.contentWindow.focus();
   } else {
     // Save the last non-source mode so we can cancel source editing easily
     gPreviousNonSourceDisplayMode = mode;
 
     // Load/unload appropriate override style sheet
     try {
@@ -2048,17 +1998,17 @@ function SetDisplayMode(mode) {
       }
     } catch (e) {}
 
     // Switch to the normal editor (first in the deck)
     gContentWindowDeck.selectedIndex = 0;
 
     // Restore menus and toolbars
     gFormatToolbar.hidden = gFormatToolbarHidden;
-    gViewFormatToolbar.hidden = false;
+    gFormatToolbar.removeAttribute("hideinmenu");
 
     gContentWindow.focus();
   }
 
   // update commands to disable or re-enable stuff
   window.updateCommands("mode_switch");
 
   // Set the selected tab at bottom of window:
@@ -2681,17 +2631,16 @@ function RemoveInapplicableUIElements() 
   if (!IsHTMLEditor()) {
     HideItem("insertAnchor");
     HideItem("insertImage");
     HideItem("insertHline");
     HideItem("insertTable");
     HideItem("insertHTML");
     HideItem("insertFormMenu");
     HideItem("fileExportToText");
-    HideItem("viewFormatToolbar");
     HideItem("viewEditModeToolbar");
   }
 }
 
 function HideItem(id) {
   var item = document.getElementById(id);
   if (item) {
     item.hidden = true;
--- a/editor/ui/composer/content/editor.xhtml
+++ b/editor/ui/composer/content/editor.xhtml
@@ -149,21 +149,16 @@
 
     <menu id="menu_View">
     <!-- id pulls in "Show Sidebar" item from sidebarOverlay -->
     <menupopup id="menu_View_Popup">
       <menu id="menu_Toolbars">
         <menupopup id="view_toolbars_popup"
                    onpopupshowing="onViewToolbarsPopupShowing(event);"
                    oncommand="onViewToolbarCommand(event);">
-          <menuitem id="viewFormatToolbar"
-                    label="&formattingToolbarCmd.label;"
-                    accesskey="&formattingToolbarCmd.accesskey;"
-                    type="checkbox"
-                    command="cmd_viewFormatToolbar"/>
           <menuitem id="viewEditModeToolbar"
                     label="&editmodeToolbarCmd.label;"
                     accesskey="&editmodeToolbarCmd.accesskey;"
                     type="checkbox"
                     command="cmd_viewEditModeToolbar"/>
           <menuitem id="menu_showTaskbar"/>
         </menupopup>
       </menu>
@@ -282,51 +277,47 @@
   <toolbarset id="customToolbars" context="toolbar-context-menu"/>
 
   <toolbarpalette id="EditToolbarPalette"/>
 
   <toolbar id="FormatToolbar"
            class="chromeclass-toolbar"
            persist="collapsed"
            grippytooltiptext="&formatToolbar.tooltip;"
+           toolbarname="&formattingToolbarCmd.label;"
+           accesskey="&formattingToolbarCmd.accesskey;"
+           customizable="true"
+           defaultset="paragraph-select-container,color-buttons-container,HighlightColorButton,separator,DecreaseFontSizeButton,IncreaseFontSizeButton,separator,boldButton,italicButton,underlineButton,separator,ulButton,olButton,outdentButton,indentButton,separator,align-left-button,align-center-button,align-right-button,align-justify-button,absolutePositionButton,decreaseZIndexButton,increaseZIndexButton"
+           mode="icons"
+           iconsize="small"
+           defaultmode="icons"
+           defaulticonsize="small"
+           context="toolbar-context-menu"
            nowindowdrag="true">
     <!-- from editorOverlay -->
     <toolbaritem id="paragraph-select-container"/>
     <toolbaritem id="color-buttons-container"
                  disableoncustomize="true"/>
     <toolbarbutton id="HighlightColorButton"/>
-
-    <toolbarseparator class="toolbarseparator-standard"/>
-
     <!-- Enable if required for SeaMonkey.
     <toolbarbutton id="AbsoluteFontSizeButton"/>
     -->
     <toolbarbutton id="DecreaseFontSizeButton"/>
     <toolbarbutton id="IncreaseFontSizeButton"/>
-
-    <toolbarseparator class="toolbarseparator-standard"/>
-
     <toolbarbutton id="boldButton"/>
     <toolbarbutton id="italicButton"/>
     <toolbarbutton id="underlineButton"/>
-
-    <toolbarseparator class="toolbarseparator-standard"/>
-
     <toolbarbutton id="ulButton"/>
     <toolbarbutton id="olButton"/>
     <toolbarbutton id="outdentButton"/>
     <toolbarbutton id="indentButton"/>
-
-    <toolbarseparator class="toolbarseparator-standard"/>
-
     <toolbarbutton id="align-left-button"/>
     <toolbarbutton id="align-center-button"/>
     <toolbarbutton id="align-right-button"/>
     <toolbarbutton id="align-justify-button"/>
-
     <toolbarbutton id="absolutePositionButton"/>
     <toolbarbutton id="decreaseZIndexButton"/>
     <toolbarbutton id="increaseZIndexButton"/>
 
     <!-- TODO: Change to a menulist? -->
     <!-- menu>
       <button id="AlignPopupButton"/>
       <menupopup id="AlignmentPopup"/>
--- a/editor/ui/composer/content/editorOverlay.xhtml
+++ b/editor/ui/composer/content/editorOverlay.xhtml
@@ -283,18 +283,16 @@
     <commandset id="clipboardEditMenuItems"/>
     <command id="toggleSidebar"/>
     <!-- file menu -->
     <command id="cmd_newNavigator"/>
     <command id="cmd_newPrivateWindow"/>
     <command id="cmd_newEditor"/>
     <command id="cmd_newEditorTemplate"/>
     <command id="cmd_newEditorDraft"/>
-    <!-- view menu -->
-    <command id="cmd_viewFormatToolbar"   oncommand="goToggleToolbar('FormatToolbar','cmd_viewFormatToolbar');"     checked="true"/>
   </commandset>
 
   <popupset id="editorPopupSet">
     <menupopup id="popupNotificationMenu"/>
     <menupopup id="toolbar-context-menu"/>
     <panel id="customizeToolbarSheetPopup"/>
   </popupset>
 
@@ -997,16 +995,18 @@
                 label="&tableProperties.label;"
                 accesskey="&tableProperties.accesskey;"
                 command="cmd_editTable"/>
     </menupopup>
   </menu>
 
   <toolbarbutton id="AlignPopupButton"
                  class="formatting-button"
+                 label="&AlignPopupButton.label;"
+                 removable="true"
                  tooltiptext="&AlignPopupButton.tooltip;"
                  type="menu"
                  observes="cmd_align">
     <menupopup id="AlignPopup">
       <menuitem id="AlignLeftItem" class="menuitem-iconic" label="&alignLeft.label;"
                 oncommand="doStatefulCommand('cmd_align', 'left')"
                 tooltiptext="&alignLeftButton.tooltip;"    />
       <menuitem id="AlignCenterItem" class="menuitem-iconic" label="&alignCenter.label;"
@@ -1018,16 +1018,18 @@
       <menuitem id="AlignJustifyItem" class="menuitem-iconic" label="&alignJustify.label;"
                 oncommand="doStatefulCommand('cmd_align', 'justify')"
                 tooltiptext="&alignJustifyButton.tooltip;"/>
     </menupopup>
   </toolbarbutton>
 
   <toolbarbutton id="InsertPopupButton"
                  class="formatting-button"
+                 label="&InsertPopupButton.label;"
+                 removable="true"
                  tooltiptext="&InsertPopupButton.tooltip;"
                  type="menu"
                  observes="cmd_renderedHTMLEnabler">
     <menupopup id="InsertPopup">
       <menuitem id="InsertLinkItem"
                 class="menuitem-iconic"
                 command="cmd_link"
                 label="&linkToolbarCmd.label;"
@@ -1069,17 +1071,17 @@
                  removable="true"
                  command="cmd_paste"
                  tooltiptext="&pasteToolbarCmd.tooltip;"/>
 
   <toolbarbutton id="print-button"
                  label="&printToolbarCmd.label;"
                  removable="true"
                  tooltiptext="&printToolbarCmd.tooltip;"/>
-      <!-- 'printSetupToolbar' is merged in here from platformGlobalOverlay.xhtml -->
+  <!-- 'print-button' is merged in here from utilityOverlay.xhtml -->
 
   <toolbarbutton id="findButton"
                  class="toolbarbutton-1"
                  label="&findToolbarCmd.label;"
                  removable="true"
                  command="cmd_find"
                  tooltiptext="&findToolbarCmd.tooltip;"/>
   <toolbarbutton id="spellingButton"
@@ -1117,16 +1119,19 @@
                  removable="true"
                  label="&anchorToolbarCmd.label;"
                  command="cmd_anchor"
                  tooltiptext="&anchorToolbarCmd.tooltip;"/>
 
   <!-- Formatting toolbar items. "value" are HTML tagnames, don't translate -->
 <toolbaritem id="paragraph-select-container"
              class="formatting-button"
+             title="&ParagraphSelect.title;"
+             align="center"
+             removable="true"
              tooltiptext="&ParagraphSelect.tooltip;"
              observes="cmd_renderedHTMLEnabler">
   <menulist id="ParagraphSelect"
             class="toolbar-focustarget"
             crop="right">
     <observes element="paragraph-select-container" attribute="disabled"/>
     <observes element="cmd_paragraphState" attribute="state" onbroadcast="onParagraphFormatChange(this.parentNode, 'cmd_paragraphState')"/>
     <menupopup id="ParagraphPopup" oncommand="doStatefulCommand('cmd_paragraphState', event.target.value)">
@@ -1142,16 +1147,19 @@
       <menuitem id="toolbarmenu_pre" label="&paragraphPreformatCmd.label;"  value="pre"/>
     </menupopup>
   </menulist>
 </toolbaritem>
 
   <!-- "value" are HTML tagnames, don't translate -->
 <toolbaritem id="font-face-select-container"
              class="formatting-button"
+             title="&FontFaceSelect.title;"
+             align="center"
+             removable="true"
              tooltiptext="&FontFaceSelect.tooltip;"
              observes="cmd_renderedHTMLEnabler">
   <menulist id="FontFaceSelect"
             class="toolbar-focustarget"
             crop="center"
             sizetopopup="pref">
     <observes element="font-face-select-container" attribute="disabled"/>
     <observes element="cmd_fontFace" attribute="state" onbroadcast="onFontFaceChange(this.parentNode, 'cmd_fontFace')"/>
@@ -1175,16 +1183,19 @@
                      hidden="true"/>
       <!-- Local font face items added here by initLocalFontFaceMenu() -->
     </menupopup>
   </menulist>
 </toolbaritem>
 
 <toolbaritem id="font-size-select-container"
              class="formatting-button"
+             title="&FontSizeSelect.title;"
+             align="center"
+             removable="true"
              tooltiptext="&FontSizeSelect.tooltip;">
   <menulist id="FontSizeSelect"
             class="toolbar-focustarget"
             crop="right"
             oncommand="EditorSelectFontSize();">
     <observes element="font-size-select-container" attribute="disabled"/>
     <observes element="cmd_fontSize" attribute="state" onbroadcast="onFontSizeChange(this.parentNode, 'cmd_fontSize')"/>
     <menupopup id="FontSizePopup">
@@ -1195,38 +1206,44 @@
       <menuitem id="toobarmenu_fontSize_x-large" label="&size-extraLargeCmd.label;"/>
       <menuitem id="toobarmenu_fontSize_xx-large" label="&size-hugeCmd.label;"/>
     </menupopup>
   </menulist>
 </toolbaritem>
 
 <toolbaritem id="color-buttons-container"
              align="center"
+             title="&colorButtons.title;"
+             removable="true"
              class="formatting-button">
   <stack id="ColorButtons" align="center">
     <observes element="cmd_fontColor"       attribute="state" onbroadcast="onFontColorChange()"/>
     <observes element="cmd_backgroundColor" attribute="state" onbroadcast="onBackgroundColorChange()"/>
     <box class="color-button" id="BackgroundColorButton"
           onclick="EditorSelectColor('', event);"
           tooltiptext="&BackgroundColorButton.tooltip;"/>
     <box class="color-button" id="TextColorButton"
           onclick="EditorSelectColor('Text', event);"
           tooltiptext="&TextColorButton.tooltip;"/>
   </stack>
 </toolbaritem>
   <toolbarbutton id="HighlightColorButton"
                  class="formatting-button"
+                 label="&HighlightColorButton.label;"
+                 removable="true"
                  tooltiptext="&HighlightColorButton.tooltip;"
                  command="cmd_highlight">
     <observes element="cmd_highlight" attribute="state" onbroadcast="onHighlightColorChange()"/>
     <observes element="cmd_highlight" attribute="collapsed"/>
   </toolbarbutton>
 
   <toolbarbutton id="AbsoluteFontSizeButton"
                  class="formatting-button"
+                 label="&absoluteFontSize.label;"
+                 removable="true"
                  tooltiptext="&absoluteFontSizeToolbarCmd.tooltip;"
                  type="menu"
                  observes="cmd_renderedHTMLEnabler">
     <menupopup id="AbsoluteFontSizeButtonPopup"
                onpopupshowing="initFontSizeMenu(this, false);">
       <menuitem id="toobarmenu_fontSize_x-small"
                 label="&size-tinyCmd.label;"
                 type="radio" name="1"
@@ -1254,137 +1271,171 @@
       <!-- Enable if required for SeaMonkey.
       <menuitem id="toobarmenu_fontSize_smallBigInfo"
                 type="checkbox" name="2" disabled="true" hidden="true"/>
       -->
     </menupopup>
   </toolbarbutton>
   <toolbarbutton id="DecreaseFontSizeButton"
                  class="formatting-button"
+                 label="&smaller.label;"
+                 removable="true"
                  tooltiptext="&decreaseFontSizeToolbarCmd.tooltip;"
                  command="cmd_decreaseFontStep"/>
   <toolbarbutton id="IncreaseFontSizeButton"
                  class="formatting-button"
+                 label="&larger.label;"
+                 removable="true"
                  tooltiptext="&increaseFontSizeToolbarCmd.tooltip;"
                  command="cmd_increaseFontStep"/>
   <toolbarbutton id="boldButton"
                  class="formatting-button"
+                 label="&bold.label;"
+                 removable="true"
                  tooltiptext="&boldToolbarCmd.tooltip;"
                  type="checkbox"
                  autoCheck="false"
                  command="cmd_bold">
     <observes element="cmd_bold" type="checkbox" attribute="state" onbroadcast="onButtonUpdate(this.parentNode, 'cmd_bold')"/>
   </toolbarbutton>
   <toolbarbutton id="italicButton"
                  class="formatting-button"
+                 label="&italic.label;"
+                 removable="true"
                  tooltiptext="&italicToolbarCmd.tooltip;"
                  type="checkbox"
                  autoCheck="false"
                  command="cmd_italic">
     <observes element="cmd_italic" attribute="state" onbroadcast="onButtonUpdate(this.parentNode, 'cmd_italic')"/>
   </toolbarbutton>
   <toolbarbutton id="underlineButton"
                  class="formatting-button"
+                 label="&underline.label;"
+                 removable="true"
                  tooltiptext="&underlineToolbarCmd.tooltip;"
                  type="checkbox"
                  autoCheck="false"
                  command="cmd_underline">
     <observes element="cmd_underline" attribute="state" onbroadcast="onButtonUpdate(this.parentNode, 'cmd_underline')"/>
   </toolbarbutton>
 
   <toolbarbutton id="ulButton"
                  class="formatting-button"
+                 label="&bullets.label;"
+                 removable="true"
                  tooltiptext="&bulletListToolbarCmd.tooltip;"
                  type="radio"
                  group="lists"
                  autoCheck="false"
                  command="cmd_ul">
       <observes element="cmd_ul" attribute="state" onbroadcast="onButtonUpdate(this.parentNode, 'cmd_ul')"/>
   </toolbarbutton>
 
   <toolbarbutton id="olButton"
                  class="formatting-button"
+                 label="&numbers.label;"
+                 removable="true"
                  tooltiptext="&numberListToolbarCmd.tooltip;"
                  type="radio"
                  group="lists"
                  autoCheck="false"
                  command="cmd_ol">
       <observes element="cmd_ol" attribute="state" onbroadcast="onButtonUpdate(this.parentNode, 'cmd_ol')"/>
   </toolbarbutton>
 
   <toolbarbutton id="outdentButton"
                  class="formatting-button"
+                 label="&outdent.label;"
+                 removable="true"
                  tooltiptext="&outdentToolbarCmd.tooltip;"
                  command="cmd_outdent"/>
   <toolbarbutton id="indentButton"
                  class="formatting-button"
+                 label="&indent.label;"
+                 removable="true"
                  tooltiptext="&indentToolbarCmd.tooltip;"
                  command="cmd_indent"/>
 
   <!-- alignment buttons -->
   <toolbarbutton id="align-left-button"
                  class="formatting-button"
+                 label="&alignLeftButton.label;"
+                 removable="true"
                  tooltiptext="&alignLeftButton.tooltip;"
                  type="radio"
                  group="align"
                  autoCheck="false"
                  oncommand="doStatefulCommand('cmd_align', 'left')">
     <observes element="cmd_align" attribute="state"
               onbroadcast="onStateButtonUpdate(this.parentNode, 'cmd_align', 'left')" />
   </toolbarbutton>
   <toolbarbutton id="align-center-button"
                  class="formatting-button"
+                 label="&alignCenterButton.label;"
+                 removable="true"
                  tooltiptext="&alignCenterButton.tooltip;"
                  type="radio"
                  group="align"
                  autoCheck="false"
                  oncommand="doStatefulCommand('cmd_align', 'center')">
     <observes element="cmd_align" attribute="state"
               onbroadcast="onStateButtonUpdate(this.parentNode, 'cmd_align', 'center')"/>
   </toolbarbutton>
   <toolbarbutton id="align-right-button"
                  class="formatting-button"
+                 label="&alignRightButton.label;"
+                 removable="true"
                  tooltiptext="&alignRightButton.tooltip;"
                  type="radio"
                  group="align"
                  autoCheck="false"
                  oncommand="doStatefulCommand('cmd_align', 'right')">
     <observes element="cmd_align" attribute="state"
               onbroadcast="onStateButtonUpdate(this.parentNode, 'cmd_align', 'right')"/>
   </toolbarbutton>
   <toolbarbutton id="align-justify-button"
                  class="formatting-button"
+                 label="&alignJustifyButton.label;"
+                 removable="true"
                  tooltiptext="&alignJustifyButton.tooltip;"
                  type="radio"
                  group="align"
                  autoCheck="false"
                  oncommand="doStatefulCommand('cmd_align', 'justify')">
     <observes element="cmd_align" attribute="state"
               onbroadcast="onStateButtonUpdate(this.parentNode, 'cmd_align', 'justify')"/>
   </toolbarbutton>
 
   <toolbarbutton id="absolutePositionButton"
                  class="formatting-button"
+                 label="&absolutePosition.label;"
+                 removable="true"
                  tooltiptext="&layer.tooltip;"
                  type="checkbox"
                  command="cmd_absPos">
     <observes element="cmd_absPos" attribute="state" onbroadcast="onStateButtonUpdate(this.parentNode, 'cmd_absPos', 'absolute')"/>
   </toolbarbutton>
   <toolbarbutton id="decreaseZIndexButton"
                  class="formatting-button"
+                 label="&decreaseZIndex.label;"
+                 removable="true"
                  tooltiptext="&layerSendToBack.tooltip;"
                  command="cmd_decreaseZIndex"/>
   <toolbarbutton id="increaseZIndexButton"
                  class="formatting-button"
+                 label="&increaseZIndex.label;"
+                 removable="true"
                  tooltiptext="&layerBringToFront.tooltip;"
                  command="cmd_increaseZIndex"/>
 
   <!-- smiley menu -->
   <toolbarbutton id="smileButtonMenu"
                  class="formatting-button"
+                 label="&SmileButton.label;"
+                 removable="true"
                  tooltiptext="&SmileButton.tooltip;"
                  type="menu"
                  observes="cmd_smiley">
     <menupopup id="smilyPopup">
       <menuitem class="smiley insert-smile menuitem-iconic"
                 label="&smiley1Cmd.label;"
                 tooltiptext="&smiley1Cmd.tooltip;"
                 oncommand="doStatefulCommand('cmd_smiley', ':-)');"/>
--- a/editor/ui/composer/content/editorPrefsOverlay.xhtml
+++ b/editor/ui/composer/content/editorPrefsOverlay.xhtml
@@ -38,18 +38,13 @@
               url="chrome://editor/content/pref-composer.xhtml"
               helpTopic="composer_prefs_general">
       <treechildren id="composerChildren">
         <treeitem id="editingItem"
                   label="&editing.label;"
                   prefpane="editing_pane"
                   url="chrome://editor/content/pref-editing.xhtml"
                   helpTopic="composer_prefs_newpage"/>
-        <treeitem id="toolbarsItem"
-                  label="&toolbars.label;"
-                  prefpane="toolbars_pane"
-                  url="chrome://editor/content/pref-toolbars.xhtml"
-                  helpTopic="composer_prefs_toolbars"/>
       </treechildren>
     </treeitem>
   </treechildren>
 
 </overlay>
deleted file mode 100644
--- a/editor/ui/composer/content/pref-toolbars.xhtml
+++ /dev/null
@@ -1,99 +0,0 @@
-<?xml version="1.0"?>
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - 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/. -->
-
-<?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
-
-<!DOCTYPE overlay SYSTEM "chrome://editor/locale/pref-toolbars.dtd">
-
-<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml">
-  <prefpane id="toolbars_pane"
-            label="&pref.toolbars.title;">
-
-    <preferences id="toolbars_preferences">
-      <preference id="editor.toolbars.showbutton.DecreaseFontSize"
-                  name="editor.toolbars.showbutton.DecreaseFontSize"
-                  type="bool"/>
-      <preference id="editor.toolbars.showbutton.IncreaseFontSize"
-                  name="editor.toolbars.showbutton.IncreaseFontSize"
-                  type="bool"/>
-      <preference id="editor.toolbars.showbutton.bold"
-                  name="editor.toolbars.showbutton.bold"
-                  type="bool"/>
-      <preference id="editor.toolbars.showbutton.absolutePosition"
-                  name="editor.toolbars.showbutton.absolutePosition"
-                  type="bool"/>
-      <preference id="editor.toolbars.showbutton.ul"
-                  name="editor.toolbars.showbutton.ul"
-                  type="bool"/>
-      <preference id="editor.toolbars.showbutton.ol"
-                  name="editor.toolbars.showbutton.ol"
-                  type="bool"/>
-      <preference id="editor.toolbars.showbutton.italic"
-                  name="editor.toolbars.showbutton.italic"
-                  type="bool"/>
-      <preference id="editor.toolbars.showbutton.decreaseZIndex"
-                  name="editor.toolbars.showbutton.decreaseZIndex"
-                  type="bool"/>
-      <preference id="editor.toolbars.showbutton.outdent"
-                  name="editor.toolbars.showbutton.outdent"
-                  type="bool"/>
-      <preference id="editor.toolbars.showbutton.indent"
-                  name="editor.toolbars.showbutton.indent"
-                  type="bool"/>
-      <preference id="editor.toolbars.showbutton.underline"
-                  name="editor.toolbars.showbutton.underline"
-                  type="bool"/>
-      <preference id="editor.toolbars.showbutton.increaseZIndex"
-                  name="editor.toolbars.showbutton.increaseZIndex"
-                  type="bool"/>
-    </preferences>
-
-    <groupbox orient="horizontal">
-      <label class="header">&formatting.caption;</label>
-      <vbox flex="1">
-        <checkbox id="showSmaller"
-                  label="&smaller.label;"
-                  preference="editor.toolbars.showbutton.DecreaseFontSize"/>
-        <checkbox id="showLarger"
-                  label="&larger.label;"
-                  preference="editor.toolbars.showbutton.IncreaseFontSize"/>
-        <checkbox id="showBold"
-                  label="&bold.label;"
-                  preference="editor.toolbars.showbutton.bold"/>
-        <checkbox id="showAbsolutePosition"
-                  label="&absolutePosition.label;"
-                  preference="editor.toolbars.showbutton.absolutePosition"/>
-      </vbox>
-      <vbox flex="1">
-        <checkbox id="showBullets"
-                  label="&bullets.label;"
-                  preference="editor.toolbars.showbutton.ul"/>
-        <checkbox id="showNumbers"
-                  label="&numbers.label;"
-                  preference="editor.toolbars.showbutton.ol"/>
-        <checkbox id="showItalic"
-                  label="&italic.label;"
-                  preference="editor.toolbars.showbutton.italic"/>
-        <checkbox id="showDecreaseZIndex"
-                  label="&decreaseZIndex.label;"
-                  preference="editor.toolbars.showbutton.decreaseZIndex"/>
-      </vbox>
-      <vbox flex="1">
-        <checkbox id="showOutdent"
-                  label="&outdent.label;"
-                  preference="editor.toolbars.showbutton.outdent"/>
-        <checkbox id="showIndent"
-                  label="&indent.label;"
-                  preference="editor.toolbars.showbutton.indent"/>
-        <checkbox id="showUnderline"
-                  label="&underline.label;"
-                  preference="editor.toolbars.showbutton.underline"/>
-        <checkbox id="showIncreaseZIndex"
-                  label="&increaseZIndex.label;"
-                  preference="editor.toolbars.showbutton.increaseZIndex"/>
-      </vbox>
-    </groupbox>
-  </prefpane>
-</overlay>
--- a/editor/ui/jar.mn
+++ b/editor/ui/jar.mn
@@ -86,17 +86,16 @@ comm.jar:
       content/editor/EditorContextMenuOverlay.xhtml            (composer/content/EditorContextMenuOverlay.xhtml)
       content/editor/EditorAllTags.css                         (composer/content/EditorAllTags.css)
       content/editor/editorNavigatorOverlay.xhtml              (composer/content/editorNavigatorOverlay.xhtml)
       content/editor/editorMailOverlay.xhtml                   (composer/content/editorMailOverlay.xhtml)
       content/editor/editorTasksOverlay.xhtml                  (composer/content/editorTasksOverlay.xhtml)
       content/editor/editorOverlay.xhtml                       (composer/content/editorOverlay.xhtml)
       content/editor/editingOverlay.xhtml                      (composer/content/editingOverlay.xhtml)
       content/editor/composerOverlay.xhtml                     (composer/content/composerOverlay.xhtml)
-      content/editor/pref-toolbars.xhtml                       (composer/content/pref-toolbars.xhtml)
       content/editor/pref-editing.xhtml                        (composer/content/pref-editing.xhtml)
       content/editor/pref-editing.js                           (composer/content/pref-editing.js)
       content/editor/pref-composer.xhtml                       (composer/content/pref-composer.xhtml)
       content/editor/editorPrefsOverlay.xhtml                  (composer/content/editorPrefsOverlay.xhtml)
       content/editor/StructBarContextMenu.js                   (composer/content/StructBarContextMenu.js)
       content/editor/images/sendtoback.gif                     (composer/content/images/sendtoback.gif)
       content/editor/images/sendtoback-disabled.gif            (composer/content/images/sendtoback-disabled.gif)
       content/editor/images/bringtofront.gif                   (composer/content/images/bringtofront.gif)
--- a/editor/ui/locales/en-US/chrome/composer/editorOverlay.dtd
+++ b/editor/ui/locales/en-US/chrome/composer/editorOverlay.dtd
@@ -6,18 +6,16 @@
 
 <!-- File menu items -->
 <!ENTITY saveCmd.key "S">
 
 <!-- Edit menu items -->
 <!ENTITY pasteNoFormatting.label "Paste Without Formatting">
 <!ENTITY pasteNoFormatting.accesskey "n">
 <!ENTITY pasteNoFormatting.key "V">
-<!ENTITY pasteAs.label "Paste As">
-<!ENTITY pasteAs.accesskey "a">
 <!ENTITY pasteAsQuotationCmd.label "Paste As Quotation">
 <!ENTITY pasteAsQuotationCmd.accesskey "Q">
 <!ENTITY pasteAsQuotationCmd.key "o">
 <!ENTITY findBarCmd.label "Find…">
 <!ENTITY findReplaceCmd.label "Find and Replace…">
 <!ENTITY enableInlineSpellChecker.label "Spellcheck As You Type">
 <!ENTITY enableInlineSpellChecker.accesskey "S">
 <!ENTITY checkSpellingCmd2.label "Check Spelling…">
@@ -49,32 +47,34 @@
 
 <!-- Used just in context popup. -->
 <!ENTITY createLinkCmd.label "Create Link…">
 <!ENTITY createLinkCmd.accesskey "k">
 <!ENTITY editLinkCmd.label "Edit Link in New Composer">
 <!ENTITY editLinkCmd.accesskey "i">
 
 <!-- Font Face SubMenu -->
+<!ENTITY FontFaceSelect.title "Font">
 <!ENTITY FontFaceSelect.tooltip "Choose a font">
 <!ENTITY fontfaceMenu.label "Font">
 <!ENTITY fontfaceMenu.accesskey "F">
 <!ENTITY fontVarWidth.label "Variable Width">
 <!ENTITY fontVarWidth.accesskey "V">
 <!ENTITY fontFixedWidth.label "Fixed Width">
 <!ENTITY fontFixedWidth.accesskey "x">
 <!ENTITY fontFixedWidth.key "T">
 <!ENTITY fontHelvetica.label "Helvetica, Arial">
 <!ENTITY fontHelvetica.accesskey "l">
 <!ENTITY fontTimes.label "Times">
 <!ENTITY fontTimes.accesskey "T">
 <!ENTITY fontCourier.label "Courier">
 <!ENTITY fontCourier.accesskey "C">
 
 <!-- Font Size SubMenu -->
+<!ENTITY FontSizeSelect.title "Font Size">
 <!ENTITY FontSizeSelect.tooltip "Choose a font size">
 <!ENTITY decreaseFontSize.label "Smaller">
 <!ENTITY decreaseFontSize.accesskey "r">
 <!ENTITY decrementFontSize.key "&lt;">
 <!ENTITY decrementFontSize.key2 ","> <!-- < is above this key on many keyboards -->
 <!ENTITY increaseFontSize.label "Larger">
 <!ENTITY increaseFontSize.accesskey "g">
 <!ENTITY incrementFontSize.key "&gt;">
@@ -175,16 +175,17 @@
 <!ENTITY listNumberedCmd.accesskey "m">
 <!ENTITY listTermCmd.label "Term">
 <!ENTITY listTermCmd.accesskey "T">
 <!ENTITY listDefinitionCmd.label "Definition">
 <!ENTITY listDefinitionCmd.accesskey "D">
 <!ENTITY listPropsCmd.label "List Properties…">
 <!ENTITY listPropsCmd.accesskey "L">
 
+<!ENTITY ParagraphSelect.title "Paragraph">
 <!ENTITY ParagraphSelect.tooltip "Choose a paragraph format">
 <!-- Shared in Paragraph, and Toolbar menulist -->
 <!ENTITY bodyTextCmd.label "Body Text">
 <!ENTITY bodyTextCmd.accesskey "T">
 <!-- isn't used in menu now, but may be added in future -->
 <!ENTITY advancedPropertiesCmd.label "Advanced Properties">
 <!ENTITY advancedPropertiesCmd.accesskey "v">
 
@@ -200,18 +201,21 @@
 <!ENTITY alignRight.label "Right">
 <!ENTITY alignRight.accesskey "R">
 <!ENTITY alignRight.tooltip "Align Right">
 <!ENTITY alignJustify.label "Justify">
 <!ENTITY alignJustify.accesskey "J">
 <!ENTITY alignJustify.tooltip "Align Justified">
 
 <!-- Layer toolbar items -->
+<!ENTITY absolutePosition.label "Positioning">
 <!ENTITY layer.tooltip "Layer">
+<!ENTITY decreaseZIndex.label "Send to Back">
 <!ENTITY layerSendToBack.tooltip "Send to Back">
+<!ENTITY increaseZIndex.label "Bring to Front">
 <!ENTITY layerBringToFront.tooltip "Bring to Front">
 
 <!ENTITY increaseIndent.label "Increase Indent">
 <!ENTITY increaseIndent.accesskey "I">
 <!ENTITY increaseIndent.key "]">
 <!ENTITY decreaseIndent.label "Decrease Indent">
 <!ENTITY decreaseIndent.accesskey "D">
 <!ENTITY decreaseIndent.key "[">
@@ -299,36 +303,54 @@
 <!ENTITY hruleToolbarCmd.label "H.Line">
 <!ENTITY hruleToolbarCmd.tooltip "Insert horizontal line or edit selected line's properties">
 <!ENTITY tableToolbarCmd.label "Table">
 <!ENTITY tableToolbarCmd.tooltip "Insert new table or edit selected table's properties">
 <!ENTITY linkToolbarCmd.label "Link">
 <!ENTITY linkToolbarCmd.tooltip "Insert new link or edit selected link's properties">
 <!ENTITY anchorToolbarCmd.label "Anchor">
 <!ENTITY anchorToolbarCmd.tooltip "Insert new named anchor or edit selected anchor's properties">
+<!ENTITY colorButtons.title "Colors">
 <!ENTITY TextColorButton.tooltip "Choose color for text">
 <!ENTITY BackgroundColorButton.tooltip "Choose color for background">
+<!ENTITY HighlightColorButton.label "Highlighter">
 <!ENTITY HighlightColorButton.tooltip "Choose highlight color for text">
 
 <!-- Editor toolbar -->
+<!ENTITY absoluteFontSize.label "Font Size">
 <!ENTITY absoluteFontSizeToolbarCmd.tooltip "Set font size">
+<!ENTITY smaller.label "Smaller">
 <!ENTITY decreaseFontSizeToolbarCmd.tooltip "Smaller font size">
+<!ENTITY larger.label "Larger">
 <!ENTITY increaseFontSizeToolbarCmd.tooltip "Larger font size">
+<!ENTITY bold.label "Bold">
 <!ENTITY boldToolbarCmd.tooltip "Bold">
+<!ENTITY italic.label "Italic">
 <!ENTITY italicToolbarCmd.tooltip "Italic">
+<!ENTITY underline.label "Underline">
 <!ENTITY underlineToolbarCmd.tooltip "Underline">
+<!ENTITY bullets.label "Bullets">
 <!ENTITY bulletListToolbarCmd.tooltip "Apply or remove bulleted list">
+<!ENTITY numbers.label "Numbers">
 <!ENTITY numberListToolbarCmd.tooltip "Apply or remove numbered list">
+<!ENTITY outdent.label "Outdent">
 <!ENTITY outdentToolbarCmd.tooltip "Outdent text (move left)">
+<!ENTITY indent.label "Indent">
 <!ENTITY indentToolbarCmd.tooltip "Indent text (move right)">
+<!ENTITY AlignPopupButton.label "Alignment">
 <!ENTITY AlignPopupButton.tooltip "Choose text alignment">
+<!ENTITY InsertPopupButton.label "Insert">
 <!ENTITY InsertPopupButton.tooltip "Insert a Link, Anchor, Image, Horizontal Line, or Table">
+<!ENTITY alignLeftButton.label "Align Left">
 <!ENTITY alignLeftButton.tooltip "Align text along left margin">
+<!ENTITY alignCenterButton.label "Align Center">
 <!ENTITY alignCenterButton.tooltip "Align text centered">
+<!ENTITY alignRightButton.label "Align Right">
 <!ENTITY alignRightButton.tooltip "Align text along right margin">
+<!ENTITY alignJustifyButton.label "Align Justify">
 <!ENTITY alignJustifyButton.tooltip "Align text along left and right margins">
 
 <!-- Structure Toolbar Context Menu items -->
 <!ENTITY structSelect.label         "Select">
 <!ENTITY structSelect.accesskey     "s">
 <!ENTITY structRemoveTag.label      "Remove tag">
 <!ENTITY structRemoveTag.accesskey  "r">
 <!ENTITY structChangeTag.label      "Change tag">
--- a/editor/ui/locales/en-US/chrome/composer/editorPrefsOverlay.dtd
+++ b/editor/ui/locales/en-US/chrome/composer/editorPrefsOverlay.dtd
@@ -1,13 +1,12 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - 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/. -->
 
 
 <!--LOCALIZATION NOTE (editorCheck.label): DONT_TRANSLATE -->
 <!ENTITY editorCheck.label "Composer">
-<!ENTITY editorCheck.accesskey "c">
+<!ENTITY editorCheck.accesskey "C">
 
 <!ENTITY compose.label "Composer">
 <!ENTITY editing.label "New Page Settings">
-<!ENTITY toolbars.label "Toolbars">
 <!ENTITY publish.label "Publishing">
--- a/editor/ui/locales/en-US/chrome/composer/editorSmileyOverlay.dtd
+++ b/editor/ui/locales/en-US/chrome/composer/editorSmileyOverlay.dtd
@@ -49,9 +49,10 @@
 <!ENTITY smiley14Cmd.accesskey "I">
 <!ENTITY smiley14Cmd.tooltip "Insert an innocent face">
 <!ENTITY smiley15Cmd.label "Cry">
 <!ENTITY smiley15Cmd.accesskey "r">
 <!ENTITY smiley15Cmd.tooltip "Insert a crying face">
 <!ENTITY smiley16Cmd.label "Lips-are-Sealed">
 <!ENTITY smiley16Cmd.accesskey "a">
 <!ENTITY smiley16Cmd.tooltip "Insert a lips-are-sealed face">
+<!ENTITY SmileButton.label "Insert Smiley">
 <!ENTITY SmileButton.tooltip "Insert a smiley face">
deleted file mode 100644
--- a/editor/ui/locales/en-US/chrome/composer/pref-toolbars.dtd
+++ /dev/null
@@ -1,21 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - 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/. -->
-
-<!ENTITY pref.toolbars.title    "Toolbars">
-
-<!ENTITY formatting.caption     "Show these buttons in the Formatting Toolbar:">
-
-<!ENTITY smaller.label          "Smaller">
-<!ENTITY larger.label           "Larger">
-<!ENTITY bold.label             "Bold">
-<!ENTITY bullets.label          "Bullets">
-<!ENTITY numbers.label          "Numbers">
-<!ENTITY italic.label           "Italic">
-<!ENTITY outdent.label          "Outdent">
-<!ENTITY indent.label           "Indent">
-<!ENTITY underline.label        "Underline">
-
-<!ENTITY absolutePosition.label "Absolute positioning">
-<!ENTITY decreaseZIndex.label   "Send to back">
-<!ENTITY increaseZIndex.label   "Bring to front">
--- a/editor/ui/locales/jar.mn
+++ b/editor/ui/locales/jar.mn
@@ -37,17 +37,16 @@
   locale/@AB_CD@/editor/EdConvertToTable.dtd                 (%chrome/dialogs/EdConvertToTable.dtd)
 
 
 #ifdef MOZ_SUITE
 @AB_CD@.jar:
   locale/@AB_CD@/editor/editor.dtd                           (%chrome/composer/editor.dtd)
   locale/@AB_CD@/editor/editingOverlay.dtd                   (%chrome/composer/editingOverlay.dtd)
   locale/@AB_CD@/editor/editorPrefsOverlay.dtd               (%chrome/composer/editorPrefsOverlay.dtd)
-  locale/@AB_CD@/editor/pref-toolbars.dtd                    (%chrome/composer/pref-toolbars.dtd)
   locale/@AB_CD@/editor/pref-editing.dtd                     (%chrome/composer/pref-editing.dtd)
   locale/@AB_CD@/editor/pref-composer.dtd                    (%chrome/composer/pref-composer.dtd)
   locale/@AB_CD@/editor/EditorPageProperties.dtd             (%chrome/dialogs/EditorPageProperties.dtd)
   locale/@AB_CD@/editor/EditorSnapToGrid.dtd                 (%chrome/dialogs/EditorSnapToGrid.dtd)
   locale/@AB_CD@/editor/EditConflict.dtd                     (%chrome/dialogs/EditConflict.dtd)
   locale/@AB_CD@/editor/EditorSaveAsCharset.dtd              (%chrome/dialogs/EditorSaveAsCharset.dtd)
   locale/@AB_CD@/editor/EditorPublish.dtd                    (%chrome/dialogs/EditorPublish.dtd)
   locale/@AB_CD@/editor/EditorPublishProgress.dtd            (%chrome/dialogs/EditorPublishProgress.dtd)
--- a/suite/base/content/utilityOverlay.js
+++ b/suite/base/content/utilityOverlay.js
@@ -346,17 +346,19 @@ function onViewToolbarsPopupShowing(aEve
 
   var toolbar = document.popupNode || popup;
   while (toolbar.localName != "toolbar")
     toolbar = toolbar.parentNode;
   var toolbox = toolbar.toolbox;
   var externalToolbars = Array.from(toolbox.externalToolbars)
                               .filter(function(toolbar) {
                                         return toolbar.hasAttribute("toolbarname")});
-  var toolbars = Array.from(toolbox.getElementsByAttribute("toolbarname", "*"));
+  var toolbars = Array.from(toolbox.getElementsByAttribute("toolbarname", "*"))
+                      .filter(function(toolbar) {
+                                return !toolbar.hasAttribute("hideinmenu")});
   toolbars = toolbars.concat(externalToolbars);
   var menusep = document.getElementById("toolbarmode-sep");
 
   var menubar = toolbox.getElementsByAttribute("type", "menubar").item(0);
   if (!menubar || !toolbars.length) {
     if (menusep)
       menusep.hidden = true;
     return;
--- a/suite/mailnews/components/compose/content/MsgComposeCommands.js
+++ b/suite/mailnews/components/compose/content/MsgComposeCommands.js
@@ -65,16 +65,17 @@ var gSendFormat;
 var gLogComposePerformance;
 
 var gMsgIdentityElement;
 var gMsgAddressingWidgetElement;
 var gMsgSubjectElement;
 var gMsgAttachmentElement;
 var gMsgHeadersToolbarElement;
 var gComposeType;
+var gFormatToolbarHidden = false;
 
 // i18n globals
 var gCharsetConvertManager;
 
 var gLastWindowToHaveFocus;
 var gReceiptOptionChanged;
 var gDSNOptionChanged;
 var gAttachVCardOptionChanged;
@@ -1304,21 +1305,22 @@ function ComposeStartup(aParams)
       // setEditorType MUST be call before setContentWindow
       if (gMsgCompose.composeHTML)
       {
         initLocalFontFaceMenu(document.getElementById("FontFacePopup"));
       }
       else
       {
         //Remove HTML toolbar, format and insert menus as we are editing in plain text mode
+        let toolbar = document.getElementById("FormatToolbar");
+        toolbar.hidden = true;
+        toolbar.setAttribute("hideinmenu", "true");
         document.getElementById("outputFormatMenu").setAttribute("hidden", true);
-        document.getElementById("FormatToolbar").setAttribute("hidden", true);
         document.getElementById("formatMenu").setAttribute("hidden", true);
         document.getElementById("insertMenu").setAttribute("hidden", true);
-        document.getElementById("menu_showFormatToolbar").setAttribute("hidden", true);
       }
 
       // Do setup common to Message Composer and Web Composer
       EditorSharedStartup();
 
       var msgCompFields = gMsgCompose.compFields;
       if (msgCompFields)
       {
@@ -1932,32 +1934,36 @@ function PriorityMenuSelect(target)
 function OutputFormatMenuSelect(target)
 {
   if (gMsgCompose)
   {
     var msgCompFields = gMsgCompose.compFields;
     var toolbar = document.getElementById("FormatToolbar");
     var format_menubar = document.getElementById("formatMenu");
     var insert_menubar = document.getElementById("insertMenu");
-    var show_menuitem = document.getElementById("menu_showFormatToolbar");
 
     if (msgCompFields)
       switch (target.getAttribute('id'))
       {
         case "format_auto":  gSendFormat = nsIMsgCompSendFormat.AskUser;     break;
         case "format_plain": gSendFormat = nsIMsgCompSendFormat.PlainText;   break;
         case "format_html":  gSendFormat = nsIMsgCompSendFormat.HTML;        break;
         case "format_both":  gSendFormat = nsIMsgCompSendFormat.Both;        break;
       }
     gHideMenus = (gSendFormat == nsIMsgCompSendFormat.PlainText);
     format_menubar.hidden = gHideMenus;
     insert_menubar.hidden = gHideMenus;
-    show_menuitem.hidden = gHideMenus;
-    toolbar.hidden = gHideMenus ||
-      (show_menuitem.getAttribute("checked") == "false");
+    if (gHideMenus) {
+      gFormatToolbarHidden = toolbar.hidden;
+      toolbar.hidden = true;
+      toolbar.setAttribute("hideinmenu", "true");
+    } else {
+      toolbar.hidden = gFormatToolbarHidden;
+      toolbar.removeAttribute("hideinmenu");
+    }
   }
 }
 
 function SelectAddress()
 {
   var msgCompFields = gMsgCompose.compFields;
 
   Recipients2CompFields(msgCompFields);
--- a/suite/mailnews/components/compose/content/messengercompose.xul
+++ b/suite/mailnews/components/compose/content/messengercompose.xul
@@ -282,21 +282,16 @@
           </menu>
           <menu id="menu_Edit"/>
           <menu id="menu_View">
             <menupopup id="menu_View_Popup">
               <menu id="menu_Toolbars">
                 <menupopup id="view_toolbars_popup"
                            onpopupshowing="onViewToolbarsPopupShowing(event)"
                            oncommand="onViewToolbarCommand(event);">
-                  <menuitem id="menu_showFormatToolbar"
-                            type="checkbox"
-                            label="&showFormatToolbarCmd.label;"
-                            accesskey="&showFormatToolbarCmd.accesskey;"
-                            command="cmd_viewFormatToolbar"/>
                   <menuitem id="menu_showTaskbar"/>
                 </menupopup>
               </menu>
             </menupopup>
           </menu>
 
           <menu id="insertMenu"
                 command="cmd_renderedHTMLEnabler"/>
@@ -631,37 +626,42 @@
       </hbox>
     </toolbar>
 
     <!-- These toolbar items get filled out from the editorOverlay -->
     <toolbar id="FormatToolbar"
              class="chromeclass-toolbar"
              persist="collapsed"
              grippytooltiptext="&formatToolbar.tooltip;"
+             toolbarname="&showFormatToolbarCmd.label;"
+             accesskey="&showFormatToolbarCmd.accesskey;"
+             customizable="true"
+             defaultset="paragraph-select-container,font-face-select-container,color-buttons-container,DecreaseFontSizeButton,IncreaseFontSizeButton,separator,boldButton,italicButton,underlineButton,separator,ulButton,olButton,outdentButton,indentButton,separator,AlignPopupButton,InsertPopupButton,smileButtonMenu"
+             mode="icons"
+             iconsize="small"
+             defaultmode="icons"
+             defaulticonsize="small"
+             context="toolbar-context-menu"
              nowindowdrag="true">
       <toolbaritem id="paragraph-select-container"/>
       <toolbaritem id="font-face-select-container"/>
       <toolbaritem id="color-buttons-container"
                    disableoncustomize="true"/>
       <toolbarbutton id="DecreaseFontSizeButton"/>
       <toolbarbutton id="IncreaseFontSizeButton"/>
-      <toolbarseparator class="toolbarseparator-standard"/>
       <toolbarbutton id="boldButton"/>
       <toolbarbutton id="italicButton"/>
       <toolbarbutton id="underlineButton"/>
-      <toolbarseparator class="toolbarseparator-standard"/>
       <toolbarbutton id="ulButton"/>
       <toolbarbutton id="olButton"/>
       <toolbarbutton id="outdentButton"/>
       <toolbarbutton id="indentButton"/>
-      <toolbarseparator class="toolbarseparator-standard"/>
       <toolbarbutton id="AlignPopupButton"/>
       <toolbarbutton id="InsertPopupButton"/>
       <toolbarbutton id="smileButtonMenu"/>
-      <spacer flex="1"/>
     </toolbar>
 
     <toolbarpalette id="MsgComposeToolbarPalette">
       <toolbarbutton id="print-button"/>
     </toolbarpalette>
 
   </toolbox>
 
--- a/suite/themes/classic/editor/editorFormatToolbar.css
+++ b/suite/themes/classic/editor/editorFormatToolbar.css
@@ -556,8 +556,19 @@ toolbarbutton.formatting-button {
 
 #decreaseZIndexButton {
   list-style-image: url("chrome://editor/content/images/sendtoback.gif");
 }
 
 #decreaseZIndexButton[disabled="true"] {
   list-style-image: url("chrome://editor/content/images/sendtoback-disabled.gif");
 }
+
+/* Force the folder location and mail view items to fit in the available width
+   in the Customize Toolbar dialog. */
+#palette-box #paragraph-select-container,
+#palette-box #ParagraphSelect,
+#palette-box #font-face-select-container,
+#palette-box #FontFaceSelect,
+#palette-box #font-size-select-container,
+#palette-box #FontSizeSelect {
+  -moz-box-flex: 1;
+}
--- a/suite/themes/classic/jar.mn
+++ b/suite/themes/classic/jar.mn
@@ -9,16 +9,17 @@ classic.jar:
 % skin navigator classic/1.0 %skin/classic/navigator/
 % skin messenger-newsblog classic/1.0 %skin/classic/messenger-newsblog/
 % style chrome://communicator/content/customizeToolbar.xul chrome://navigator/skin/navigator.css
 % style chrome://communicator/content/customizeToolbar.xul chrome://messenger/skin/primaryToolbar.css
 % style chrome://communicator/content/customizeToolbar.xul chrome://messenger/skin/messengercompose/messengercompose.css
 % style chrome://communicator/content/customizeToolbar.xul chrome://messenger/skin/smime/msgCompSMIMEOverlay.css
 % style chrome://communicator/content/customizeToolbar.xul chrome://messenger/skin/addressbook/addressbook.css
 % style chrome://communicator/content/customizeToolbar.xul chrome://editor/skin/editorPrimaryToolbar.css
+% style chrome://communicator/content/customizeToolbar.xul chrome://editor/skin/editorFormatToolbar.css
 #ifdef XP_MACOSX
   skin/classic/communicator/aboutPrivateBrowsing.css                    (mac/communicator/aboutPrivateBrowsing.css)
   skin/classic/communicator/aboutSessionRestore.css                     (mac/communicator/aboutSessionRestore.css)
   skin/classic/communicator/button.css                                  (mac/communicator/button.css)
   skin/classic/communicator/communicator.css                            (mac/communicator/communicator.css)
   skin/classic/communicator/customizeToolbar.css                        (mac/communicator/customizeToolbar.css)
   skin/classic/communicator/config.css                                  (mac/communicator/config.css)
   skin/classic/communicator/datetimepicker.css                          (mac/communicator/datetimepicker.css)
--- a/suite/themes/classic/mac/editor/editorFormatToolbar.css
+++ b/suite/themes/classic/mac/editor/editorFormatToolbar.css
@@ -520,8 +520,19 @@ toolbarbutton.formatting-button {
 
 #decreaseZIndexButton {
   list-style-image: url("chrome://editor/content/images/sendtoback.gif");
 }
 
 #decreaseZIndexButton[disabled="true"] {
   list-style-image: url("chrome://editor/content/images/sendtoback-disabled.gif");
 }
+
+/* Force the folder location and mail view items to fit in the available width
+   in the Customize Toolbar dialog. */
+#palette-box #paragraph-select-container,
+#palette-box #ParagraphSelect,
+#palette-box #font-face-select-container,
+#palette-box #FontFaceSelect,
+#palette-box #font-size-select-container,
+#palette-box #FontSizeSelect {
+  -moz-box-flex: 1;
+}
--- a/suite/themes/modern/editor/editorFormatToolbar.css
+++ b/suite/themes/modern/editor/editorFormatToolbar.css
@@ -573,8 +573,19 @@ toolbarbutton.formatting-button {
 
 #decreaseZIndexButton {
   list-style-image: url("chrome://editor/content/images/sendtoback.gif");
 }
 
 #decreaseZIndexButton[disabled="true"] {
   list-style-image: url("chrome://editor/content/images/sendtoback-disabled.gif");
 }
+
+/* Force the folder location and mail view items to fit in the available width
+   in the Customize Toolbar dialog. */
+#palette-box #paragraph-select-container,
+#palette-box #ParagraphSelect,
+#palette-box #font-face-select-container,
+#palette-box #FontFaceSelect,
+#palette-box #font-size-select-container,
+#palette-box #FontSizeSelect {
+  -moz-box-flex: 1;
+}
--- a/suite/themes/modern/jar.mn
+++ b/suite/themes/modern/jar.mn
@@ -15,16 +15,17 @@ modern.jar:
 % skin navigator modern/1.0 %skin/modern/navigator/
 % skin messenger-newsblog modern/1.0 %skin/modern/messenger-newsblog/
 % style chrome://communicator/content/customizeToolbar.xul chrome://navigator/skin/navigator.css
 % style chrome://communicator/content/customizeToolbar.xul chrome://messenger/skin/primaryToolbar.css
 % style chrome://communicator/content/customizeToolbar.xul chrome://messenger/skin/messengercompose/messengercompose.css
 % style chrome://communicator/content/customizeToolbar.xul chrome://messenger/skin/smime/msgCompSMIMEOverlay.css
 % style chrome://communicator/content/customizeToolbar.xul chrome://messenger/skin/addressbook/addressbook.css
 % style chrome://communicator/content/customizeToolbar.xul chrome://editor/skin/editorPrimaryToolbar.css
+% style chrome://communicator/content/customizeToolbar.xul chrome://editor/skin/editorFormatToolbar.css
   skin/modern/communicator/brand.css                               (communicator/brand.css)
   skin/modern/communicator/blockedSite.css                         (communicator/blockedSite.css)
   skin/modern/communicator/certError.css                           (communicator/certError.css)
   skin/modern/communicator/customizeToolbar.css                    (communicator/customizeToolbar.css)
   skin/modern/communicator/datetimepicker.css                      (communicator/datetimepicker.css)
   skin/modern/communicator/numberbox.css                           (communicator/numberbox.css)
   skin/modern/communicator/prefpanels.css                          (communicator/prefpanels.css)
   skin/modern/communicator/preferences.css                         (communicator/preferences.css)