Bug 606683 - Allow customization of toolbars in Composer and formatting toolbar in MailNews Composition - toolbar item tidy up v1.4 r=neil
authorIan Neal <iann_cvs@blueyonder.co.uk>
Mon, 28 Feb 2011 22:30:17 +0000
changeset 7244 a4afd59a66b2d9d6ae44344c4f3d1c30cdd86ca3
parent 7243 369ad40b3fc1a996fce7df5942102c022a78ac10
child 7245 118029396d1bfcaec7bbfb533a6a699383f6092e
push idunknown
push userunknown
push dateunknown
reviewersneil
bugs606683
Bug 606683 - Allow customization of toolbars in Composer and formatting toolbar in MailNews Composition - toolbar item tidy up v1.4 r=neil
editor/ui/composer/content/editor.xul
editor/ui/composer/content/editorOverlay.xul
editor/ui/composer/content/editorSmileyOverlay.xul
editor/ui/locales/en-US/chrome/composer/editorOverlay.dtd
suite/mailnews/compose/messengercompose.xul
--- a/editor/ui/composer/content/editor.xul
+++ b/editor/ui/composer/content/editor.xul
@@ -222,18 +222,18 @@
     </hbox> 
   </toolbar>
   <toolbar id="FormatToolbar"
            class="chromeclass-toolbar"
            persist="collapsed"
            grippytooltiptext="&formatToolbar.tooltip;"
            nowindowdrag="true">
     <!-- from editorOverlay -->
-    <menulist id="ParagraphSelect"/>
-    <stack id="ColorButtons"/>
+    <toolbaritem id="paragraph-select-container"/>
+    <toolbaritem id="color-buttons-container"/>
     <toolbarbutton id="HighlightColorButton"/>
 
     <toolbarseparator class="toolbarseparator-standard"/>
 
     <toolbarbutton id="DecreaseFontSizeButton"/>
     <toolbarbutton id="IncreaseFontSizeButton"/>
 
     <toolbarseparator class="toolbarseparator-standard"/>
--- a/editor/ui/composer/content/editorOverlay.xul
+++ b/editor/ui/composer/content/editorOverlay.xul
@@ -1065,38 +1065,42 @@
                 observes="cmd_TableOrCellColor"/>
       <menuitem id="menu_tableProperties"
                 label="&tableProperties.label;"
                 accesskey="&tableProperties.accesskey;"
                 observes="cmd_editTable"/>
     </menupopup>
   </menu>
 
-  <!-- this is only used in messengercompose.xul -->
-  <toolbarbutton type="menu" id="AlignPopupButton" observes="cmd_align"
-              tooltiptext="&AlignPopupButton.tooltip;">
+  <toolbarbutton id="AlignPopupButton"
+                 class="formatting-button"
+                 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;"
                 oncommand="doStatefulCommand('cmd_align', 'center')"
                 tooltiptext="&alignCenterButton.tooltip;"  />
       <menuitem id="AlignRightItem" class="menuitem-iconic" label="&alignRight.label;"
                 oncommand="doStatefulCommand('cmd_align', 'right')"
                 tooltiptext="&alignRightButton.tooltip;"   />
       <menuitem id="AlignJustifyItem" class="menuitem-iconic" label="&alignJustify.label;"
                 oncommand="doStatefulCommand('cmd_align', 'justify')"
-                tooltiptext="&alignjustifyButton.tooltip;" />
+                tooltiptext="&alignJustifyButton.tooltip;"/>
     </menupopup>
   </toolbarbutton>
 
-  <!-- InsertPopupButton is used by messengercompose.xul -->
-  <toolbarbutton type="menu" id="InsertPopupButton" observes="cmd_renderedHTMLEnabler"
-              tooltiptext="&InsertPopupButton.tooltip;">
+  <toolbarbutton id="InsertPopupButton"
+                 class="formatting-button"
+                 tooltiptext="&InsertPopupButton.tooltip;"
+                 type="menu"
+                 observes="cmd_renderedHTMLEnabler">
     <menupopup id="InsertPopup">
       <menuitem id="InsertLinkItem" class="menuitem-iconic" observes="cmd_link"
                 oncommand="goDoCommand('cmd_link')" label="&linkToolbarCmd.label;"
                 tooltiptext="&linkToolbarCmd.tooltip;"   />
       <menuitem id="InsertAnchorItem" class="menuitem-iconic" observes="cmd_anchor"
                 oncommand="goDoCommand('cmd_anchor')" label="&anchorToolbarCmd.label;"
                 tooltiptext="&anchorToolbarCmd.tooltip;" />
       <menuitem id="InsertImageItem"  class="menuitem-iconic" observes="cmd_image"
@@ -1166,147 +1170,226 @@
   <toolbarbutton id="linkButton" class="toolbarbutton-1"
                  label="&linkToolbarCmd.label;" observes="cmd_link"
                  tooltiptext="&linkToolbarCmd.tooltip;"/>
   <toolbarbutton id="namedAnchorButton" class="toolbarbutton-1"
                  label="&anchorToolbarCmd.label;" observes="cmd_anchor"
                  tooltiptext="&anchorToolbarCmd.tooltip;"/>
 
   <!-- Formatting toolbar items. "value" are HTML tagnames, don't translate -->
-  <menulist class="toolbar-focustarget" id="ParagraphSelect" observes="cmd_renderedHTMLEnabler"
-    tooltiptext="&ParagraphSelect.tooltip;" crop="right">
+<toolbaritem id="paragraph-select-container"
+             class="formatting-button"
+             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)">
       <menuitem id="toolbarmenu_bodyText" label="&bodyTextCmd.label;" value=""/>
       <menuitem id="toolbarmenu_paragraph" label="&paragraphParagraphCmd.label;" value="p"/>
       <menuitem id="toolbarmenu_h1" label="&heading1Cmd.label;" value="h1"/>
       <menuitem id="toolbarmenu_h2"  label="&heading2Cmd.label;" value="h2"/>
       <menuitem id="toolbarmenu_h3" label="&heading3Cmd.label;" value="h3"/>
       <menuitem id="toolbarmenu_h4" label="&heading4Cmd.label;" value="h4"/>
       <menuitem id="toolbarmenu_h5" label="&heading5Cmd.label;" value="h5"/>
       <menuitem id="toolbarmenu_h6" label="&heading6Cmd.label;" value="h6"/>
       <menuitem id="toolbarmenu_address" label="&paragraphAddressCmd.label;" value="address"/>
       <menuitem id="toolbarmenu_pre" label="&paragraphPreformatCmd.label;"  value="pre"/>
     </menupopup>
   </menulist>
+</toolbaritem>
 
   <!-- "value" are HTML tagnames, don't translate -->
-  <menulist class="toolbar-focustarget" id="FontFaceSelect" observes="cmd_renderedHTMLEnabler"
-    tooltiptext="&FontFaceSelect.tooltip;" crop="right">
+<toolbaritem id="font-face-select-container"
+             class="formatting-button"
+             tooltiptext="&FontFaceSelect.tooltip;"
+             observes="cmd_renderedHTMLEnabler">
+  <menulist id="FontFaceSelect"
+            class="toolbar-focustarget"
+            crop="right">
+    <observes element="font-face-select-container" attribute="disabled"/>
     <observes element="cmd_fontFace" attribute="state" onbroadcast="onFontFaceChange(this.parentNode, 'cmd_fontFace')"/>
     <menupopup id="FontFacePopup" oncommand="doStatefulCommand('cmd_fontFace', event.target.value)">
       <menuitem id="toolbarmenu_fontVarWidth" label="&fontVarWidth.label;" value=""/>
       <menuitem id="toolbarmenu_fontFixedWidth" label="&fontFixedWidth.label;" value="tt"/>
       <menuseparator id="toolbarmenuAfterFontFaceFontFixedWidthSeparator"/>
       <menuitem id="toolbarmenu_fontHelvetica" label="&fontHelvetica.label;"
                 value="Helvetica, Arial, sans-serif"/>
       <menuitem id="toolbarmenu_fontTimes" label="&fontTimes.label;"
                 value="Times New Roman, Times, serif"/>
       <menuitem id="toolbarmenu_fontCourier" label="&fontCourier.label;"
                 value="Courier New, Courier, monospace"/>
       <menuseparator id="toolbarmenuAfterFontFaceCourierSeparator"/>
     </menupopup>
   </menulist>
+</toolbaritem>
 
-  <menulist class="toolbar-focustarget" id="FontSizeSelect" oncommand="EditorSelectFontSize()"  tooltiptext="&FontSizeSelect.tooltip;" crop="right">
+<toolbaritem id="font-size-select-container"
+             class="formatting-button"
+             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">
       <menuitem id="toobarmenu_fontSize_xx-small" label="&size-xx-smallCmd.label;"/>
       <menuitem id="toobarmenu_fontSize_x-small" label="&size-x-smallCmd.label;"/>
       <menuitem id="toobarmenu_fontSize_small" label="&size-smallCmd.label;"/>
       <menuitem id="toobarmenu_fontSize_medium" label="&size-mediumCmd.label;"/>
       <menuitem id="toobarmenu_fontSize_large" label="&size-largeCmd.label;"/>
       <menuitem id="toobarmenu_fontSize_x-large" label="&size-x-largeCmd.label;"/>
       <menuitem id="toobarmenu_fontSize_xx-large" label="&size-xx-largeCmd.label;"/>
     </menupopup>
   </menulist>
+</toolbaritem>
 
+<toolbaritem id="color-buttons-container"
+             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"
-          tooltiptext="&HighlightColorButton.tooltip;" command="cmd_highlight">
+                 class="formatting-button"
+                 tooltiptext="&HighlightColorButton.tooltip;"
+                 command="cmd_highlight">
     <observes element="cmd_highlight" attribute="state" onbroadcast="onHighlightColorChange()"/>
     <observes element="cmd_highlight" attribute="collapsed"/>
   </toolbarbutton>
 
-<!-- A BUG IN CSS/BOXES MAKES THIS ASSERT WHEN CLASS= IS PRESENT AND WE TRY TO COLLAPSE THE TOOLBOX -->
-  <toolbarbutton id="DecreaseFontSizeButton" observes="cmd_decreaseFont"
-          tooltiptext="&decreaseFontSizeToolbarCmd.tooltip;"/>
-  <toolbarbutton id="IncreaseFontSizeButton" observes="cmd_increaseFont"
-          tooltiptext="&increaseFontSizeToolbarCmd.tooltip;"/>
-
-  <toolbarbutton id="boldButton" type="checkbox" autoCheck="false" observes="cmd_bold"
-          tooltiptext="&boldToolbarCmd.tooltip;">
+  <toolbarbutton id="DecreaseFontSizeButton"
+                 class="formatting-button"
+                 tooltiptext="&decreaseFontSizeToolbarCmd.tooltip;"
+                 observes="cmd_decreaseFont"/>
+  <toolbarbutton id="IncreaseFontSizeButton"
+                 class="formatting-button"
+                 tooltiptext="&increaseFontSizeToolbarCmd.tooltip;"
+                 observes="cmd_increaseFont"/>
+  <toolbarbutton id="boldButton"
+                 class="formatting-button"
+                 tooltiptext="&boldToolbarCmd.tooltip;"
+                 type="checkbox"
+                 autoCheck="false"
+                 observes="cmd_bold">
     <observes element="cmd_bold" type="checkbox" attribute="state" onbroadcast="onButtonUpdate(this.parentNode, 'cmd_bold')"/>
   </toolbarbutton>
-  <toolbarbutton id="italicButton" type="checkbox" autoCheck="false" observes="cmd_italic"
-          tooltiptext="&italicToolbarCmd.tooltip;">
+  <toolbarbutton id="italicButton"
+                 class="formatting-button"
+                 tooltiptext="&italicToolbarCmd.tooltip;"
+                 type="checkbox"
+                 autoCheck="false"
+                 observes="cmd_italic">
     <observes element="cmd_italic" attribute="state" onbroadcast="onButtonUpdate(this.parentNode, 'cmd_italic')"/>
   </toolbarbutton>
-  <toolbarbutton id="underlineButton" type="checkbox" autoCheck="false" observes="cmd_underline"
-          tooltiptext="&underlineToolbarCmd.tooltip;">
+  <toolbarbutton id="underlineButton"
+                 class="formatting-button"
+                 tooltiptext="&underlineToolbarCmd.tooltip;"
+                 type="checkbox"
+                 autoCheck="false"
+                 observes="cmd_underline">
     <observes element="cmd_underline" attribute="state" onbroadcast="onButtonUpdate(this.parentNode, 'cmd_underline')"/>
   </toolbarbutton>
 
-  <toolbarbutton id="ulButton" type="radio" group="lists" autoCheck="false" observes="cmd_ul"
-          tooltiptext="&bulletListToolbarCmd.tooltip;">
+  <toolbarbutton id="ulButton"
+                 class="formatting-button"
+                 tooltiptext="&bulletListToolbarCmd.tooltip;"
+                 type="radio"
+                 group="lists"
+                 autoCheck="false"
+                 observes="cmd_ul">
       <observes element="cmd_ul" attribute="state" onbroadcast="onButtonUpdate(this.parentNode, 'cmd_ul')"/>
   </toolbarbutton>
 
-  <toolbarbutton id="olButton" type="radio" group="lists" autoCheck="false" observes="cmd_ol"
-          tooltiptext="&numberListToolbarCmd.tooltip;">
+  <toolbarbutton id="olButton"
+                 class="formatting-button"
+                 tooltiptext="&numberListToolbarCmd.tooltip;"
+                 type="radio"
+                 group="lists"
+                 autoCheck="false"
+                 observes="cmd_ol">
       <observes element="cmd_ol" attribute="state" onbroadcast="onButtonUpdate(this.parentNode, 'cmd_ol')"/>
   </toolbarbutton>
 
-  <toolbarbutton id="outdentButton" observes="cmd_outdent"
-          tooltiptext="&outdentToolbarCmd.tooltip;"/>
-  <toolbarbutton id="indentButton" observes="cmd_indent"
-          tooltiptext="&indentToolbarCmd.tooltip;"/>
+  <toolbarbutton id="outdentButton"
+                 class="formatting-button"
+                 tooltiptext="&outdentToolbarCmd.tooltip;"
+                 observes="cmd_outdent"/>
+  <toolbarbutton id="indentButton"
+                 class="formatting-button"
+                 tooltiptext="&indentToolbarCmd.tooltip;"
+                 observes="cmd_indent"/>
 
   <!-- alignment buttons -->
-  <toolbarbutton id="align-left-button" type="radio" group="align" autoCheck="false"
-                 oncommand="doStatefulCommand('cmd_align', 'left')"
-                 tooltiptext="&alignLeft.tooltip;" >
+  <toolbarbutton id="align-left-button"
+                 class="formatting-button"
+                 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" type="radio" group="align" autoCheck="false"
-                 oncommand="doStatefulCommand('cmd_align', 'center')"
-                 tooltiptext="&alignCenter.tooltip;" >
+  <toolbarbutton id="align-center-button"
+                 class="formatting-button"
+                 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" type="radio" group="align" autoCheck="false"
-                 oncommand="doStatefulCommand('cmd_align', 'right')"
-                 tooltiptext="&alignRight.tooltip;" >
+  <toolbarbutton id="align-right-button"
+                 class="formatting-button"
+                 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" type="radio" group="align" autoCheck="false"
-                 oncommand="doStatefulCommand('cmd_align', 'justify')"
-                 tooltiptext="&alignJustify.tooltip;" >
+  <toolbarbutton id="align-justify-button"
+                 class="formatting-button"
+                 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" type="checkbox" tooltiptext="&layer.tooltip;" observes="cmd_absPos">
+ 
+  <toolbarbutton id="absolutePositionButton"
+                 class="formatting-button"
+                 tooltiptext="&layer.tooltip;"
+                 type="checkbox"
+                 observes="cmd_absPos">
     <observes element="cmd_absPos" attribute="state" onbroadcast="onStateButtonUpdate(this.parentNode, 'cmd_absPos', 'absolute')"/>
   </toolbarbutton>
-  <toolbarbutton id="decreaseZIndexButton" observes="cmd_decreaseZIndex"
-                 tooltiptext="&layerSendToBack.tooltip;"/>
-  <toolbarbutton id="increaseZIndexButton" observes="cmd_increaseZIndex"
-                 tooltiptext="&layerBringToFront.tooltip;"/>
+  <toolbarbutton id="decreaseZIndexButton"
+                 class="formatting-button"
+                 tooltiptext="&layerSendToBack.tooltip;"
+                 observes="cmd_decreaseZIndex"/>
+  <toolbarbutton id="increaseZIndexButton"
+                 class="formatting-button"
+                 tooltiptext="&layerBringToFront.tooltip;"
+                 observes="cmd_increaseZIndex"/>
 
   <!-- Edit Mode toolbar -->
   <tabs id="EditModeTabs" onselect="this.selectedItem.doCommand()"/>
   <tab id="NormalModeButton"   class="tab-bottom edit-mode _plain" type="text" selected="1" label="&NormalModeTab.label;"  oncommand="goDoCommand('cmd_NormalMode');"
           tooltiptext="&NormalMode.tooltip;"/>
   <tab id="TagModeButton"      class="tab-bottom edit-mode _plain" type="text" selected="0" label="&AllTagsMode.label;"    oncommand="goDoCommand('cmd_AllTagsMode');"
           tooltiptext="&AllTagsMode.tooltip;"/>
   <tab id="SourceModeButton"   class="tab-bottom edit-mode _plain" type="text" selected="0" label="&SourceMode.label;"     oncommand="goDoCommand('cmd_HTMLSourceMode');"
--- a/editor/ui/composer/content/editorSmileyOverlay.xul
+++ b/editor/ui/composer/content/editorSmileyOverlay.xul
@@ -35,19 +35,21 @@
    - the terms of any one of the MPL, the GPL or the LGPL.
    -
    - ***** END LICENSE BLOCK ***** -->
 
 <!DOCTYPE overlay SYSTEM "chrome://editor/locale/editorSmileyOverlay.dtd">
 
 <overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <!-- smiley menu -->
-  <toolbarbutton type="menu" id="smileButtonMenu"
-                 observes="cmd_smiley"
-                 tooltiptext="&SmileButton.tooltip;">
+  <toolbarbutton id="smileButtonMenu"
+                 class="formatting-button"
+                 tooltiptext="&SmileButton.tooltip;"
+                 type="menu"
+                 observes="cmd_smiley">
     <menupopup id="smilyPopup">
       <menuitem class="smiley insert-smile menuitem-iconic"       label="&smiley1Cmd.label;" 
                 oncommand="doStatefulCommand('cmd_smiley', ':-)'  )"  
                 tooltiptext="&smiley1Cmd.tooltip;"  />
       <menuitem class="smiley insert-frown menuitem-iconic"       label="&smiley2Cmd.label;"
                 oncommand="doStatefulCommand('cmd_smiley', ':-('  )" 
                 tooltiptext="&smiley2Cmd.tooltip;"  />                                              
       <menuitem class="smiley insert-wink menuitem-iconic"        label="&smiley3Cmd.label;"
--- a/editor/ui/locales/en-US/chrome/composer/editorOverlay.dtd
+++ b/editor/ui/locales/en-US/chrome/composer/editorOverlay.dtd
@@ -444,17 +444,17 @@
 <!ENTITY numberListToolbarCmd.tooltip "Apply or remove numbered list">
 <!ENTITY outdentToolbarCmd.tooltip "Outdent text (move left)">
 <!ENTITY indentToolbarCmd.tooltip "Indent text (move right)">
 <!ENTITY AlignPopupButton.tooltip "Choose text alignment">
 <!ENTITY InsertPopupButton.tooltip "Insert a Link, Anchor, Image, Horizontal Line, or Table">
 <!ENTITY alignLeftButton.tooltip "Align text along left margin">
 <!ENTITY alignCenterButton.tooltip "Align text centered">
 <!ENTITY alignRightButton.tooltip "Align text along right margin">
-<!ENTITY alignjustifyButton.tooltip "Align text along left and right margins">
+<!ENTITY alignJustifyButton.tooltip "Align text along left and right margins">
 
 <!-- Display Mode toolbar and View menu items -->
 <!ENTITY NormalModeTab.label "Normal">
 <!ENTITY NormalMode.label "Normal Edit Mode">
 <!ENTITY NormalMode.accesskey "n">
 <!ENTITY NormalMode.tooltip "Show table borders and named anchors">
 <!ENTITY AllTagsMode.label "HTML Tags">
 <!ENTITY AllTagsMode.accesskey "A">
--- a/suite/mailnews/compose/messengercompose.xul
+++ b/suite/mailnews/compose/messengercompose.xul
@@ -629,20 +629,20 @@
     </toolbar>
 
     <!-- These toolbar items get filled out from the editorOverlay -->
     <toolbar id="FormatToolbar"
              class="chromeclass-toolbar"
              persist="collapsed"
              grippytooltiptext="&formatToolbar.tooltip;"
              nowindowdrag="true">
-      <menulist id="ParagraphSelect"/>
-      <menulist id="FontFaceSelect"/>
-      <stack id="ColorButtons"
-             disableoncustomize="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"/>