More changes to Composer for new skin (mostly new images).

editor/ui/composer/content/editor.xul

@@ -130,12 +130,12 @@
 <toolbox>
    <!-- toolbar filled out from editorOverlay -->
    <!-- add  class="standard" for dark blue background (icons need rework first) -->
-   <toolbar id="EditToolbar" persist="collapsed">
+   <toolbar id="EditToolbar" class="standard" persist="collapsed">
       <titledbutton id="newButton"/>
       <titledbutton id="openButton"/>
       <titledbutton id="saveButton"/>
       
-      <html:div class="separator" align="vertical" />
+      <!-- html:div class="separator" align="vertical" /-->
 
       <titledbutton id="printButton"/>
       <titledbutton id="findButton"/>
@@ -147,12 +147,12 @@
       <titledbutton id="hlineButton"/>
       <titledbutton id="tableButton"/>
 
-      <html:div class="separator" align="vertical" />
+      <!-- html:div class="separator" align="vertical" / -->
 
       <titledbutton id="linkButton"/>
       <titledbutton id="namedAnchorButton"/>
 
-      <html:div class="separator" align="vertical" />
+      <!-- html:div class="separator" align="vertical" / -->
       <spring flex="100%"/>
     </toolbar>
     
@@ -179,13 +179,13 @@
         <menupopup id="BackColorPopup"/>
       </menu>
       
-      <html:div class="separator" align="vertical" />
+      <!-- html:div class="separator" align="vertical" / -->
 
       <titledbutton id="boldButton"/>
       <titledbutton id="italicButton"/>
       <titledbutton id="underlineButton"/>
 
-      <html:div class="separator" align="vertical" />
+      <!-- html:div class="separator" align="vertical" / -->
 
       <titledbutton id="ulButton"/>
       <titledbutton id="olButton"/>
@@ -193,7 +193,7 @@
       <titledbutton id="outdentButton"/>
       <titledbutton id="indentButton"/>
 
-      <html:div class="separator" align="vertical" />
+      <!-- html:div class="separator" align="vertical" / -->
 
       <menu>
         <titledbutton id="AlignPopupButton"/>
@@ -218,7 +218,7 @@
         <!-- This is a pain: can't use CSS margin to add extra space above text? -->
         <box align="vertical">
         <spring style="height: 2px"/>
-        <html:div>&displayMode.label;</html:div>
+        <html:div style="margin-left: 3px">&displayMode.label;</html:div>
         </box>
       <spring class="spacer"/>
       <titledbutton id="EditModeButton"    class="DisplayModeButton" selected="1" value="&editModeButton.label;"    onclick="EditorSetDisplayStyle(0)"/>

editor/ui/composer/content/editorOverlay.xul

@@ -548,13 +548,13 @@
      
     <!-- Editor toolbar items -->
     <!-- note that we override the submenu item label "Blank Window" with "New" used for the menu -->
-    <titledbutton id="newButton"   src="&newEditorIcon.url;"     observes="cmd_newEditor" value="&newMenu.label;" />
-    <titledbutton id="openButton"  src="&openEditorIcon.url;"    observes="Editor:Open"/>
-    <titledbutton id="saveButton"  src="&saveIcon.url;"          observes="Editor:Save"/>
+    <titledbutton id="newButton"   class="button28" src="&newEditorIcon.url;"     observes="cmd_newEditor" value="&newMenu.label;" />
+    <titledbutton id="openButton"  class="button28" src="&openEditorIcon.url;"    observes="Editor:Open"/>
+    <titledbutton id="saveButton"  class="button28" src="&saveIcon.url;"          observes="Editor:Save"/>
     <titledbutton id="printButton" src="&printIcon.url;"         observes="Editor:Print"/>
     <titledbutton id="findButton"  src="&findIcon.url;"          observes="Editor:Find"/>
-
     <titledbutton id="spellingButton" src="&spellingIcon.url;" value="&spellToolbarCmd.label;" onclick="CheckSpelling()"/>
+
     <titledbutton id="imageButton" src="&imageIcon.url;" value="&imageToolbarCmd.label;" onclick="EditorInsertImage()"/>
     <titledbutton id="hlineButton" src="&hlineIcon.url;" value="&hruleToolbarCmd.label;" onclick="EditorInsertHLine()"/>
     <titledbutton id="tableButton" src="&tableIcon.url;" value="&tableToolbarCmd.label;" onclick="EditorInsertOrEditTable(true)"/>
@@ -571,17 +571,17 @@
     <titledbutton id="BackColorPopupButton" src="chrome://editor/skin/images/backcolor.gif" class="popup" popupanchor="bottomleft"/>
 
     <!-- can't just use observes here because we don't want the value from the broadcaster -->
-    <titledbutton id="boldButton" value="&formatToolbar.boldChar;" onclick="EditorToggleStyle('bold')">
+    <titledbutton id="boldButton" value="&formatToolbar.boldChar;" align="center" onclick="EditorToggleStyle('bold')">
       <observes element="Editor:Bold" attribute="bold" onbroadcast="onStyleChange('bold')"/>
     </titledbutton>
-    <titledbutton id="italicButton" value="&formatToolbar.italicChar;" onclick="EditorToggleStyle('italic')">
+    <titledbutton id="italicButton" value="&formatToolbar.italicChar;" align="center" onclick="EditorToggleStyle('italic')">
       <observes element="Editor:Italic" attribute="italic" onbroadcast="onStyleChange('italic')"/>
     </titledbutton>
-    <titledbutton id="underlineButton" value="&formatToolbar.underlineChar;" onclick="EditorToggleStyle('underline')">
+    <titledbutton id="underlineButton" value="&formatToolbar.underlineChar;" align="center" onclick="EditorToggleStyle('underline')">
       <observes element="Editor:Underline" attribute="underline" onbroadcast="onStyleChange('underline')"/>
     </titledbutton>
 
-    <titledbutton id="ulButton" src="&bulletListIcon.url;" align="bottom" onclick="EditorMakeOrChangeList('ul')">
+    <titledbutton id="ulButton" src="&bulletListIcon.url;" onclick="EditorMakeOrChangeList('ul')">
         <observes element="Editor:Paragraph:ListType" attribute="format" onbroadcast="onListFormatChange('ul')"/>
     </titledbutton>
 

editor/ui/composer/skin/editor.css

@@ -30,15 +30,21 @@ toolbox#EditorToolbars {
   min-width: 20px;
 }
 
+toolbar#FormatToolbar {
+	background-color: #99CCCC;
+}
+
 /* global.css has "box#status-bar". 
    This should be a class so we can use the same colors here 
 */
 box#DisplayModeBar {
   /*margin-top: -2px;*/
+  margin-bottom: 0px;
   border-top: 1px solid darkgray;
   border-bottom: 1px solid darkgray;
   min-width:1em;
-	background-color: #CCCCCC;
+  color: white;
+	background-color: #333366;
 }
 
 titledbutton#TextColorPopupButton {
@@ -54,6 +60,9 @@ titledbutton#boldButton {
   font-size: 19px; 
   font-weight: bold; 
   font-family: times, serif, sans-serif;
+  height: 16px;
+  padding: 0px;
+  padding-top: 2px;
 }
 
 titledbutton#boldButton:hover {
@@ -66,6 +75,9 @@ titledbutton#italicButton {
   font-weight: bold; 
   font-family: times, serif, sans-serif; 
   font-style:  italic;
+  height: 16px;
+  padding: 0px;
+  padding-top: 2px;
 }
 
 titledbutton#italicButton:hover {
@@ -78,32 +90,43 @@ titledbutton#underlineButton {
   font-weight: normal; 
   font-family: times, serif, sans-serif; 
   text-decoration: underline;
+  height: 16px;
+  padding: 0px;
+  padding-top: 2px;
 }
 
 titledbutton[class~=DisplayModeButton] {
-  padding: 1px 4px 0px 4px;
-  margin: 0px;
-  border-width: 1px;
   border: 1px solid transparent;
   border-left: 1px solid darkgray;
-  
-  /* This is the same as the "grippy" area on left edge of toolbar*/
-	background-color: #CCCCCC;
-}
-
-titledbutton[class~=DisplayModeButton][selected="1"] {
-  border:  1px white outset;
-  padding: 2px 4px 0px 4px;
-  margin: -2px 0px 0px 0px;
-  /* This is the same as the "grippy" area on left edge of toolbar*/
+  padding: 1px 4px 0px 4px;
+  margin: 0px;
+  color: black;
 	background-color: #99CCCC;
 }
 
+titledbutton[class~=DisplayModeButton]:hover {
+  border:  1px solid white;
+  padding: 1px 4px 0px 4px;
+  margin: 0px;
+}
+
+titledbutton[class~=DisplayModeButton][selected="1"] {
+  border:  1px outset outset;
+  padding: 2px 4px 0px 4px;
+  margin: -2px 0px 0px 0px;
+  color: black;
+	background-color: #99FFFF;
+}
+
+titledbutton[class~=DisplayModeButton][selected="1"]:hover {
+  border:  1px solid white;
+}
+
 /* Color must be same as for DisplayModeButton's border-left */
-html|div.VerticalSeparator { 
+window html|div.VerticalSeparator { 
 	 height: 100%; 
 	 max-width: 1px; 
-   border-left: 1px solid darkgray;
+   border-left: 1px solid white;
 	 margin: 1px 0px;
 }