Fixed bug 20829: separate editor toolbars css into separate file to be shared with mail composer. changed 'Properties...' item on format menu to be disabled, not removed. r=sfraser

editor/ui/composer/content/EditorCommands.js

@@ -1187,46 +1187,43 @@ function EditorInitFormatMenu()
   if (menuItem)
   {
     var element = GetSelectedElementOrParentCell();
-    if (element)
+    var menuStr = editorShell.GetString("ObjectProperties");
+    if (element && element.nodeName)
     {
-      dump("TagName="+element.nodeName+"\n");
+      var objStr = "";
-      if (element.nodeName)
+      menuItem.removeAttribute("disabled");
+      switch (element.nodeName)
       {
-        menuItem.removeAttribute("hidden");
+        case 'IMG':
-        menuItem.removeAttribute("disabled");
+          objStr = editorShell.GetString("Image");
-
+          break;
-        var objStr;
+        case 'HR':
-        var menuStr = editorShell.GetString("ObjectProperties");
+          objStr = editorShell.GetString("HLine");
-        switch (element.nodeName)
+          break;
-        {
+        case 'TABLE':
-          case 'IMG':
+          objStr = editorShell.GetString("Table");
-            objStr = editorShell.GetString("Image");
+          break;
-            break;
+        case 'TD':
-          case 'HR':
+          objStr = editorShell.GetString("TableCell");
-            objStr = editorShell.GetString("HLine");
+          break;
-            break;
+        case 'A':
-          case 'TABLE':
+          if(element.href)
-            objStr = editorShell.GetString("Table");
+            objStr = editorShell.GetString("Link");
-            break;
+          else if (element.name)
-          case 'TD':
+            objStr = editorShell.GetString("NamedAnchor");
-            objStr = editorShell.GetString("TableCell");
+          break;
-            break;
-          case 'A':
-            if(element.href)
-              objStr = editorShell.GetString("Link");
-            else if (element.name)
-              objStr = editorShell.GetString("NamedAnchor");
-            break;
-        }
-        menuStr = menuStr.replace(/%obj%/,objStr);        
-        menuItem.setAttribute("value", menuStr)
       }
-    } else {
+      menuStr = menuStr.replace(/%obj%/,objStr);        
-      // No element to set properties on - hide menu item
+    }
-      // This works only on Mac and Linux
+    else
-      menuItem.setAttribute("hidden","true");
+    {
+      // We show generic "Properties" string, but disable menu item
+      menuItem.setAttribute("disabled","true");
+      // Replace placeholder with "", then remaining space on left side
+      menuStr = menuStr.replace(/%obj%/,"").replace(/^\s+/, "");
 
     }
+    menuItem.setAttribute("value", menuStr)
   }
 }
 

editor/ui/composer/content/editor.xul

@@ -107,7 +107,7 @@
 
     <menu id="formatMenu" value="&formatMenu.label;" accesskey="&formatmenu.accesskey;">
       <menupopup id="formatMenuPopup">
-        <menuitem id="objectProperties" hidden="true"/>
+        <menuitem id="objectProperties"/>
         <menuitem id="colorsAndBackground"/>
         <menuitem id="pageProperties"/>
       </menupopup>

editor/ui/composer/locale/en-US/editor.properties

@@ -89,4 +89,4 @@ Image=Image
 NamedAnchor=Named Anchor
 Tag=Tag
 #Don't translate "%obj%" it will be replaced with one of above object nouns
-ObjectProperties=%obj% Properties
+ObjectProperties=%obj% Properties...

editor/ui/composer/skin/EditorToolbars.css

@@ -0,0 +1,348 @@
+/* 
+ * The contents of this file are subject to the Netscape Public
+ * License Version 1.1 (the "License"); you may not use this file
+ * except in compliance with the License. You may obtain a copy of
+ * the License at http://www.mozilla.org/NPL/
+ *  
+ * Software distributed under the License is distributed on an "AS
+ * IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or
+ * implied. See the License for the specific language governing
+ * rights and limitations under the License.
+ *  
+ * The Original Code is Mozilla Communicator client code, released
+ * March 31, 1998.
+ * 
+ * The Initial Developer of the Original Code is Netscape
+ * Communications Corporation. Portions created by Netscape are
+ * Copyright (C) 1998-1999 Netscape Communications Corporation. All
+ * Rights Reserved.
+ * 
+ * Contributor(s): 
+ */
+
+/* This contains CSS just for editor toolbars */
+
+toolbox#EditorToolbox {
+  min-width: 1px;
+}
+
+toolbar#FormatToolbar {
+  border-bottom: 1px solid #003366;
+}
+
+/* A small "toolbar" below content, above status */
+box#DisplayModeBar {
+  padding:       0px;
+  /* Same as "standard" toolbar background */
+  border-top:    1px solid #003366;
+  border-bottom: 1px solid darkgray;
+  margin-bottom: 0px;
+  min-width:     1px;
+  color:         white;
+  background-color: #999999;
+  overflow:      hidden;
+}
+
+toolbar#FormatToolbar titledbutton.format {
+  border: 1px solid transparent;
+  margin: 1px 1px 1px 1px;
+	padding: 2px;
+	text-decoration: none;
+	color: inherit;
+}
+
+toolbar#FormatToolbar titledbutton.format[toggled="1"] {
+  border: 1px white inset;
+}
+
+toolbar#FormatToolbar titledbutton.format:hover {
+/* What we should use, but this has a blue border that doesn't look good against gray toolbars 
+	background-image:url("chrome://global/skin/otherbutton28-bg-hover.gif");
+	background-image:url("chrome://editor/skin/images/hover-teal.gif");
+	background-repeat: no-repeat;
+  background-position: center center;
+*/
+  border: 1px solid white;
+	text-decoration: none;
+  /* global class="plain" should do this! */
+}
+
+toolbar#FormatToolbar titledbutton.format:active {
+  margin: 2px 0px 0px 2px;
+}
+
+toolbar#FormatToolbar titledbutton.TextAttribute {
+	/* Make these buttons narrower */
+  padding: 2px 0px;
+  min-width: 16px; 
+  width: 16px; 
+  font-size: 19px; 
+  font-family: arial,helvetica,sans-serif;
+  /* font-family: times, serif, sans-serif; */
+}
+
+toolbar#FormatToolbar titledbutton#boldButton {
+  list-style-image:url(chrome://editor/skin/images/bold.gif); 
+  font-weight: bold; 
+}
+
+toolbar#FormatToolbar titledbutton#italicButton {
+  list-style-image:url(chrome://editor/skin/images/italic.gif); 
+  /* font-weight: bold; */
+  font-style:  italic;
+}
+
+toolbar#FormatToolbar titledbutton#underlineButton {
+  list-style-image:url(chrome://editor/skin/images/underline.gif); 
+  font-weight: normal; 
+  text-decoration: underline;
+}
+
+input#PageTitle, input#PageAuthor {
+  min-width: 5em;
+}
+
+div.toolbar-middle {
+  /* trying to center vertically in the toolbar! */
+  vertical-align: middle;
+}
+select.toolbar {
+  /* This is ignored! */
+	/*font-size: smaller;*/
+  max-width: 20em;
+  margin: 2px 3px 0px 3px;
+}
+
+box#DisplayModeBar titledbutton.DisplayModeButton {
+  -moz-border-radius: 0px 0px 8px 8px;
+  border-top: 1px solid #CCCCCC;
+  border-bottom: 1px solid #666666;
+  border-left: 1px solid white;
+  border-right: 1px solid #666666;
+  padding: 0px 4px 0px 4px;
+  margin: 0px;
+  color: black;
+  background-color: #CCCCCC;
+}
+
+box#DisplayModeBar titledbutton.DisplayModeButton:hover {
+  border:  1px solid white;
+}
+
+box#DisplayModeBar titledbutton.DisplayModeButton:active {
+  padding: 1px 5px -1px 3px;
+}
+
+box#DisplayModeBar titledbutton.DisplayModeButton[selected="1"] {
+  padding: 0px 4px 0px 4px;
+  margin: -2px 0px 0px 0px;
+  font-weight: bold;
+}
+
+box#DisplayModeBar titledbutton.DisplayModeButton[selected="1"]:active {
+  padding: 1px 5px -1px 3px;
+}
+
+box#DisplayModeBar div.VerticalSeparator { 
+	 height: 100%; 
+	 max-width: 1px; 
+   border-left: 1px solid darkgray;
+	 margin: 1px 0px;
+}
+
+spring.spacer3 {
+      width:  3px;
+      height: 3px;
+}
+
+spring.spacer5 {
+      width:  5px;
+      height: 5px;
+}
+
+spring.spacer-throbber {
+  /* this is throbber box width - 12 */
+	width: 56px;
+}
+/* Image URLs for all Editor toolbar buttons */
+
+titledbutton#newButton {
+	list-style-image:url("chrome://editor/skin/images/newfile.gif");
+}
+titledbutton#openButton {
+	list-style-image:url("chrome://editor/skin/images/openfile.gif");
+}
+
+titledbutton#saveButton {
+	list-style-image:url("chrome://editor/skin/images/savefile.gif");
+}
+titledbutton#saveButton[dirty="true"] {
+  list-style-image:url(chrome://editor/skin/images/savemod.gif); 
+}
+
+titledbutton#publishButton {
+	list-style-image:url("chrome://editor/skin/images/publish.gif");
+}
+titledbutton#previewButton {
+	list-style-image:url("chrome://editor/skin/images/preview.gif");
+}
+titledbutton#printButton {
+	list-style-image:url("chrome://editor/skin/images/print.gif");
+}
+titledbutton#findButton {
+	list-style-image:url("chrome://editor/skin/images/find.gif");
+}
+titledbutton#linkButton {
+	list-style-image:url("chrome://editor/skin/images/link-white.gif");
+}
+titledbutton#imageButton {
+	list-style-image:url("chrome://editor/skin/images/image-white.gif");
+}
+titledbutton#namedAnchorButton {
+	list-style-image:url("chrome://editor/skin/images/anchor-white.gif");
+}
+titledbutton#hlineButton {
+	list-style-image:url("chrome://editor/skin/images/hline-white.gif");
+}
+titledbutton#tableButton {
+	list-style-image:url("chrome://editor/skin/images/table-white.gif");
+}
+titledbutton#linkButton-dark {
+	list-style-image:url("chrome://editor/skin/images/link.gif");
+}
+titledbutton#imageButton-dark {
+	list-style-image:url("chrome://editor/skin/images/image.gif");
+}
+titledbutton#namedAnchorButton-dark {
+	list-style-image:url("chrome://editor/skin/images/anchor.gif");
+}
+titledbutton#hlineButton-dark {
+	list-style-image:url("chrome://editor/skin/images/hline.gif");
+}
+titledbutton#tableButton-dark {
+	list-style-image:url("chrome://editor/skin/images/table.gif");
+}
+titledbutton#spellingButton {
+	list-style-image:url("chrome://editor/skin/images/spell.gif");
+}
+
+titledbutton#DecreaseFontSizeButton {
+	list-style-image:url("chrome://editor/skin/images/dec-font-size.gif");
+  border: 1px solid transparent;
+  margin:  1px 0px 1px 1px;
+  padding: 2px 1px 2px 2px;
+}
+titledbutton#DecreaseFontSizeButton:hover {
+  border: 1px solid white;
+}
+titledbutton#DecreaseFontSizeButton:active {
+  border: 1px inset white;
+  padding: 3px 0px 1px 3px;
+}
+titledbutton#IncreaseFontSizeButton {
+	list-style-image:url("chrome://editor/skin/images/inc-font-size.gif");
+  border: 1px solid transparent;
+  margin: 1px 1px 1px 0px;
+  padding: 2px 2px 2px 0px;
+}
+titledbutton#IncreaseFontSizeButton:hover {
+  border: 1px solid white;
+}
+titledbutton#IncreaseFontSizeButton:active {
+  border: 1px inset white;
+  padding: 3px 1px 1px 1px;
+}
+
+titledbutton#ulButton {
+	list-style-image:url("chrome://editor/skin/images/bullets.gif");
+}
+titledbutton#olButton {
+	list-style-image:url("chrome://editor/skin/images/numbers.gif");
+}
+titledbutton#outdentButton {
+	list-style-image:url("chrome://editor/skin/images/outdent.gif");
+}
+titledbutton#indentButton {
+	list-style-image:url("chrome://editor/skin/images/indent.gif");
+}
+titledbutton#AlignPopupButton {
+	list-style-image:url("chrome://editor/skin/images/align.gif");
+}
+titledbutton#InsertPopupButton {
+	list-style-image:url("chrome://editor/skin/images/object-popup.gif");
+}
+
+text.color-caption {
+  border: 1px inset white;
+}
+
+div#ColorButtons {
+  /* Width needs to be enough for overlapping
+     buttons. Note: color.gif=14px + 2 for borders.
+     We use relative position to move buttons
+     to desired positions
+  */
+  width:       30px;
+  max-width:   30px;
+  /* Other toolbar buttons are 16px high (+border and margin), 
+     so limit total height of color buttons
+     region to a compatable height
+  */
+  height:      22px;
+  max-height:  22px;
+}
+
+/* The initial layout of these buttons is:
+   BackColorPopupButton appears above TextColorPopupButton.
+   BackColorPopupButton must be 1st in XUL so that
+   TextColorPopupButton is on top after relative positioning,
+   which places TextColorPopupButton button in upper left and 
+   BackColorPopupButton button at lower right of the ColorButtons div
+*/
+
+titledbutton#TextColorPopupButton {
+	list-style-image:url("chrome://editor/skin/images/color.gif");
+  border: 1px solid #CCCCCC;
+  padding: 0px;
+  margin:  0px;
+  position: relative;
+  top:  -15px;
+  left: 1px;
+
+  /* TEMP: Set color here. TODO: Set color from page */
+  background-color: #AA0000;
+}
+
+titledbutton#TextColorPopupButton:hover {
+  border: 1px solid white;
+}
+
+titledbutton#BackColorPopupButton {
+	list-style-image:url("chrome://editor/skin/images/color.gif");
+  border: 1px solid #CCCCCC;
+  padding: 0px;
+  margin:  0px;
+  position: relative;
+  top:  7px;
+  left: 12px;
+
+  /* TEMP: Set color here. TODO: Set color from page */
+  background-color: yellow;
+}
+
+titledbutton#BackColorPopupButton:hover {
+  border: 1px solid white;
+}
+
+titledbutton#text-align-left {
+	list-style-image:url("chrome://editor/skin/images/left.gif");
+}
+titledbutton#text-align-center {
+	list-style-image:url("chrome://editor/skin/images/center.gif");
+}
+titledbutton#text-align-right {
+	list-style-image:url("chrome://editor/skin/images/right.gif");
+}
+titledbutton#text-align-justify {
+	list-style-image:url("chrome://editor/skin/images/justify.gif");
+}

editor/ui/composer/skin/MANIFEST

@@ -21,6 +21,7 @@
 # 
 
 editor.css
+EditorToolbars.css
 
 #skin directory
 

editor/ui/composer/skin/Makefile.in

@@ -26,7 +26,10 @@ VPATH		= @srcdir@
 
 include $(DEPTH)/config/autoconf.mk
 
-EXPORT_RESOURCE_SKIN = $(srcdir)/editor.css
+EXPORT_RESOURCE_SKIN = \
+		$(srcdir)/editor.css \
+		$(srcdir)/EditorToolbars.css \
+		$(NULL)
 
 EXPORT_RESOURCE_TOOLBAR = \
 		$(srcdir)/images/bold.gif \

editor/ui/composer/skin/editor.css

@@ -21,335 +21,10 @@
  */
 
 @import url(chrome://global/skin/);
+@import url(chrome://editor/skin/EditorToolbars.css);
 
 iframe#content-frame { 
   min-width: 10px; 
   min-height: 10px;
   height: 400px;
 } 
-
-
-toolbox#EditorToolbox {
-  min-width: 1px;
-}
-
-toolbar#FormatToolbar {
-  border-bottom: 1px solid #003366;
-}
-
-/* A small "toolbar" below content, above status */
-box#DisplayModeBar {
-  padding:       0px;
-  /* Same as "standard" toolbar background */
-  border-top:    1px solid #003366;
-  border-bottom: 1px solid darkgray;
-  margin-bottom: 0px;
-  min-width:     1px;
-  color:         white;
-  background-color: #999999;
-  overflow:      hidden;
-}
-
-toolbar#FormatToolbar titledbutton.format {
-  border: 1px solid transparent;
-  margin: 1px 1px 1px 1px;
-	padding: 2px;
-	text-decoration: none;
-	color: inherit;
-}
-
-toolbar#FormatToolbar titledbutton.format[toggled="1"] {
-  border: 1px white inset;
-}
-
-toolbar#FormatToolbar titledbutton.format:hover {
-/* What we should use, but this has a blue border that doesn't look good against gray toolbars 
-	background-image:url("chrome://global/skin/otherbutton28-bg-hover.gif");
-	background-image:url("chrome://editor/skin/images/hover-teal.gif");
-	background-repeat: no-repeat;
-  background-position: center center;
-*/
-  border: 1px solid white;
-	text-decoration: none;
-  /* global class="plain" should do this! */
-}
-
-toolbar#FormatToolbar titledbutton.format:active {
-  margin: 2px 0px 0px 2px;
-}
-
-toolbar#FormatToolbar titledbutton.TextAttribute {
-	/* Make these buttons narrower */
-  padding: 2px 0px;
-  min-width: 16px; 
-  width: 16px; 
-  font-size: 19px; 
-  font-family: arial,helvetica,sans-serif;
-  /* font-family: times, serif, sans-serif; */
-}
-
-toolbar#FormatToolbar titledbutton#boldButton {
-  list-style-image:url(chrome://editor/skin/images/bold.gif); 
-  font-weight: bold; 
-}
-
-toolbar#FormatToolbar titledbutton#italicButton {
-  list-style-image:url(chrome://editor/skin/images/italic.gif); 
-  /* font-weight: bold; */
-  font-style:  italic;
-}
-
-toolbar#FormatToolbar titledbutton#underlineButton {
-  list-style-image:url(chrome://editor/skin/images/underline.gif); 
-  font-weight: normal; 
-  text-decoration: underline;
-}
-
-input#PageTitle, input#PageAuthor {
-  min-width: 5em;
-}
-
-div.toolbar-middle {
-  /* trying to center vertically in the toolbar! */
-  vertical-align: middle;
-}
-select.toolbar {
-  /* This is ignored! */
-	/*font-size: smaller;*/
-  max-width: 20em;
-  margin: 2px 3px 0px 3px;
-}
-
-box#DisplayModeBar titledbutton.DisplayModeButton {
-  -moz-border-radius: 0px 0px 8px 8px;
-  border-top: 1px solid #CCCCCC;
-  border-bottom: 1px solid #666666;
-  border-left: 1px solid white;
-  border-right: 1px solid #666666;
-  padding: 0px 4px 0px 4px;
-  margin: 0px;
-  color: black;
-  background-color: #CCCCCC;
-}
-
-box#DisplayModeBar titledbutton.DisplayModeButton:hover {
-  border:  1px solid white;
-}
-
-box#DisplayModeBar titledbutton.DisplayModeButton:active {
-  padding: 1px 5px -1px 3px;
-}
-
-box#DisplayModeBar titledbutton.DisplayModeButton[selected="1"] {
-  padding: 0px 4px 0px 4px;
-  margin: -2px 0px 0px 0px;
-  font-weight: bold;
-}
-
-box#DisplayModeBar titledbutton.DisplayModeButton[selected="1"]:active {
-  padding: 1px 5px -1px 3px;
-}
-
-box#DisplayModeBar div.VerticalSeparator { 
-	 height: 100%; 
-	 max-width: 1px; 
-   border-left: 1px solid darkgray;
-	 margin: 1px 0px;
-}
-
-spring.spacer3 {
-      width:  3px;
-      height: 3px;
-}
-
-spring.spacer5 {
-      width:  5px;
-      height: 5px;
-}
-
-spring.spacer-throbber {
-  /* this is throbber box width - 12 */
-	width: 56px;
-}
-/* Image URLs for all Editor toolbar buttons */
-
-titledbutton#newButton {
-	list-style-image:url("chrome://editor/skin/images/newfile.gif");
-}
-titledbutton#openButton {
-	list-style-image:url("chrome://editor/skin/images/openfile.gif");
-}
-
-titledbutton#saveButton {
-	list-style-image:url("chrome://editor/skin/images/savefile.gif");
-}
-titledbutton#saveButton[dirty="true"] {
-  list-style-image:url(chrome://editor/skin/images/savemod.gif); 
-}
-
-titledbutton#publishButton {
-	list-style-image:url("chrome://editor/skin/images/publish.gif");
-}
-titledbutton#previewButton {
-	list-style-image:url("chrome://editor/skin/images/preview.gif");
-}
-titledbutton#printButton {
-	list-style-image:url("chrome://editor/skin/images/print.gif");
-}
-titledbutton#findButton {
-	list-style-image:url("chrome://editor/skin/images/find.gif");
-}
-titledbutton#linkButton {
-	list-style-image:url("chrome://editor/skin/images/link-white.gif");
-}
-titledbutton#imageButton {
-	list-style-image:url("chrome://editor/skin/images/image-white.gif");
-}
-titledbutton#namedAnchorButton {
-	list-style-image:url("chrome://editor/skin/images/anchor-white.gif");
-}
-titledbutton#hlineButton {
-	list-style-image:url("chrome://editor/skin/images/hline-white.gif");
-}
-titledbutton#tableButton {
-	list-style-image:url("chrome://editor/skin/images/table-white.gif");
-}
-titledbutton#linkButton-dark {
-	list-style-image:url("chrome://editor/skin/images/link.gif");
-}
-titledbutton#imageButton-dark {
-	list-style-image:url("chrome://editor/skin/images/image.gif");
-}
-titledbutton#namedAnchorButton-dark {
-	list-style-image:url("chrome://editor/skin/images/anchor.gif");
-}
-titledbutton#hlineButton-dark {
-	list-style-image:url("chrome://editor/skin/images/hline.gif");
-}
-titledbutton#tableButton-dark {
-	list-style-image:url("chrome://editor/skin/images/table.gif");
-}
-titledbutton#spellingButton {
-	list-style-image:url("chrome://editor/skin/images/spell.gif");
-}
-
-titledbutton#DecreaseFontSizeButton {
-	list-style-image:url("chrome://editor/skin/images/dec-font-size.gif");
-  border: 1px solid transparent;
-  margin:  1px 0px 1px 1px;
-  padding: 2px 1px 2px 2px;
-}
-titledbutton#DecreaseFontSizeButton:hover {
-  border: 1px solid white;
-}
-titledbutton#DecreaseFontSizeButton:active {
-  border: 1px inset white;
-  padding: 3px 0px 1px 3px;
-}
-titledbutton#IncreaseFontSizeButton {
-	list-style-image:url("chrome://editor/skin/images/inc-font-size.gif");
-  border: 1px solid transparent;
-  margin: 1px 1px 1px 0px;
-  padding: 2px 2px 2px 0px;
-}
-titledbutton#IncreaseFontSizeButton:hover {
-  border: 1px solid white;
-}
-titledbutton#IncreaseFontSizeButton:active {
-  border: 1px inset white;
-  padding: 3px 1px 1px 1px;
-}
-
-titledbutton#ulButton {
-	list-style-image:url("chrome://editor/skin/images/bullets.gif");
-}
-titledbutton#olButton {
-	list-style-image:url("chrome://editor/skin/images/numbers.gif");
-}
-titledbutton#outdentButton {
-	list-style-image:url("chrome://editor/skin/images/outdent.gif");
-}
-titledbutton#indentButton {
-	list-style-image:url("chrome://editor/skin/images/indent.gif");
-}
-titledbutton#AlignPopupButton {
-	list-style-image:url("chrome://editor/skin/images/align.gif");
-}
-titledbutton#InsertPopupButton {
-	list-style-image:url("chrome://editor/skin/images/object-popup.gif");
-}
-
-text.color-caption {
-  border: 1px inset white;
-}
-
-div#ColorButtons {
-  /* Width needs to be enough for overlapping
-     buttons. Note: color.gif=14px + 2 for borders.
-     We use relative position to move buttons
-     to desired positions
-  */
-  width:       30px;
-  max-width:   30px;
-  /* Other toolbar buttons are 16px high (+border and margin), 
-     so limit total height of color buttons
-     region to a compatable height
-  */
-  height:      22px;
-  max-height:  22px;
-}
-
-/* The initial layout of these buttons is:
-   BackColorPopupButton appears above TextColorPopupButton.
-   BackColorPopupButton must be 1st in XUL so that
-   TextColorPopupButton is on top after relative positioning,
-   which places TextColorPopupButton button in upper left and 
-   BackColorPopupButton button at lower right of the ColorButtons div
-*/
-
-titledbutton#TextColorPopupButton {
-	list-style-image:url("chrome://editor/skin/images/color.gif");
-  border: 1px solid #CCCCCC;
-  padding: 0px;
-  margin:  0px;
-  position: relative;
-  top:  -15px;
-  left: 1px;
-
-  /* TEMP: Set color here. TODO: Set color from page */
-  background-color: #AA0000;
-}
-
-titledbutton#TextColorPopupButton:hover {
-  border: 1px solid white;
-}
-
-titledbutton#BackColorPopupButton {
-	list-style-image:url("chrome://editor/skin/images/color.gif");
-  border: 1px solid #CCCCCC;
-  padding: 0px;
-  margin:  0px;
-  position: relative;
-  top:  7px;
-  left: 12px;
-
-  /* TEMP: Set color here. TODO: Set color from page */
-  background-color: yellow;
-}
-
-titledbutton#BackColorPopupButton:hover {
-  border: 1px solid white;
-}
-
-titledbutton#text-align-left {
-	list-style-image:url("chrome://editor/skin/images/left.gif");
-}
-titledbutton#text-align-center {
-	list-style-image:url("chrome://editor/skin/images/center.gif");
-}
-titledbutton#text-align-right {
-	list-style-image:url("chrome://editor/skin/images/right.gif");
-}
-titledbutton#text-align-justify {
-	list-style-image:url("chrome://editor/skin/images/justify.gif");
-}

editor/ui/composer/skin/makefile.win

@@ -24,7 +24,8 @@ DEPTH=..\..\..\..
 include <$(DEPTH)\config\rules.mak>
 
 install:: $(DLL)
-  $(MAKE_INSTALL) editor.css              $(DIST)\bin\chrome\editor\skin\default
+  $(MAKE_INSTALL) editor.css            $(DIST)\bin\chrome\editor\skin\default
+  $(MAKE_INSTALL) EditorToolbars.css    $(DIST)\bin\chrome\editor\skin\default
   $(MAKE_INSTALL) images\align.gif	    $(DIST)\bin\chrome\editor\skin\default\images
   $(MAKE_INSTALL) images\bold.gif			$(DIST)\bin\chrome\editor\skin\default\images
   $(MAKE_INSTALL) images\bullets.gif		$(DIST)\bin\chrome\editor\skin\default\images
@@ -73,6 +74,7 @@ install:: $(DLL)
 
 clobber::
   rm -f $(DIST)\bin\chrome\editor\skin\default\editor.css
+  rm -f $(DIST)\bin\chrome\editor\skin\default\EditorToolbars.css
   rm -f $(DIST)\bin\chrome\editor\skin\default\images\align.gif			
   rm -f $(DIST)\bin\chrome\editor\skin\default\images\bold.gif			
   rm -f $(DIST)\bin\chrome\editor\skin\default\images\bullets.gif