Bug 606683 - Allow customization of toolbars in Composer and formatting toolbar in MailNews Composition - EditToolbar part. r=frg DONTBUILD
authorIan Neal <iann_cvs@blueyonder.co.uk>
Tue, 07 Apr 2020 13:52:00 +0100
changeset 38083 6da7d36ce03ef398dfb8aaca789b5a81ec6c1a43
parent 38082 5e44cc4ebd09802359b93c425fe2ebe6a245d128
child 38084 e7b674413abcf2ef2c95d494a4fc16dceb195fa3
push id2595
push userclokep@gmail.com
push dateMon, 04 May 2020 19:02:04 +0000
treeherdercomm-beta@f53913797371 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersfrg
bugs606683
Bug 606683 - Allow customization of toolbars in Composer and formatting toolbar in MailNews Composition - EditToolbar part. r=frg DONTBUILD
editor/ui/composer.js
editor/ui/composer/content/editingOverlay.js
editor/ui/composer/content/editingOverlay.xhtml
editor/ui/composer/content/editor.js
editor/ui/composer/content/editor.xhtml
editor/ui/composer/content/editorOverlay.xhtml
editor/ui/composer/content/pref-toolbars.xhtml
editor/ui/locales/en-US/chrome/composer/pref-toolbars.dtd
suite/extensions/debugQA/content/debugQATextEditorShell.xul
suite/extensions/debugQA/install.rdf.in
suite/mailnews/components/compose/content/messengercompose.xul
suite/themes/classic/editor/editorPrimaryToolbar.css
suite/themes/classic/jar.mn
suite/themes/classic/mac/editor/editorPrimaryToolbar.css
suite/themes/modern/editor/editorPrimaryToolbar.css
suite/themes/modern/jar.mn
--- a/editor/ui/composer.js
+++ b/editor/ui/composer.js
@@ -29,32 +29,16 @@ pref("editor.hrule.shading",            
 pref("editor.hrule.align",                  1); // center
 
 pref("editor.table.maintain_structure", true);
 
 pref("editor.prettyprint", true);
 
 pref("editor.throbber.url","chrome://editor-region/locale/region.properties");
 
-pref("editor.toolbars.showbutton.new", true);
-pref("editor.toolbars.showbutton.open", true);
-pref("editor.toolbars.showbutton.save", true);
-pref("editor.toolbars.showbutton.publish", true);
-pref("editor.toolbars.showbutton.preview", true);
-pref("editor.toolbars.showbutton.cut", false);
-pref("editor.toolbars.showbutton.copy", false);
-pref("editor.toolbars.showbutton.paste", false);
-pref("editor.toolbars.showbutton.print", true);
-pref("editor.toolbars.showbutton.find", false);
-pref("editor.toolbars.showbutton.image", true);
-pref("editor.toolbars.showbutton.hline", false);
-pref("editor.toolbars.showbutton.table", true);
-pref("editor.toolbars.showbutton.link", true);
-pref("editor.toolbars.showbutton.namedAnchor", false);
-
 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);
--- a/editor/ui/composer/content/editingOverlay.js
+++ b/editor/ui/composer/content/editingOverlay.js
@@ -186,16 +186,22 @@ function EditorStartup(aUrl, aCharset)
 
   // 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;
     contentViewer.forceCharacterSet = aCharset;
   } catch (e) {}
   EditorLoadUrl(aUrl);
+
+  // Before and after callbacks for the customizeToolbar code.
+  var editorToolbox = getEditorToolbox();
+  editorToolbox.customizeInit = EditorToolboxCustomizeInit;
+  editorToolbox.customizeDone = EditorToolboxCustomizeDone;
+  editorToolbox.customizeChange = EditorToolboxCustomizeChange;
 }
 
 function EditorShutdown()
 {
   Services.obs.removeObserver(EditorCanClose, "quit-application-requested");
 
   gEditorToolbarPrefListener.shutdown();
   gCSSPrefListener.shutdown();
@@ -346,8 +352,43 @@ function getBrowser()
 var FullZoom = {
   init: function() {},
   reduce: function() { ZoomManager.reduce(); },
   enlarge: function() { ZoomManager.enlarge(); },
   zoom: function(aZoomValue) { ZoomManager.zoom = aZoomValue; },
   reset: function() { ZoomManager.zoom = 1; },
   setOther: function() { openZoomDialog(); }
 };
+
+function hideEditorUI(aHide) {
+  for (let id of ["EditModeToolbar", "content-source", "content-frame"]) {
+    let element = document.getElementById(id);
+    if (!element)
+      continue;
+
+    if (aHide) {
+      element.setAttribute("moz-collapsed", true);
+    } else {
+      element.removeAttribute("moz-collapsed");
+    }
+  }
+}
+
+function getEditorToolbox() {
+  return document.getElementById("EditorToolbox");
+}
+
+function EditorToolboxCustomizeInit() {
+  if (document.commandDispatcher.focusedWindow == content)
+    window.focus();
+  hideEditorUI(true);
+  toolboxCustomizeInit("main-menubar");
+}
+
+function EditorToolboxCustomizeDone(aToolboxChanged) {
+  toolboxCustomizeDone("main-menubar", getEditorToolbox(), aToolboxChanged);
+  hideEditorUI(false);
+  gContentWindow.focus();
+}
+
+function EditorToolboxCustomizeChange(aEvent) {
+  toolboxCustomizeChange(getEditorToolbox(), aEvent);
+}
--- a/editor/ui/composer/content/editingOverlay.xhtml
+++ b/editor/ui/composer/content/editingOverlay.xhtml
@@ -61,16 +61,18 @@
   </commandset>
 
   <commandset id="composerEditMenuItems">
     <command id="cmd_publishSettings"
              oncommand="goDoCommand('cmd_publishSettings');"/>
   </commandset>
 
   <commandset id="editorCommands">
+    <command id="cmd_CustomizeToolbars"
+             oncommand="goCustomizeToolbar(getEditorToolbox());"/>
     <commandset id="viewZoomCommands"/>
   </commandset>
 
   <!-- File menu items -->
   <menu id="menu_File">
     <menupopup id="menu_FilePopup" onpopupshowing="EditorInitFileMenu();">
       <menu id="menu_New" class="menu-iconic">
         <menupopup id="menu_NewPopup">
@@ -153,24 +155,28 @@
   <menupopup id="menu_View_Popup">
     <menu id="menu_zoom" insertbefore="charsetMenu"/>
   </menupopup>
 
   <!-- Toolbar buttons/items -->
   <toolbarbutton id="newButton"
                  class="toolbarbutton-1"
                  label="&newToolbarCmd.label;"
+                 removable="true"
                  command="cmd_newEditor"
                  tooltiptext="&newToolbarCmd.tooltip;"/>
   <toolbarbutton id="openButton"
                  class="toolbarbutton-1"
                  label="&openToolbarCmd.label;"
+                 removable="true"
                  command="cmd_open"
                  tooltiptext="&openToolbarCmd.tooltip;"/>
   <toolbarbutton id="saveButton"
                  class="toolbarbutton-1"
+                 removable="true"
                  command="cmd_save"
                  tooltiptext="&saveToolbarCmd.tooltip;"/>
   <toolbarbutton id="publishButton"
                  class="toolbarbutton-1"
+                 removable="true"
                  command="cmd_publish"
                  tooltiptext="&publishToolbarCmd.tooltip;"/>
 </overlay>
--- a/editor/ui/composer/content/editor.js
+++ b/editor/ui/composer/content/editor.js
@@ -130,17 +130,16 @@ function ShowHideToolbarButtons() {
     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("EditToolbar"));
   ShowHideToolbarSeparators(document.getElementById("FormatToolbar"));
 }
 
 function nsPrefListener(prefName) {
   this.startup(prefName);
 }
 
 // implements nsIObserver
--- a/editor/ui/composer/content/editor.xhtml
+++ b/editor/ui/composer/content/editor.xhtml
@@ -50,19 +50,20 @@
   <script src="chrome://editor/content/editor.js"/>
   <script src="chrome://editor/content/publishprefs.js"/>
   <script src="chrome://communicator/content/contentAreaDD.js"/>
   <script src="chrome://communicator/content/contentAreaClick.js"/>
   <script src="chrome://global/content/printUtils.js"/>
   <script src="chrome://global/content/nsDragAndDrop.js"/>
 
   <popupset id="contentAreaContextSet"/>
-  <menupopup id="structToolbarContext"/>
-  <menupopup id="sidebarPopup"/>
-  <menupopup id="popupNotificationMenu"/>
+  <popupset id="editorPopupSet">
+    <menupopup id="structToolbarContext"/>
+    <menupopup id="sidebarPopup"/>
+  </popupset>
 
   <commandset id="editorCommands">
     <commandset id="commonEditorMenuItems"/>
     <commandset id="composerMenuItems"/>
     <commandset id="composerOnlyMenuItems"
                 commandupdater="true"
                 events="create, mode_switch"
                 oncommandupdate="goUpdateComposerMenuItems(this);">
@@ -118,29 +119,56 @@
     <key keycode="VK_TAB" oncommand="return true;"/>
     <key keycode="VK_TAB" modifiers="shift" oncommand="return true;"/>
     <key keycode="VK_TAB" modifiers="control" oncommand="return true;"/>
     <key keycode="VK_TAB" modifiers="control,shift" oncommand="return true;"/>
   </keyset>
 
   <vbox id="titlebar"/>
 
-  <toolbox class="toolbox-top" id="EditorToolbox">
-  <menubar id="main-menubar" class="chromeclass-menubar" persist="collapsed" grippytooltiptext="&menuBar.tooltip;">
+<toolbox id="EditorToolbox"
+         class="toolbox-top"
+         mode="full"
+         defaultmode="full">
+  <toolbar id="toolbar-menubar"
+           type="menubar"
+           class="chromeclass-menubar"
+           persist="collapsed"
+           grippytooltiptext="&menuBar.tooltip;"
+           customizable="true"
+           defaultset="menubar-items"
+           mode="icons"
+           iconsize="small"
+           defaultmode="icons"
+           defaulticonsize="small"
+           context="toolbar-context-menu">
+    <toolbaritem id="menubar-items"
+                 class="menubar-items"
+                 align="center">
+  <menubar id="main-menubar">
     <menu id="menu_File"/>
     <menu id="menu_Edit"/>
 
     <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">
-          <menuitem id="viewComposerToolbar" label="&compositionToolbarCmd.label;" type="checkbox" accesskey="&compositionToolbarCmd.accesskey;" command="cmd_viewCompToolbar"  />
-          <menuitem id="viewFormatToolbar"   label="&formattingToolbarCmd.label;"  type="checkbox" accesskey="&formattingToolbarCmd.accesskey;"  command="cmd_viewFormatToolbar" />
-          <menuitem id="viewEditModeToolbar" label="&editmodeToolbarCmd.label;"    type="checkbox" accesskey="&editmodeToolbarCmd.accesskey;"    command="cmd_viewEditModeToolbar" />
+        <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>
       <menuseparator id="viewSep1"/>
       <menuitem id="viewNormalMode"
                 type="radio"
                 group="mode"
                 checked="true"
@@ -169,31 +197,33 @@
       <menu id="charsetMenu"
             onpopupshowing="EditorUpdateCharsetMenu(event.target);"
             oncommand="EditorSetCharacterSet(event);"/>
     </menupopup>
     </menu>
 
     <menu id="insertMenu"/>
 
-    <menu id="formatMenu" label="&formatMenu.label;" accesskey="&formatMenu.accesskey;">
+    <menu id="formatMenu"
+          label="&formatMenu.label;"
+          accesskey="&formatMenu.accesskey;">
       <menupopup id="formatMenuPopup">
         <menuitem id="snapToGrid"
                   label="&grid.label;"
                   accesskey="&grid.accesskey;"
-                  oncommand="goDoCommand('cmd_grid')"
+                  oncommand="goDoCommand('cmd_grid');"
                   observes="cmd_renderedHTMLEnabler"/>
         <menuseparator/>
         <menuitem id="objectProperties"/>
         <menuitem id="colorsAndBackground"/>
         <!-- Don't use 'observes', must call command correctly -->
         <menuitem id="pageProperties"
                   label="&pageProperties.label;"
                   accesskey="&pageProperties.accesskey;"
-                  oncommand="goDoCommand('cmd_pageProperties')"
+                  oncommand="goDoCommand('cmd_pageProperties');"
                   observes="cmd_renderedHTMLEnabler"/>
       </menupopup>
     </menu>
 
     <menu id="tableMenu"/>
 
     <!-- tasks menu filled from tasksOverlay -->
     <menu id="tasksMenu">
@@ -205,62 +235,77 @@
         <menuseparator id="sep_validate"/>
       </menupopup>
     </menu>
 
     <menu id="windowMenu"/>
 
     <!-- help menu filled from globalOverlay -->
     <menu id="menu_Help"/>
-
-    <spacer flex="1"/>
   </menubar>
+    </toolbaritem>
+  </toolbar>
 
   <!-- toolbar mostly filled out from editorOverlay -->
-  <!-- add  class="standard" for dark blue background (icons need rework first) -->
-  <toolbar class="chromeclass-toolbar toolbar-primary" id="EditToolbar" persist="collapsed"
-           grippytooltiptext="&compositionToolbar.tooltip;">
+  <!-- add class="standard" for dark blue background, icons need rework first -->
+  <toolbar id="EditToolbar"
+           class="chromeclass-toolbar toolbar-primary"
+           persist="collapsed"
+           grippytooltiptext="&compositionToolbar.tooltip;"
+           toolbarname="&compositionToolbarCmd.label;"
+           accesskey="&compositionToolbarCmd.accesskey;"
+           customizable="true"
+           defaultset="newButton,openButton,saveButton,publishButton,previewButton,print-button,separator,linkButton,imageButton,tableButton,spellingButton,spring,throbber-box"
+           context="toolbar-context-menu">
     <toolbarbutton id="newButton"/>
     <toolbarbutton id="openButton"/>
     <toolbarbutton id="saveButton"/>
     <toolbarbutton id="publishButton"/>
     <toolbarbutton id="previewButton"
                    class="toolbarbutton-1"
                    label="&previewToolbarCmd.label;"
+                   removable="true"
                    command="cmd_preview"
                    tooltiptext="&previewToolbarCmd.tooltip;"/>
     <toolbarbutton id="cutButton"/>
     <toolbarbutton id="copyButton"/>
     <toolbarbutton id="pasteButton"/>
     <toolbarbutton id="print-button"/>
     <toolbarbutton id="findButton"/>
-    <toolbarseparator class="toolbarseparator-primary"/>
     <toolbarbutton id="linkButton"/>
     <toolbarbutton id="namedAnchorButton"/>
     <toolbarbutton id="imageButton"/>
     <toolbarbutton id="hlineButton"/>
     <toolbarbutton id="tableButton"/>
     <toolbarbutton id="spellingButton"/>
-    <spacer flex="1"/>
-    <hbox id="throbber-box" align="center" class="toolbaritem-noline">
+    <toolbaritem id="throbber-box"
+                 class="toolbaritem-noline"
+                 removable="true"
+                 align="center">
       <button id="navigator-throbber"
-              oncommand="goClickThrobber('editor.throbber.url', event)"
+              oncommand="goClickThrobber('editor.throbber.url', event);"
               onclick="checkForMiddleClick(this, event);"
               tooltiptext="&throbber.tooltip2;"
               busy="false"/>
-    </hbox>
+    </toolbaritem>
   </toolbar>
+
+  <toolbarset id="customToolbars" context="toolbar-context-menu"/>
+
+  <toolbarpalette id="EditToolbarPalette"/>
+
   <toolbar id="FormatToolbar"
            class="chromeclass-toolbar"
            persist="collapsed"
            grippytooltiptext="&formatToolbar.tooltip;"
            nowindowdrag="true">
     <!-- from editorOverlay -->
     <toolbaritem id="paragraph-select-container"/>
-    <toolbaritem id="color-buttons-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"/>
--- a/editor/ui/composer/content/editorOverlay.xhtml
+++ b/editor/ui/composer/content/editorOverlay.xhtml
@@ -278,20 +278,25 @@
     <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_viewCompToolbar"     oncommand="goToggleToolbar('EditToolbar','cmd_viewCompToolbar');"         checked="true"/>
     <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>
+
   <menu id="menu_Edit">
     <menupopup id="menu_EditPopup">
       <!-- from utilityOverlay.xhtml -->
       <menuitem id="menu_undo"/>
       <menuitem id="menu_redo"/>
       <menuseparator id="sep_cut"/>
       <menuitem id="menu_cut"/>
       <menuitem id="menu_copy"/>
@@ -972,62 +977,73 @@
                 label="&tableToolbarCmd.label;"
                 tooltiptext="&tableToolbarCmd.tooltip;"/>
     </menupopup>
   </toolbarbutton>
 
   <!-- Editor toolbar items -->
   <!-- note that we override the submenu item label "Blank Window" with "New" used for the menu -->
   <toolbarbutton id="cutButton" class="toolbarbutton-1"
+                 removable="true"
                  command="cmd_cut"
                  tooltiptext="&cutToolbarCmd.tooltip;"/>
   <toolbarbutton id="copyButton" class="toolbarbutton-1"
+                 removable="true"
                  command="cmd_copy"
                  tooltiptext="&copyToolbarCmd.tooltip;"/>
   <toolbarbutton id="pasteButton" class="toolbarbutton-1"
+                 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 -->
 
   <toolbarbutton id="findButton"
                  class="toolbarbutton-1"
                  label="&findToolbarCmd.label;"
+                 removable="true"
                  command="cmd_find"
                  tooltiptext="&findToolbarCmd.tooltip;"/>
   <toolbarbutton id="spellingButton"
                  class="toolbarbutton-1"
                  label="&spellToolbarCmd.label;"
+                 removable="true"
                  command="cmd_spelling"
                  tooltiptext="&spellToolbarCmd.tooltip;"/>
   <toolbarbutton id="imageButton"
                  class="toolbarbutton-1"
+                 removable="true"
                  label="&imageToolbarCmd.label;"
                  command="cmd_image"
                  tooltiptext="&imageToolbarCmd.tooltip;"/>
   <toolbarbutton id="hlineButton"
                  class="toolbarbutton-1"
+                 removable="true"
                  label="&hruleToolbarCmd.label;"
                  command="cmd_hline"
                  tooltiptext="&hruleToolbarCmd.tooltip;"/>
   <toolbarbutton id="tableButton"
                  class="toolbarbutton-1"
+                 removable="true"
                  label="&tableToolbarCmd.label;"
                  command="cmd_table"
                  tooltiptext="&tableToolbarCmd.tooltip;"/>
   <toolbarbutton id="linkButton"
                  class="toolbarbutton-1"
+                 removable="true"
                  label="&linkToolbarCmd.label;"
                  command="cmd_link"
                  tooltiptext="&linkToolbarCmd.tooltip;"/>
   <toolbarbutton id="namedAnchorButton"
                  class="toolbarbutton-1"
+                 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"
              tooltiptext="&ParagraphSelect.tooltip;"
--- a/editor/ui/composer/content/pref-toolbars.xhtml
+++ b/editor/ui/composer/content/pref-toolbars.xhtml
@@ -7,61 +7,16 @@
 
 <!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.new"
-                  name="editor.toolbars.showbutton.new"
-                  type="bool"/>
-      <preference id="editor.toolbars.showbutton.open"
-                  name="editor.toolbars.showbutton.open"
-                  type="bool"/>
-      <preference id="editor.toolbars.showbutton.save"
-                  name="editor.toolbars.showbutton.save"
-                  type="bool"/>
-      <preference id="editor.toolbars.showbutton.publish"
-                  name="editor.toolbars.showbutton.publish"
-                  type="bool"/>
-      <preference id="editor.toolbars.showbutton.preview"
-                  name="editor.toolbars.showbutton.preview"
-                  type="bool"/>
-      <preference id="editor.toolbars.showbutton.cut"
-                  name="editor.toolbars.showbutton.cut"
-                  type="bool"/>
-      <preference id="editor.toolbars.showbutton.copy"
-                  name="editor.toolbars.showbutton.copy"
-                  type="bool"/>
-      <preference id="editor.toolbars.showbutton.paste"
-                  name="editor.toolbars.showbutton.paste"
-                  type="bool"/>
-      <preference id="editor.toolbars.showbutton.print"
-                  name="editor.toolbars.showbutton.print"
-                  type="bool"/>
-      <preference id="editor.toolbars.showbutton.find"
-                  name="editor.toolbars.showbutton.find"
-                  type="bool"/>
-      <preference id="editor.toolbars.showbutton.image"
-                  name="editor.toolbars.showbutton.image"
-                  type="bool"/>
-      <preference id="editor.toolbars.showbutton.hline"
-                  name="editor.toolbars.showbutton.hline"
-                  type="bool"/>
-      <preference id="editor.toolbars.showbutton.table"
-                  name="editor.toolbars.showbutton.table"
-                  type="bool"/>
-      <preference id="editor.toolbars.showbutton.link"
-                  name="editor.toolbars.showbutton.link"
-                  type="bool"/>
-      <preference id="editor.toolbars.showbutton.namedAnchor"
-                  name="editor.toolbars.showbutton.namedAnchor"
-                  type="bool"/>
       <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"
@@ -91,71 +46,16 @@
                   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">&composition.caption;</label>
-      <vbox flex="1">
-        <checkbox id="showNew"
-                  label="&new.label;"
-                  preference="editor.toolbars.showbutton.new"/>
-        <checkbox id="showOpen"
-                  label="&open.label;"
-                  preference="editor.toolbars.showbutton.open"/>
-        <checkbox id="showSave"
-                  label="&save.label;"
-                  preference="editor.toolbars.showbutton.save"/>
-        <checkbox id="showPublish"
-                  label="&publish.label;"
-                  preference="editor.toolbars.showbutton.publish"/>
-        <checkbox id="showPreview"
-                  label="&preview.label;"
-                  preference="editor.toolbars.showbutton.preview"/>
-      </vbox>
-      <vbox flex="1">
-        <checkbox id="showCut"
-                  label="&cut.label;"
-                  preference="editor.toolbars.showbutton.cut"/>
-        <checkbox id="showCopy"
-                  label="&copy.label;"
-                  preference="editor.toolbars.showbutton.copy"/>
-        <checkbox id="showPaste"
-                  label="&paste.label;"
-                  preference="editor.toolbars.showbutton.paste"/>
-        <checkbox id="showPrint"
-                  label="&print.label;"
-                  preference="editor.toolbars.showbutton.print"/>
-        <checkbox id="showFind"
-                  label="&find.label;"
-                  preference="editor.toolbars.showbutton.find"/>
-      </vbox>
-      <vbox flex="1">
-        <checkbox id="showImage"
-                  label="&image.label;"
-                  preference="editor.toolbars.showbutton.image"/>
-        <checkbox id="showHline"
-                  label="&hline.label;"
-                  preference="editor.toolbars.showbutton.hline"/>
-        <checkbox id="showTable"
-                  label="&table.label;"
-                  preference="editor.toolbars.showbutton.table"/>
-        <checkbox id="showLink"
-                  label="&link.label;"
-                  preference="editor.toolbars.showbutton.link"/>
-        <checkbox id="showAnchor"
-                  label="&anchor.label;"
-                  preference="editor.toolbars.showbutton.namedAnchor"/>
-      </vbox>
-    </groupbox>
-
-    <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"/>
--- a/editor/ui/locales/en-US/chrome/composer/pref-toolbars.dtd
+++ b/editor/ui/locales/en-US/chrome/composer/pref-toolbars.dtd
@@ -1,32 +1,14 @@
 <!-- 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 composition.caption    "Show these buttons in the Composition Toolbar:">
-
-<!ENTITY new.label              "New">
-<!ENTITY open.label             "Open">
-<!ENTITY save.label             "Save">
-<!ENTITY publish.label          "Publish">
-<!ENTITY preview.label          "Browse">
-<!ENTITY cut.label              "Cut">
-<!ENTITY copy.label             "Copy">
-<!ENTITY paste.label            "Paste">
-<!ENTITY print.label            "Print">
-<!ENTITY find.label             "Find">
-<!ENTITY image.label            "Image">
-<!ENTITY hline.label            "H. Line">
-<!ENTITY table.label            "Table">
-<!ENTITY link.label             "Link">
-<!ENTITY anchor.label           "Anchor">
-
 <!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">
--- a/suite/extensions/debugQA/content/debugQATextEditorShell.xul
+++ b/suite/extensions/debugQA/content/debugQATextEditorShell.xul
@@ -75,34 +75,49 @@
 
   <!-- keys are appended from the overlay -->
   <keyset id="editorKeys">
     <keyset id="tasksKeys"/>
     <key id="showHideSidebar"/>
   </keyset>
 
   <popupset id="contentAreaContextSet"/>
+  <popupset id="editorPopupSet"/>
 
   <vbox id="titlebar"/>
 
-  <toolbox id="EditorToolbox">
+  <toolbox id="EditorToolbox"
+           mode="full"
+           defaultmode="full">
+    <toolbar id="toolbar-menubar"
+             type="menubar"
+             class="chromeclass-menubar"
+             persist="collapsed"
+             grippytooltiptext="&menuBar.tooltip;"
+             customizable="true"
+             defaultset="menubar-items"
+             mode="icons"
+             iconsize="small"
+             defaultmode="icons"
+             defaulticonsize="small"
+             context="toolbar-context-menu">
+      <toolbaritem id="menubar-items"
+                   class="menubar-items"
+                   align="center">
     <menubar id="main-menubar" class="chromeclass-menubar">
       <menu id="menu_File"/>
       <menu id="menu_Edit"/>
 
       <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">
-              <menuitem id="viewComposerToolbar"
-                        type="checkbox"
-                        label="&compositionToolbarCmd.label;"
-                        accesskey="&compositionToolbarCmd.accesskey;"
-                        command="cmd_viewCompToolbar"/>
+            <menupopup id="view_toolbars_popup"
+                       onpopupshowing="onViewToolbarsPopupShowing(event);"
+                       oncommand="onViewToolbarCommand(event);">
               <menuitem id="menu_showTaskbar"/>
             </menupopup>
           </menu>
           <menuseparator id="viewSep1"/>
           <menu id="charsetMenu"
                 onpopupshowing="EditorUpdateCharsetMenu(event.target);"
                 oncommand="EditorSetCharacterSet(event);"/>
         </menupopup>
@@ -122,34 +137,46 @@
       <menu id="tasksMenu"/>
       <menu id="windowMenu"/>
 
       <!-- help menu filled from globalOverlay -->
       <menu id="menu_Help"/>
 
       <spacer flex="1"/>
     </menubar>
+      </toolbaritem>
+    </toolbar>
+
 
      <!-- toolbar filled out from editorOverlay -->
     <toolbar id="EditToolbar"
              class="chromeclass-toolbar toolbar-primary"
              persist="collapsed"
-             grippytooltiptext="&compositionToolbar.tooltip;">
+             grippytooltiptext="&compositionToolbar.tooltip;"
+             toolbarname="&compositionToolbarCmd.label;"
+             accesskey="&compositionToolbarCmd.accesskey;"
+             customizable="true"
+             defaultset="newButton,openButton,saveButton,print-button,separator,spellingButton"
+             context="toolbar-context-menu">
       <toolbarbutton id="newButton"/>
       <toolbarbutton id="openButton"/>
       <toolbarbutton id="saveButton"/>
+      <toolbarbutton id="cutButton"/>
+      <toolbarbutton id="copyButton"/>
+      <toolbarbutton id="pasteButton"/>
       <toolbarbutton id="print-button"/>
-      <toolbarseparator class="toolbarseparator-primary"/>
+      <toolbarbutton id="findButton"/>
       <toolbarbutton id="spellingButton"/>
-      <spacer flex="1"/>
     </toolbar>
+
+    <toolbarset id="customToolbars" context="toolbar-context-menu"/>
+
+    <toolbarpalette id="EditToolbarPalette"/>
   </toolbox>
 
-  <menupopup id="popupNotificationMenu"/>
-
   <hbox id="sidebar-parent" flex="1">
     <!-- From sidebarOverlay.xul -->
     <vbox id="sidebar-box" class="chromeclass-extrachrome" hidden="true"/>
     <splitter id="sidebar-splitter" class="chromeclass-extrachrome" hidden="true"/>
     <vbox id="appcontent" flex="1">
       <editor editortype="text"
               type="content"
               primary="true"
--- a/suite/extensions/debugQA/install.rdf.in
+++ b/suite/extensions/debugQA/install.rdf.in
@@ -5,17 +5,17 @@
 
 
 #filter substitution
 
 <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
      xmlns:em="http://www.mozilla.org/2004/em-rdf#">
   <Description about="urn:mozilla:install-manifest">
     <em:id>debugQA@mozilla.org</em:id>
-    <em:version>2.0.4</em:version>
+    <em:version>2.0.5</em:version>
 
     <em:targetApplication>
       <!-- Suite -->
       <Description>
         <em:id>{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</em:id>
         <em:minVersion>2.53</em:minVersion>
         <em:maxVersion>@MOZ_APP_MAXVERSION@</em:maxVersion>
       </Description>
--- a/suite/mailnews/components/compose/content/messengercompose.xul
+++ b/suite/mailnews/components/compose/content/messengercompose.xul
@@ -150,21 +150,18 @@
 #ifndef XP_MACOSX
     <key id="key_renameAttachment" keycode="VK_F2"
          oncommand="goDoCommand('cmd_renameAttachment');"/>
 #endif
   </keyset>
 
   <popupset id="contentAreaContextSet"/>
 
-  <popupset id="msgComposePopupSet">
+  <popupset id="editorPopupSet">
     <menupopup id="sidebarPopup"/>
-    <menupopup id="popupNotificationMenu"/>
-    <menupopup id="toolbar-context-menu"/>
-    <panel id="customizeToolbarSheetPopup"/>
 
     <menupopup id="msgComposeAttachmentContext"
                onpopupshowing="updateEditItems();">
       <menuitem label="&openAttachment.label;"
                 accesskey="&openAttachment.accesskey;"
                 command="cmd_openAttachment"/>
       <menuitem accesskey="&deleteAttachment.accesskey;"
                 command="cmd_delete"/>
--- a/suite/themes/classic/editor/editorPrimaryToolbar.css
+++ b/suite/themes/classic/editor/editorPrimaryToolbar.css
@@ -1,251 +1,534 @@
 /* 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/. */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 /* ::::: primary toolbar buttons ::::: */
 
-.toolbarbutton-1 {
+#newButton {
   list-style-image: url("chrome://editor/skin/icons/editoricons.png");
-}
-
-#newButton {
   -moz-image-region: rect(120px 29px 149px 0);
 }
 
 #newButton:hover {
   -moz-image-region: rect(120px 59px 149px 30px);
 }
 
 #newButton:hover:active {
   -moz-image-region: rect(120px 89px 149px 60px);
 }
 
 #newButton[disabled="true"] {
   -moz-image-region: rect(120px 119px 149px 90px) !important;
 }
 
 #openButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(150px 29px 179px 0);
 }
 
 #openButton:hover {
   -moz-image-region: rect(150px 59px 179px 30px);
 }
 
 #openButton:hover:active {
   -moz-image-region: rect(150px 89px 179px 60px);
 }
 
 #openButton[disabled="true"] {
   -moz-image-region: rect(150px 119px 179px 90px) !important;
 }
 
 #saveButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(210px 29px 239px 0);
 }
 
 #saveButton:hover {
   -moz-image-region: rect(210px 59px 239px 30px);
 }
 
 #saveButton:hover:active {
   -moz-image-region: rect(210px 89px 239px 60px);
 }
 
 #saveButton[disabled="true"] {
   -moz-image-region: rect(210px 119px 239px 90px) !important;
 }
 
 #publishButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(300px 29px 329px 0);
 }
 
 #publishButton:hover {
   -moz-image-region: rect(300px 59px 329px 30px);
 }
 
 #publishButton:hover:active {
   -moz-image-region: rect(300px 89px 329px 60px);
 }
 
 #publishButton[disabled="true"] {
   -moz-image-region: rect(300px 119px 329px 90px) !important;
 }
 
 #previewButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(180px 29px 209px 0);
 }
 
 #previewButton:hover {
   -moz-image-region: rect(180px 59px 209px 30px);
 }
 
 #previewButton:hover:active {
   -moz-image-region: rect(180px 89px 209px 60px);
 }
 
 #previewButton[disabled="true"] {
   -moz-image-region: rect(180px 119px 209px 90px) !important;
 }
 
 #linkButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(90px 29px 119px 0);
 }
 
 #linkButton:hover {
   -moz-image-region: rect(90px 59px 119px 30px);
 }
 
 #linkButton:hover:active {
   -moz-image-region: rect(90px 89px 119px 60px);
 }
 
 #linkButton[disabled="true"] {
   -moz-image-region: rect(90px 119px 119px 90px) !important;
 }
 
 #imageButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(60px 29px 89px 0);
 }
 
 #imageButton:hover {
   -moz-image-region: rect(60px 59px 89px 30px);
 }
 
 #imageButton:hover:active {
   -moz-image-region: rect(60px 89px 89px 60px);
 }
 
 #imageButton[disabled="true"] {
   -moz-image-region: rect(60px 119px 89px 90px) !important;
 }
 
 #namedAnchorButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(0 29px 29px 0);
 }
 
 #namedAnchorButton:hover {
   -moz-image-region: rect(0 59px 29px 30px);
 }
 
 #namedAnchorButton:hover:active {
   -moz-image-region: rect(0 89px 29px 60px);
 }
 
 #namedAnchorButton[disabled="true"] {
   -moz-image-region: rect(0 119px 29px 90px) !important;
 }
 
 #hlineButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(30px 29px 59px 0);
 }
 
 #hlineButton:hover {
   -moz-image-region: rect(30px 59px 59px 30px);
 }
 
 #hlineButton:hover:active {
   -moz-image-region: rect(30px 89px 59px 60px);
 }
 
 #hlineButton[disabled="true"] {
   -moz-image-region: rect(30px 119px 59px 90px) !important;
 }
 
 #tableButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(270px 29px 299px 0);
 }
 
 #tableButton:hover {
   -moz-image-region: rect(270px 59px 299px 30px);
 }
 
 #tableButton:hover:active {
   -moz-image-region: rect(270px 89px 299px 60px);
 }
 
 #tableButton[disabled="true"] {
   -moz-image-region: rect(270px 119px 299px 90px) !important;
 }
 
 #spellingButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(240px 29px 269px 0);
 }
 
 #spellingButton:hover {
   -moz-image-region: rect(240px 59px 269px 30px);
 }
 
 #spellingButton:hover:active {
   -moz-image-region: rect(240px 89px 269px 60px);
 }
 
 #spellingButton[disabled="true"] {
   -moz-image-region: rect(240px 119px 269px 90px) !important;
 }
 
 #cutButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(330px 29px 359px 0);
 }
 
 #cutButton:hover {
   -moz-image-region: rect(330px 59px 359px 30px);
 }
 
 #cutButton:hover:active {
   -moz-image-region: rect(330px 89px 359px 60px);
 }
 
 #cutButton[disabled="true"] {
   -moz-image-region: rect(330px 119px 359px 90px) !important;
 }
 
 #copyButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(360px 29px 389px 0);
 }
 
 #copyButton:hover {
   -moz-image-region: rect(360px 59px 389px 30px);
 }
 
 #copyButton:hover:active {
   -moz-image-region: rect(360px 89px 389px 60px);
 }
 
 #copyButton[disabled="true"] {
   -moz-image-region: rect(360px 119px 389px 90px) !important;
 }
 
 #pasteButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(390px 29px 419px 0);
 }
 
 #pasteButton:hover {
   -moz-image-region: rect(390px 59px 419px 30px);
 }
 
 #pasteButton:hover:active {
   -moz-image-region: rect(390px 89px 419px 60px);
 }
 
 #pasteButton[disabled="true"] {
   -moz-image-region: rect(390px 119px 419px 90px) !important;
 }
 
 #findButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(420px 29px 449px 0);
 }
 
 #findButton:hover {
   -moz-image-region: rect(420px 59px 449px 30px);
 }
 
 #findButton:hover:active {
   -moz-image-region: rect(420px 89px 449px 60px);
 }
 
 #findButton[disabled="true"] {
   -moz-image-region: rect(420px 119px 449px 90px) !important;
 }
+
+/* ::::: small primary toolbar buttons ::::: */
+
+toolbar[iconsize="small"] > #newButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #newButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(80px 19px 99px 0);
+}
+
+toolbar[iconsize="small"] > #newButton:hover {
+  -moz-image-region: rect(80px 39px 99px 20px);
+}
+
+toolbar[iconsize="small"] > #newButton:hover:active {
+  -moz-image-region: rect(80px 59px 99px 40px);
+}
+
+toolbar[iconsize="small"] > #newButton[disabled="true"] {
+  -moz-image-region: rect(80px 79px 99px 60px) !important;
+}
+
+toolbar[iconsize="small"] > #openButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #openButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(100px 19px 119px 0);
+}
+
+toolbar[iconsize="small"] > #openButton:hover {
+  -moz-image-region: rect(100px 39px 119px 20px);
+}
+
+toolbar[iconsize="small"] > #openButton:hover:active {
+  -moz-image-region: rect(100px 59px 119px 40px);
+}
+
+toolbar[iconsize="small"] > #openButton[disabled="true"] {
+  -moz-image-region: rect(100px 79px 119px 60px) !important;
+}
+
+toolbar[iconsize="small"] > #saveButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #saveButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(140px 19px 159px 0);
+}
+
+toolbar[iconsize="small"] > #saveButton:hover {
+  -moz-image-region: rect(140px 39px 159px 20px);
+}
+
+toolbar[iconsize="small"] > #saveButton:hover:active {
+  -moz-image-region: rect(140px 59px 159px 40px);
+}
+
+toolbar[iconsize="small"] > #saveButton[disabled="true"] {
+  -moz-image-region: rect(140px 79px 159px 60px) !important;
+}
+
+toolbar[iconsize="small"] > #publishButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #publishButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(200px 19px 219px 0);
+}
+
+toolbar[iconsize="small"] > #publishButton:hover {
+  -moz-image-region: rect(200px 39px 219px 20px);
+}
+
+toolbar[iconsize="small"] > #publishButton:hover:active {
+  -moz-image-region: rect(200px 59px 219px 40px);
+}
+
+toolbar[iconsize="small"] > #publishButton[disabled="true"] {
+  -moz-image-region: rect(200px 79px 219px 60px) !important;
+}
+
+toolbar[iconsize="small"] > #previewButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #previewButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(120px 19px 139px 0);
+}
+
+toolbar[iconsize="small"] > #previewButton:hover {
+  -moz-image-region: rect(120px 39px 139px 20px);
+}
+
+toolbar[iconsize="small"] > #previewButton:hover:active {
+  -moz-image-region: rect(120px 59px 139px 40px);
+}
+
+toolbar[iconsize="small"] > #previewButton[disabled="true"] {
+  -moz-image-region: rect(120px 79px 139px 60px) !important;
+}
+
+toolbar[iconsize="small"] > #linkButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #linkButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(60px 19px 79px 0);
+}
+
+toolbar[iconsize="small"] > #linkButton:hover {
+  -moz-image-region: rect(60px 39px 79px 20px);
+}
+
+toolbar[iconsize="small"] > #linkButton:hover:active {
+  -moz-image-region: rect(60px 59px 79px 40px);
+}
+
+toolbar[iconsize="small"] > #linkButton[disabled="true"] {
+  -moz-image-region: rect(60px 79px 79px 60px) !important;
+}
+
+toolbar[iconsize="small"] > #imageButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #imageButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(40px 19px 59px 0);
+}
+
+toolbar[iconsize="small"] > #imageButton:hover {
+  -moz-image-region: rect(40px 39px 59px 20px);
+}
+
+toolbar[iconsize="small"] > #imageButton:hover:active {
+  -moz-image-region: rect(40px 59px 59px 40px);
+}
+
+toolbar[iconsize="small"] > #imageButton[disabled="true"] {
+  -moz-image-region: rect(40px 79px 59px 60px) !important;
+}
+
+toolbar[iconsize="small"] > #namedAnchorButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #namedAnchorButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(0 19px 19px 0);
+}
+
+toolbar[iconsize="small"] > #namedAnchorButton:hover {
+  -moz-image-region: rect(0 39px 19px 20px);
+}
+
+toolbar[iconsize="small"] > #namedAnchorButton:hover:active {
+  -moz-image-region: rect(0 59px 19px 40px);
+}
+
+toolbar[iconsize="small"] > #namedAnchorButton[disabled="true"] {
+  -moz-image-region: rect(0 79px 19px 60px) !important;
+}
+
+toolbar[iconsize="small"] > #hlineButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #hlineButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(20px 19px 39px 0);
+}
+
+toolbar[iconsize="small"] > #hlineButton:hover {
+  -moz-image-region: rect(20px 39px 39px 20px);
+}
+
+toolbar[iconsize="small"] > #hlineButton:hover:active {
+  -moz-image-region: rect(20px 59px 39px 40px);
+}
+
+toolbar[iconsize="small"] > #hlineButton[disabled="true"] {
+  -moz-image-region: rect(20px 79px 39px 60px) !important;
+}
+
+toolbar[iconsize="small"] > #tableButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #tableButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(180px 19px 199px 0);
+}
+
+toolbar[iconsize="small"] > #tableButton:hover {
+  -moz-image-region: rect(180px 39px 199px 20px);
+}
+
+toolbar[iconsize="small"] > #tableButton:hover:active {
+  -moz-image-region: rect(180px 59px 199px 40px);
+}
+
+toolbar[iconsize="small"] > #tableButton[disabled="true"] {
+  -moz-image-region: rect(180px 79px 199px 60px) !important;
+}
+
+toolbar[iconsize="small"] > #spellingButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #spellingButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(160px 19px 179px 0);
+}
+
+toolbar[iconsize="small"] > #spellingButton:hover {
+  -moz-image-region: rect(160px 39px 179px 20px);
+}
+
+toolbar[iconsize="small"] > #spellingButton:hover:active {
+  -moz-image-region: rect(160px 59px 179px 40px);
+}
+
+toolbar[iconsize="small"] > #spellingButton[disabled="true"] {
+  -moz-image-region: rect(160px 79px 179px 60px) !important;
+}
+
+toolbar[iconsize="small"] > #cutButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #cutButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(220px 19px 239px 0);
+}
+
+toolbar[iconsize="small"] > #cutButton:hover {
+  -moz-image-region: rect(220px 39px 239px 20px);
+}
+
+toolbar[iconsize="small"] > #cutButton:hover:active {
+  -moz-image-region: rect(220px 59px 239px 40px);
+}
+
+toolbar[iconsize="small"] > #cutButton[disabled="true"] {
+  -moz-image-region: rect(220px 79px 239px 60px) !important;
+}
+
+toolbar[iconsize="small"] > #copyButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #copyButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(240px 19px 259px 0);
+}
+
+toolbar[iconsize="small"] > #copyButton:hover {
+  -moz-image-region: rect(240px 39px 259px 20px);
+}
+
+toolbar[iconsize="small"] > #copyButton:hover:active {
+  -moz-image-region: rect(240px 59px 259px 40px);
+}
+
+toolbar[iconsize="small"] > #copyButton[disabled="true"] {
+  -moz-image-region: rect(240px 79px 259px 60px) !important;
+}
+
+toolbar[iconsize="small"] > #pasteButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #pasteButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(260px 19px 279px 0);
+}
+
+toolbar[iconsize="small"] > #pasteButton:hover {
+  -moz-image-region: rect(260px 39px 279px 20px);
+}
+
+toolbar[iconsize="small"] > #pasteButton:hover:active {
+  -moz-image-region: rect(260px 59px 279px 40px);
+}
+
+toolbar[iconsize="small"] > #pasteButton[disabled="true"] {
+  -moz-image-region: rect(260px 79px 279px 60px) !important;
+}
+
+toolbar[iconsize="small"] > #findButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #findButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(280px 19px 299px 0);
+}
+
+toolbar[iconsize="small"] > #findButton:hover {
+  -moz-image-region: rect(280px 39px 299px 20px);
+}
+
+toolbar[iconsize="small"] > #findButton:hover:active {
+  -moz-image-region: rect(280px 59px 299px 40px);
+}
+
+toolbar[iconsize="small"] > #findButton[disabled="true"] {
+  -moz-image-region: rect(280px 79px 299px 60px) !important;
+}
--- a/suite/themes/classic/jar.mn
+++ b/suite/themes/classic/jar.mn
@@ -8,16 +8,17 @@ classic.jar:
 % skin messenger classic/1.0 %skin/classic/messenger/
 % 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
 #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/editorPrimaryToolbar.css
+++ b/suite/themes/classic/mac/editor/editorPrimaryToolbar.css
@@ -1,192 +1,414 @@
 /* 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/. */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 /* ::::: primary toolbar buttons ::::: */
 
-.toolbarbutton-1 {
+#newButton {
   list-style-image: url("chrome://editor/skin/icons/editoricons.png");
-}
-
-#newButton {
   -moz-image-region: rect(120px 29px 149px 0);
 }
 
 #newButton:hover:active {
   -moz-image-region: rect(120px 59px 149px 30px);
 }
 
 #newButton[disabled="true"] {
   -moz-image-region: rect(120px 89px 149px 60px) !important;
 }
 
 #openButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(150px 29px 179px 0);
 }
 
 #openButton:hover:active {
   -moz-image-region: rect(150px 59px 179px 30px);
 }
 
 #openButton[disabled="true"] {
   -moz-image-region: rect(150px 89px 179px 60px) !important;
 }
 
 #saveButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(210px 29px 239px 0);
 }
 
 #saveButton:hover:active {
   -moz-image-region: rect(210px 59px 239px 30px);
 }
 
 #saveButton[disabled="true"] {
   -moz-image-region: rect(210px 89px 239px 60px) !important;
 }
 
 #publishButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(300px 29px 329px 0);
 }
 
 #publishButton:hover:active {
   -moz-image-region: rect(300px 59px 329px 30px);
 }
 
 #publishButton[disabled="true"] {
   -moz-image-region: rect(300px 89px 329px 60px) !important;
 }
 
 #previewButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(180px 29px 209px 0);
 }
 
 #previewButton:hover:active {
   -moz-image-region: rect(180px 59px 209px 30px);
 }
 
 #previewButton[disabled="true"] {
   -moz-image-region: rect(180px 89px 209px 60px) !important;
 }
 
 #linkButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(90px 29px 119px 0);
 }
 
 #linkButton:hover:active {
   -moz-image-region: rect(90px 59px 119px 30px);
 }
 
 #linkButton[disabled="true"] {
   -moz-image-region: rect(90px 89px 119px 60px) !important;
 }
 
 #imageButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(60px 29px 89px 0);
 }
 
 #imageButton:hover:active {
   -moz-image-region: rect(60px 59px 89px 30px);
 }
 
 #imageButton[disabled="true"] {
   -moz-image-region: rect(60px 89px 89px 60px) !important;
 }
 
 #namedAnchorButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(0 29px 29px 0);
 }
 
 #namedAnchorButton:hover:active {
   -moz-image-region: rect(0 59px 29px 30px);
 }
 
 #namedAnchorButton[disabled="true"] {
   -moz-image-region: rect(0 89px 29px 60px) !important;
 }
 
 #hlineButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(30px 29px 59px 0);
 }
 
 #hlineButton:hover:active {
   -moz-image-region: rect(30px 59px 59px 30px);
 }
 
 #hlineButton[disabled="true"] {
   -moz-image-region: rect(30px 89px 59px 60px) !important;
 }
 
 #tableButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(270px 29px 299px 0);
 }
 
 #tableButton:hover:active {
   -moz-image-region: rect(270px 59px 299px 30px);
 }
 
 #tableButton[disabled="true"] {
   -moz-image-region: rect(270px 89px 299px 60px) !important;
 }
 
 #spellingButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(240px 29px 269px 0);
 }
 
 #spellingButton:hover:active {
   -moz-image-region: rect(240px 59px 269px 30px);
 }
 
 #spellingButton[disabled="true"] {
   -moz-image-region: rect(240px 89px 269px 60px) !important;
 }
 
 #cutButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(330px 29px 359px 0);
 }
 
 #cutButton:hover:active {
   -moz-image-region: rect(330px 59px 359px 30px);
 }
 
 #cutButton[disabled="true"] {
   -moz-image-region: rect(330px 89px 359px 60px) !important;
 }
 
 #copyButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(360px 29px 389px 0);
 }
 
 #copyButton:hover:active {
   -moz-image-region: rect(360px 59px 389px 30px);
 }
 
 #copyButton[disabled="true"] {
   -moz-image-region: rect(360px 89px 389px 60px) !important;
 }
 
 #pasteButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(390px 29px 419px 0);
 }
 
 #pasteButton:hover:active {
   -moz-image-region: rect(390px 59px 419px 30px);
 }
 
 #pasteButton[disabled="true"] {
   -moz-image-region: rect(390px 89px 419px 60px) !important;
 }
 
 #findButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons.png");
   -moz-image-region: rect(420px 29px 449px 0);
 }
 
 #findButton:hover:active {
   -moz-image-region: rect(420px 59px 449px 30px);
 }
 
 #findButton[disabled="true"] {
   -moz-image-region: rect(420px 89px 449px 60px) !important;
 }
 
+/* ::::: small primary toolbar buttons ::::: */
+
+toolbar[iconsize="small"] > #newButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #newButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(80px 19px 99px 0);
+}
+
+toolbar[iconsize="small"] > #newButton:hover:active {
+  -moz-image-region: rect(80px 39px 99px 20px);
+}
+
+toolbar[iconsize="small"] > #newButton[disabled="true"] {
+  -moz-image-region: rect(80px 59px 99px 40px) !important;
+}
+
+toolbar[iconsize="small"] > #openButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #openButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(100px 19px 119px 0);
+}
+
+toolbar[iconsize="small"] > #openButton:hover:active {
+  -moz-image-region: rect(100px 39px 119px 20px);
+}
+
+toolbar[iconsize="small"] > #openButton[disabled="true"] {
+  -moz-image-region: rect(100px 59px 119px 40px) !important;
+}
+
+toolbar[iconsize="small"] > #saveButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #saveButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(140px 19px 159px 0);
+}
+
+toolbar[iconsize="small"] > #saveButton:hover:active {
+  -moz-image-region: rect(140px 39px 159px 20px);
+}
+
+toolbar[iconsize="small"] > #saveButton[disabled="true"] {
+  -moz-image-region: rect(140px 59px 159px 40px) !important;
+}
+
+toolbar[iconsize="small"] > #publishButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #publishButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(200px 19px 219px 0);
+}
+
+toolbar[iconsize="small"] > #publishButton:hover:active {
+  -moz-image-region: rect(200px 39px 219px 20px);
+}
+
+toolbar[iconsize="small"] > #publishButton[disabled="true"] {
+  -moz-image-region: rect(200px 59px 219px 40px) !important;
+}
+
+toolbar[iconsize="small"] > #previewButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #previewButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(120px 19px 139px 0);
+}
+
+toolbar[iconsize="small"] > #previewButton:hover:active {
+  -moz-image-region: rect(120px 39px 139px 20px);
+}
+
+toolbar[iconsize="small"] > #previewButton[disabled="true"] {
+  -moz-image-region: rect(120px 59px 139px 40px) !important;
+}
+
+toolbar[iconsize="small"] > #linkButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #linkButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(60px 19px 79px 0);
+}
+
+toolbar[iconsize="small"] > #linkButton:hover:active {
+  -moz-image-region: rect(60px 39px 79px 20px);
+}
+
+toolbar[iconsize="small"] > #linkButton[disabled="true"] {
+  -moz-image-region: rect(60px 59px 79px 40px) !important;
+}
+
+toolbar[iconsize="small"] > #imageButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #imageButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(40px 19px 59px 0);
+}
+
+toolbar[iconsize="small"] > #imageButton:hover:active {
+  -moz-image-region: rect(40px 39px 59px 20px);
+}
+
+toolbar[iconsize="small"] > #imageButton[disabled="true"] {
+  -moz-image-region: rect(40px 59px 59px 40px) !important;
+}
+
+toolbar[iconsize="small"] > #namedAnchorButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #namedAnchorButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(0 19px 19px 0);
+}
+
+toolbar[iconsize="small"] > #namedAnchorButton:hover:active {
+  -moz-image-region: rect(0 39px 19px 20px);
+}
+
+toolbar[iconsize="small"] > #namedAnchorButton[disabled="true"] {
+  -moz-image-region: rect(0 59px 19px 40px) !important;
+}
+
+toolbar[iconsize="small"] > #hlineButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #hlineButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(20px 19px 39px 0);
+}
+
+toolbar[iconsize="small"] > #hlineButton:hover:active {
+  -moz-image-region: rect(20px 39px 39px 20px);
+}
+
+toolbar[iconsize="small"] > #hlineButton[disabled="true"] {
+  -moz-image-region: rect(20px 59px 39px 40px) !important;
+}
+
+toolbar[iconsize="small"] > #tableButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #tableButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(180px 19px 199px 0);
+}
+
+toolbar[iconsize="small"] > #tableButton:hover:active {
+  -moz-image-region: rect(180px 39px 199px 20px);
+}
+
+toolbar[iconsize="small"] > #tableButton[disabled="true"] {
+  -moz-image-region: rect(180px 59px 199px 40px) !important;
+}
+
+toolbar[iconsize="small"] > #spellingButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #spellingButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(160px 19px 179px 0);
+}
+
+toolbar[iconsize="small"] > #spellingButton:hover:active {
+  -moz-image-region: rect(160px 39px 179px 20px);
+}
+
+toolbar[iconsize="small"] > #spellingButton[disabled="true"] {
+  -moz-image-region: rect(160px 59px 179px 40px) !important;
+}
+
+toolbar[iconsize="small"] > #cutButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #cutButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(220px 19px 239px 0);
+}
+
+toolbar[iconsize="small"] > #cutButton:hover:active {
+  -moz-image-region: rect(220px 39px 239px 20px);
+}
+
+toolbar[iconsize="small"] > #cutButton[disabled="true"] {
+  -moz-image-region: rect(220px 59px 239px 40px) !important;
+}
+
+toolbar[iconsize="small"] > #copyButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #copyButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(240px 19px 259px 0);
+}
+
+toolbar[iconsize="small"] > #copyButton:hover:active {
+  -moz-image-region: rect(240px 39px 259px 20px);
+}
+
+toolbar[iconsize="small"] > #copyButton[disabled="true"] {
+  -moz-image-region: rect(240px 59px 259px 40px) !important;
+}
+
+toolbar[iconsize="small"] > #pasteButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #pasteButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(260px 19px 279px 0);
+}
+
+toolbar[iconsize="small"] > #pasteButton:hover:active {
+  -moz-image-region: rect(260px 39px 279px 20px);
+}
+
+toolbar[iconsize="small"] > #pasteButton[disabled="true"] {
+  -moz-image-region: rect(260px 59px 279px 40px) !important;
+}
+
+toolbar[iconsize="small"] > #findButton,
+toolbar[iconsize="small"] > toolbarpaletteitem > #findButton {
+  list-style-image: url("chrome://editor/skin/icons/editoricons-small.png");
+  -moz-image-region: rect(280px 19px 299px 0);
+}
+
+toolbar[iconsize="small"] > #findButton:hover:active {
+  -moz-image-region: rect(280px 39px 299px 20px);
+}
+
+toolbar[iconsize="small"] > #findButton[disabled="true"] {
+  -moz-image-region: rect(280px 59px 299px 40px) !important;
+}
--- a/suite/themes/modern/editor/editorPrimaryToolbar.css
+++ b/suite/themes/modern/editor/editorPrimaryToolbar.css
@@ -12,89 +12,90 @@
 }
 
 .toolbar-primary-icon {
   width: 57px;
 }
 
 /* ::::: primary toolbar buttons ::::: */
 
-.toolbarbutton-1 {
-  list-style-image: url("chrome://editor/skin/icons/btn1.gif");
-}
-
 .toolbarseparator-primary {
   width: 9px !important;
 }
 
 #newButton {
+  list-style-image: url("chrome://editor/skin/icons/btn1.gif");
   -moz-image-region: rect(136px 49px 169px 0);
 }
 
 #newButton:hover {
   -moz-image-region: rect(136px 99px 169px 50px);
 }
 
 #newButton:hover:active {
   -moz-image-region: rect(136px 149px 169px 100px);
 }
 
 #newButton[disabled="true"] {
   -moz-image-region: rect(136px 199px 169px 150px) !important;
 }
 
 #openButton {
+  list-style-image: url("chrome://editor/skin/icons/btn1.gif");
   -moz-image-region: rect(170px 49px 203px 0);
 }
 
 #openButton:hover {
   -moz-image-region: rect(170px 99px 203px 50px);
 }
 
 #openButton:hover:active {
   -moz-image-region: rect(170px 149px 203px 100px);
 }
 
 #openButton[disabled="true"] {
   -moz-image-region: rect(170px 199px 203px 150px) !important;
 }
 
 #saveButton {
+  list-style-image: url("chrome://editor/skin/icons/btn1.gif");
   -moz-image-region: rect(238px 49px 271px 0);
 }
 
 #saveButton:hover {
   -moz-image-region: rect(238px 99px 271px 50px);
 }
 
 #saveButton:hover:active {
   -moz-image-region: rect(238px 149px 271px 100px);
 }
 
 #saveButton[disabled="true"] {
   -moz-image-region: rect(238px 199px 271px 150px) !important;
 }
 
 #publishButton {
+  list-style-image: url("chrome://editor/skin/icons/btn1.gif");
   -moz-image-region: rect(340px 49px 373px 0);
 }
 
 #publishButton:hover {
   -moz-image-region: rect(340px 99px 373px 50px);
 }
 
 #publishButton:hover:active {
   -moz-image-region: rect(340px 149px 373px 100px);
 }
 
 #publishButton[disabled="true"] {
   -moz-image-region: rect(340px 199px 373px 150px) !important;
 }
 
 #previewButton {
+  list-style-image: url("chrome://editor/skin/icons/btn1.gif");
   -moz-image-region: rect(204px 49px 237px 0);
 }
 
 #previewButton:hover {
   -moz-image-region: rect(204px 99px 237px 50px);
 }
 
 #previewButton:hover:active {
@@ -118,168 +119,176 @@
   -moz-image-region: rect(5px 126px 38px 84px);
 }
 
 #print-button[disabled="true"] {
   -moz-image-region: rect(5px 168px 38px 126px) !important;
 }
 
 #linkButton {
+  list-style-image: url("chrome://editor/skin/icons/btn1.gif");
   -moz-image-region: rect(102px 49px 135px 0);
 }
 
 #linkButton:hover {
   -moz-image-region: rect(102px 99px 135px 50px);
 }
 
 #linkButton:hover:active {
   -moz-image-region: rect(102px 149px 135px 100px);
 }
 
 #linkButton[disabled="true"] {
   -moz-image-region: rect(102px 199px 135px 150px) !important;
 }
 
 #imageButton {
+  list-style-image: url("chrome://editor/skin/icons/btn1.gif");
   -moz-image-region: rect(68px 49px 101px 0);
 }
 
 #imageButton:hover {
   -moz-image-region: rect(68px 99px 101px 50px);
 }
 
 #imageButton:hover:active {
   -moz-image-region: rect(68px 149px 101px 100px);
 }
 
 #imageButton[disabled="true"] {
   -moz-image-region: rect(68px 199px 101px 150px) !important;
 }
 
 #namedAnchorButton {
+  list-style-image: url("chrome://editor/skin/icons/btn1.gif");
   -moz-image-region: rect(0 49px 33px 0);
 }
 
 #namedAnchorButton:hover {
   -moz-image-region: rect(0 99px 33px 50px);
 }
 
 #namedAnchorButton:hover:active {
   -moz-image-region: rect(0 149px 33px 100px);
 }
 
 #namedAnchorButton[disabled="true"] {
   -moz-image-region: rect(0 199px 33px 150px) !important;
 }
 
 #hlineButton {
+  list-style-image: url("chrome://editor/skin/icons/btn1.gif");
   -moz-image-region: rect(34px 49px 67px 0);
 }
 
 #hlineButton:hover {
   -moz-image-region: rect(34px 99px 67px 50px);
 }
 
 #hlineButton:hover:active {
   -moz-image-region: rect(34px 149px 67px 100px);
 }
 
 #hlineButton[disabled="true"] {
   -moz-image-region: rect(34px 199px 67px 150px) !important;
 }
 
 #tableButton {
+  list-style-image: url("chrome://editor/skin/icons/btn1.gif");
   -moz-image-region: rect(306px 49px 339px 0);
 }
 
 #tableButton:hover {
   -moz-image-region: rect(306px 99px 339px 50px);
 }
 
 #tableButton:hover:active {
   -moz-image-region: rect(306px 149px 339px 100px);
 }
 
 #tableButton[disabled="true"] {
   -moz-image-region: rect(306px 199px 339px 150px) !important;
 }
 
 #spellingButton {
+  list-style-image: url("chrome://editor/skin/icons/btn1.gif");
   -moz-image-region: rect(272px 49px 305px 0);
 }
 
 #spellingButton:hover {
   -moz-image-region: rect(272px 99px 305px 50px);
 }
 
 #spellingButton:hover:active {
   -moz-image-region: rect(272px 149px 305px 100px);
 }
 
 #spellingButton[disabled="true"] {
   -moz-image-region: rect(272px 199px 305px 150px) !important;
 }
 
-
 #cutButton {
+  list-style-image: url("chrome://editor/skin/icons/btn1.gif");
   -moz-image-region: rect(374px 49px 407px 0);
 }
 
 #cutButton:hover {
   -moz-image-region: rect(374px 99px 407px 50px);
 }
 
 #cutButton:hover:active {
   -moz-image-region: rect(374px 149px 407px 100px);
 }
 
 #cutButton[disabled="true"] {
   -moz-image-region: rect(374px 199px 407px 150px) !important;
 }
 
 #copyButton {
+  list-style-image: url("chrome://editor/skin/icons/btn1.gif");
   -moz-image-region: rect(408px 49px 441px 0);
 }
 
 #copyButton:hover {
   -moz-image-region: rect(408px 99px 441px 50px);
 }
 
 #copyButton:hover:active {
   -moz-image-region: rect(408px 149px 441px 100px);
 }
 
 #copyButton[disabled="true"] {
   -moz-image-region: rect(408px 199px 441px 150px) !important;
 }
 
 #pasteButton {
+  list-style-image: url("chrome://editor/skin/icons/btn1.gif");
   -moz-image-region: rect(442px 49px 475px 0);
 }
 
 #pasteButton:hover {
   -moz-image-region: rect(442px 99px 475px 50px);
 }
 
 #pasteButton:hover:active {
   -moz-image-region: rect(442px 149px 475px 100px);
 }
 
 #pasteButton[disabled="true"] {
   -moz-image-region: rect(442px 199px 475px 150px) !important;
 }
 
 #findButton {
+  list-style-image: url("chrome://editor/skin/icons/btn1.gif");
   -moz-image-region: rect(476px 49px 509px 0);
 }
 
 #findButton:hover {
   -moz-image-region: rect(476px 99px 509px 50px);
 }
 
 #findButton:hover:active {
   -moz-image-region: rect(476px 149px 509px 100px);
 }
 
 #findButton[disabled="true"] {
   -moz-image-region: rect(476px 199px 509px 150px) !important;
 }
-
--- a/suite/themes/modern/jar.mn
+++ b/suite/themes/modern/jar.mn
@@ -14,16 +14,17 @@ modern.jar:
 % skin mozapps modern/1.0 %skin/modern/mozapps/
 % 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
   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)