Fixed bugs 18529, 20289; lots of progress on table editing (bug 6256). Other UI fixes: New color picker UI, added more missing menu items such as align, increase/decrease indent; moved 'Choose File' button to overlay to share by Image, Link, etc. dialogs. r=sfraser,akkana

1999-12-01 22:20:50 +00:00 · 1999-12-01 22:20:50 +00:00 · c6f3a01b34
--- a/editor/base/EditTable.cpp
+++ b/editor/base/EditTable.cpp
@ -77,34 +77,49 @@ nsHTMLEditor::InsertTableCell(PRInt32 aNumber, PRBool aAfter)
 NS_IMETHODIMP
 nsHTMLEditor::InsertTableColumn(PRInt32 aNumber, PRBool aAfter)
 {
-  //TODO: HANDLE CASE OF aAfter = true
  nsCOMPtr<nsIDOMSelection> selection;
  nsCOMPtr<nsIDOMElement> table;
  nsCOMPtr<nsIDOMElement> cell;
  nsCOMPtr<nsIDOMNode> cellParent;
  PRInt32 cellOffset, startRow, startCol;
  nsresult res = GetCellContext(selection, table, cell, cellParent, cellOffset, startRow, startCol);
-  
-  if (NS_SUCCEEDED(res))
-  {
-    nsAutoEditBatch beginBatching(this);
+  if (NS_FAILED(res)) return res;

-    PRInt32 rowCount, colCount, row;
-    if (NS_FAILED(GetTableSize(table, rowCount, colCount)))
-      return NS_ERROR_FAILURE;
-    for ( row = 0; row < rowCount; row++)
+  // Get more data for current cell (we need ROWSPAN)
+  nsCOMPtr<nsIDOMElement> curCell;
+  PRInt32 curStartRow, curStartCol, rowSpan, colSpan;
+  PRBool  isSelected;
+  GetCellDataAt(table, startRow, startCol, *getter_AddRefs(curCell),
+                curStartRow, curStartCol, rowSpan, colSpan, isSelected);
+  if (!curCell) return NS_ERROR_FAILURE;
+
+  // Use column after current cell if requested
+  if (aAfter)
+    startCol += colSpan;
+   
+  PRInt32 rowCount, colCount, row;
+  if (NS_FAILED(GetTableSize(table, rowCount, colCount)))
+    return NS_ERROR_FAILURE;
+
+  PRInt32 lastColumn = colCount - 1;
+
+  nsAutoEditBatch beginBatching(this);
+
+  for ( row = 0; row < rowCount; row++)
+  {
+    if (startCol < colCount)
    {
-      nsCOMPtr<nsIDOMElement> curCell;
-      PRInt32 curStartRow, curStartCol, rowSpan, colSpan;
-      PRBool  curIsSelected;
-      res = GetCellDataAt(table, row, startCol, *getter_AddRefs(curCell),
-                          curStartRow, curStartCol, rowSpan, colSpan, curIsSelected);
-      if (NS_SUCCEEDED(res) && curCell)
+      // We are insert before an existing column
+      GetCellDataAt(table, row, startCol, *getter_AddRefs(curCell),
+                    curStartRow, curStartCol, rowSpan, colSpan, isSelected);
+      // Don't fail entire process if we fail to find a cell
+      //  (may fail just in particular rows with < adequate cells per row)
+      if (curCell)
      {
        if (curStartCol < startCol)
        {
          // We have a cell spanning this location
-          // Simply increase its rowspan to keep table rectangular
+          // Simply increase its colspan to keep table rectangular
          nsAutoString newColSpan;
          newColSpan.Append(colSpan+aNumber, 10);
          SetAttribute(curCell, "colspan", newColSpan);
@ -116,9 +131,23 @@ nsHTMLEditor::InsertTableColumn(PRInt32 aNumber, PRBool aAfter)
          res = InsertTableCell(aNumber, PR_FALSE);
        }
      }
+    } else {
+      //TODO: A better strategy is to get the row at index "row"
+      //   and append a cell to the end of it.
+      // Need to write "GetRowAt()" to do this
+
+      // Get last cell in row and insert new cell after it
+      GetCellDataAt(table, row, lastColumn, *getter_AddRefs(curCell),
+                    curStartRow, curStartCol, rowSpan, colSpan, isSelected);
+      if( curCell)
+      {
+        selection->Collapse(curCell, 0);
+        res = InsertTableCell(aNumber, PR_TRUE);
+      }
    }
-    SetCaretAfterTableEdit(table, startRow, startCol, ePreviousColumn);  
  }
+  SetCaretAfterTableEdit(table, startRow, startCol, ePreviousColumn);  
+
  return res;
 }

@ -131,12 +160,111 @@ nsHTMLEditor::InsertTableRow(PRInt32 aNumber, PRBool aAfter)
  nsCOMPtr<nsIDOMNode> cellParent;
  PRInt32 cellOffset, startRow, startCol;
  nsresult res = GetCellContext(selection, table, cell, cellParent, cellOffset, startRow, startCol);
+  if (NS_FAILED(res)) return res;
+
+  // Get more data for current cell in row we are inserting at (we need COLSPAN)
+  nsCOMPtr<nsIDOMElement> curCell;
+  PRInt32 curStartRow, curStartCol, rowSpan, colSpan;
+  PRBool  isSelected;
+  res = GetCellDataAt(table, startRow, startCol, *getter_AddRefs(curCell),
+                      curStartRow, curStartCol, rowSpan, colSpan, isSelected);
+  if (NS_FAILED(res)) return res;
+  if (!curCell) return NS_ERROR_FAILURE;
  
-  if (NS_SUCCEEDED(res))
+  // Use row after current cell if requested
+  if (aAfter)
+    startRow += rowSpan;
+
+  nsCOMPtr<nsIDOMElement> parentRow;
+  GetElementOrParentByTagName("tr", curCell, getter_AddRefs(parentRow));
+  if (!parentRow) return NS_ERROR_NULL_POINTER;
+
+  PRInt32 rowCount, colCount;
+  if (NS_FAILED(GetTableSize(table, rowCount, colCount)))
+    return NS_ERROR_FAILURE;
+
+  // Get the parent and offset where we will insert new row(s)
+  nsCOMPtr<nsIDOMNode> parentOfRow;
+  PRInt32 newRowOffset;
+  parentRow->GetParentNode(getter_AddRefs(parentOfRow));
+  if (!parentOfRow) return NS_ERROR_NULL_POINTER;
+  res = GetChildOffset(parentRow, parentOfRow, newRowOffset);
+  if (NS_FAILED(res)) return res;
+  if (!parentOfRow)   return NS_ERROR_NULL_POINTER;
+
+  // offset to use for new row insert
+  if (aAfter)
+    newRowOffset += rowSpan;
+
+  nsAutoEditBatch beginBatching(this);
+
+  PRInt32 cellsInRow = 0;
+  if (startRow < rowCount)
  {
-    nsAutoEditBatch beginBatching(this);
-    //TODO: FINISH ME! 
+    // We are inserting above an existing row
+    // Get each cell in the insert row to adjust for COLSPAN effects while we
+    //   count how many cells are needed
+    PRInt32 colIndex = 0;
+    // This returns NS_TABLELAYOUT_CELL_NOT_FOUND when we run past end of row,
+    //   which passes the NS_SUCCEEDED macro
+    while ( NS_OK == GetCellDataAt(table, newRowOffset, colIndex, *getter_AddRefs(curCell), 
+                                   curStartRow, curStartCol, rowSpan, colSpan, isSelected) )
+    {
+      if (curCell)
+      {
+        if (curStartRow < startRow)
+        {
+          // We have a cell spanning this location
+          // Simply increase its colspan to keep table rectangular
+          nsAutoString newRowSpan;
+          newRowSpan.Append(rowSpan+aNumber, 10);
+          SetAttribute(curCell, "rowspan", newRowSpan);
+        } else {
+          // Count the number of cells we need to add to the new row
+          cellsInRow++;
+        }
+      }
+      // Next cell in row
+      colIndex++;
+    }
+  } else {
+    // We are adding after existing rows, 
+    //  so use max number of cells in a row
+    cellsInRow = colCount;
  }
+
+  if (cellsInRow > 0)
+  {
+    for (PRInt32 row = 0; row < aNumber; row++)
+    {
+      // Create a new row
+      nsCOMPtr<nsIDOMElement> newRow;
+      res = CreateElementWithDefaults("tr", getter_AddRefs(newRow));
+      if (NS_SUCCEEDED(res))
+      {
+        if (!newRow) return NS_ERROR_FAILURE;
+      
+        for (PRInt32 i = 0; i < cellsInRow; i++)
+        {
+          nsCOMPtr<nsIDOMElement> newCell;
+          res = CreateElementWithDefaults("td", getter_AddRefs(newCell));
+          if (NS_FAILED(res)) return res;
+          if (!newCell) return NS_ERROR_FAILURE;
+
+          // Don't use transaction system yet! (not until entire row is inserted)
+          nsCOMPtr<nsIDOMNode>resultNode;
+          res = newRow->AppendChild(newCell, getter_AddRefs(resultNode));
+          if (NS_FAILED(res)) return res;
+        }
+        // Use transaction system to insert the entire row+cells
+        // (Note that rows are inserted at same childoffset each time)
+        res = nsEditor::InsertNode(newRow, parentOfRow, newRowOffset);
+        if (NS_FAILED(res)) return res;
+      }
+    }
+  }
+  SetCaretAfterTableEdit(table, startRow, startCol, ePreviousRow);
+
  return res;
 }

@ -224,7 +352,7 @@ nsHTMLEditor::NormalizeTable(nsIDOMElement *aTable)
 }

 NS_IMETHODIMP 
-nsHTMLEditor::GetCellIndexes(nsIDOMElement *aCell, PRInt32 &aColIndex, PRInt32 &aRowIndex)
+nsHTMLEditor::GetCellIndexes(nsIDOMElement *aCell, PRInt32 &aRowIndex, PRInt32 &aColIndex)
 {
  nsresult res=NS_ERROR_NOT_INITIALIZED;
  aColIndex=0; // initialize out params
--- a/editor/base/nsHTMLEditor.cpp
+++ b/editor/base/nsHTMLEditor.cpp
@ -2696,7 +2696,7 @@ nsHTMLEditor::CreateElementWithDefaults(const nsString& aTagName, nsIDOMElement*
    }
 #endif
  }
-  // ADD OTHER DEFAULT ATTRIBUTES HERE
+  // ADD OTHER TAGS HERE

  if (NS_SUCCEEDED(res))
  {
--- a/editor/libeditor/html/nsHTMLEditor.cpp
+++ b/editor/libeditor/html/nsHTMLEditor.cpp
@ -2696,7 +2696,7 @@ nsHTMLEditor::CreateElementWithDefaults(const nsString& aTagName, nsIDOMElement*
    }
 #endif
  }
-  // ADD OTHER DEFAULT ATTRIBUTES HERE
+  // ADD OTHER TAGS HERE

  if (NS_SUCCEEDED(res))
  {
--- a/editor/ui/composer/content/EditorCommands.js
+++ b/editor/ui/composer/content/EditorCommands.js
@ -556,6 +556,7 @@ function EditorDecreaseFontSize()

 function EditorSelectTextColor()
 {
+  
  dump("EditorSelectTextColor\n");
 }

@ -626,6 +627,12 @@ function EditorListProperties()
  contentWindow.focus();
 }

+function EditorPageProperties(startTab)
+{
+  window.openDialog("chrome://editor/content/EdPageProps.xul","_blank", "chrome,close,titlebar,modal", startTab);
+  contentWindow.focus();
+}
+
 function EditorApplyStyleSheet(styleSheetURL)
 {
  // Second param is true for "override" type of sheet
@ -804,9 +811,6 @@ function EditorIndent(indent)
 //   else use false to do nothing if not in a table
 function EditorInsertOrEditTable(insertAllowed)
 {
-  var selection = editorShell.editorSelection;
-  dump("Selection: Anchor: "+selection.anchorNode+selection.anchorOffset+" Focus: "+selection.focusNode+selection.focusOffset+"\n");
-
  var table = editorShell.GetElementOrParentByTagName("table", null);
  if (table) {
    // Edit properties of existing table
@ -832,16 +836,15 @@ function EditorInsertTableCell(after)
  contentWindow.focus();
 }

-// Just insert before current row or column for now
-function EditorInsertTableRow()
+function EditorInsertTableRow(below)
 {
-  editorShell.InsertTableRow(1,false);
+  editorShell.InsertTableRow(1,below);
  contentWindow.focus();
 }

-function EditorInsertTableColumn()
+function EditorInsertTableColumn(after)
 {
-  editorShell.InsertTableColumn(1,false);
+  editorShell.InsertTableColumn(1,after);
  contentWindow.focus();
 }

--- a/editor/ui/composer/content/editor.xul
+++ b/editor/ui/composer/content/editor.xul
@ -59,6 +59,11 @@
  <broadcasterset id="broadcasterset">
    <broadcaster id="Editor:Throbber" busy="false"/>
 	</broadcasterset>
+
+  <popupset>
+    <popup id="TextColorPicker"/>
+    <popup id="BackColorPicker"/>
+  </popupset>
 	
 	<!-- keys are appended from the overlay -->
  <keyset id="defaultKeySet"/>
@ -68,9 +73,10 @@
    <menu id="editMenu"/>

    <menu value="&viewMenu.label;" accesskey="&viewmenu.accesskey;">
-    <menupopup>
-      <menuitem id="compToolbarMenuitem"/>
-      <menuitem id="formatToolbarMenuitem"/>
+    <!-- id pulls in "Show Sidebar" item from sidebarOverlay -->
+    <menupopup id="menu_View_Popup">
+      <menu id="viewToolbar"/>
+
      <!-- menuseparator /> Put this back when it works.
      <menuitem id="viewSourceMenuitem"/ -->
      <menuseparator />
@ -99,10 +105,17 @@
      
      <menu id="headingMenu"/>
      <menu id="paragraphMenu"/>
-      <!-- This brings up dialog. Alternative is: <menu id="listMenu"> -->
      <menuitem id="listProps"/>
      <menuseparator />
      <menu id="stylesheetMenu"/>
+      <menu id="alignMenu"/>
+      <menuseparator />
+      <menuitem id="increaseIndent"/>
+      <menuitem id="decreaseIndent"/>
+      <menuseparator />
+      <!-- PROPERTY ITEMS HERE -->
+      <menuitem id="pageProperties"/>
+      <menuitem id="colorsAndBackground"/>
    </menupopup>
    </menu>

@ -164,17 +177,7 @@
        <html:select id="FontFaceSelect"/>
      </html:div>

-      <menu>
-        <titledbutton id="TextColorPopupButton"/>
-        <menupopup id="TextColorPopup"/>
-      </menu>
-      <menu>
-        <titledbutton id="BackColorPopupButton"/>
-        <menupopup id="BackColorPopup"/>
-      </menu>
-<!-- The new Color Picker
-      <box id="ColorButtons"/>
-->
+      <html:div id="ColorButtons"/>
      
      <titledbutton id="DecreaseFontSizeButton"/>
      <titledbutton id="IncreaseFontSizeButton"/>
@ -198,8 +201,8 @@
 <box id="sidebar-parent" align="horizontal" flex="100%">
  <!-- toolbar/content/status -->

-  <box id="sidebar-box" chromeclass="extrachrome" style="display:none"/>
-  <splitter id="sidebar-splitter" chromeclass="extrachrome" style="display:none"/>
+  <box id="sidebar-box" chromeclass="extrachrome"/>
+  <splitter id="sidebar-splitter" chromeclass="extrachrome"/>
  
  <box id="appcontent" align="vertical" flex="100%">
    <editor type="content-primary" id="content-frame" src="about:blank" flex="100%"/>
@ -227,7 +230,7 @@ Use this when implemented...

    <!-- status bar, from editorOverlay.xul -->
    <box id="status-bar" />
-  </box>
-</box>
-
+  </box> <!-- appcontent -->
+</box><!-- sidebar-parent -->
+<toolbar id="taskbar" chromeclass="extrachrome" />
 </window>
--- a/editor/ui/composer/content/editorOverlay.xul
+++ b/editor/ui/composer/content/editorOverlay.xul
@ -58,7 +58,6 @@
    <key id="boldkb"        xulkey="true" key="b" observes="Editor:Bold"/>
    <key id="italickb"      xulkey="true" key="i" observes="Editor:Italic"/>
    
-    
    <key id="underlinekb"   xulkey="true" key="u" onkeypress="EditorToggleStyle('underline')"/>
    <key id="navigatorkb"   xulkey="true" shift="true" key="n" onkeypress="Navigator()" />
    <key id="navvigatorkb"   xulkey="true" key="1" onkeypress="Navigator()" />
@ -224,8 +223,13 @@
    </menu>

    <!-- view menu items -->
-      <menuitem id="compToolbarMenuitem" accesskey="&viewcompositiontb.accesskey;" observes="Editor:ToggleCompositionToolbar"/>
-      <menuitem id="formatToolbarMenuitem" accesskey="&viewformattingtb.accesskey;"  observes="Editor:ToggleFormattingToolbar"/>
+      <menu id="viewToolbar" value="&viewToolbarsMenu.label;" accesskey="viewToolbarsMenu.accesskey">
+        <menupopup> 
+          <menuitem id="compToolbarMenuitem" accesskey="&viewcompositiontb.accesskey;" observes="Editor:ToggleCompositionToolbar"/>
+          <menuitem id="formatToolbarMenuitem" accesskey="&viewformattingtb.accesskey;"  observes="Editor:ToggleFormattingToolbar"/>
+          <menuitem id="editorTaskBar" value="&showTaskbarCmd.label;" accesskey="&showTaskbarCmd.accesskey;" oncommand="goToggleToolbar('taskbar','cmd_viewtaskbar');" checked="true"/>
+        </menupopup>
+      </menu>
      <menuitem id="viewSourceMenuitem" value="&viewPageSource.label;" accesskey="&viewpagesource.accesskey;" oncommand="EditorViewSource();" />

      <menu  id="charsetMenu" value="&dcharMenu.label;" accesskey="&viewcharsetmenu.accesskey;">
@ -446,18 +450,39 @@
    </menupopup>
    </menu>

+    <!-- Align submenu -->
+    <menu id="alignMenu" value="&alignMenu.label;" accesskey="&formatalignmenu.accesskey;">
+    <menupopup>
+      <menuitem value="&alignLeft.label;"    accesskey="&alignleft.accesskey;"    oncommand="EditorAlign('left')"/>
+      <menuitem value="&alignCenter.label;"  accesskey="&aligncenter.accesskey;"  oncommand="EditorAlign('center')"/>
+      <menuitem value="&alignRight.label;"   accesskey="&alignright.accesskey;"   oncommand="EditorAlign('right')"/>
+      <menuitem value="&alignJustify.label;" accesskey="&alignjustify.accesskey;" oncommand="EditorAlign('justify')"/>
+    </menupopup>
+    </menu>
+
+    <menuitem id="increaseIndent" value="&increaseIndent.label;" accesskey="&increaseindent.accesskey;" key="increaseindentkb" oncommand="EditorIndent('indent')"/>
+    <menuitem id="decreaseIndent" value="&decreaseIndent.label;" accesskey="&decreaseindent.accesskey;" key="decreaseindentkb" oncommand="EditorIndent('outdent')"/>
+
+    <menuitem id="pageProperties"      value="&pageProperties.label;"      accesskey="&pageproperties.accesskey;"      oncommand="EditorPageProperties('0')"/>
+    <menuitem id="colorsAndBackground" value="&colorsAndBackground.label;" accesskey="&colorsandbackground.accesskey;" oncommand="EditorPageProperties('1')"/>
+
    <!-- Random table menu items -->
-    <menuitem id="tableJoinCellsMenuitem" value="&tableJoinCells.label;" accesskey="&tablejoin.accesskey;"         oncommand="EditorJoinTableCells()"/>
+    <menuitem id="tableJoinCellsMenuitem"  value="&tableJoinCells.label;" accesskey="&tablejoin.accesskey;"    oncommand="EditorJoinTableCells()"/>
    <menuitem id="tablePropertiesMenuitem" value="&properties.label;"     accesskey="&properties.accesskey;"   oncommand="EditorInsertOrEditTable(false)"/>

-    <!-- Table insert submenu -->
+    <!-- Table insert submenu  TODO: Should we use "above", "below"; "before", "after" versions for rows and cols? -->
    <menu id="tableInsertMenu" value="&tableInsertMenu.label;" accesskey="&tableinsertmenu.accesskey;">
    <menupopup>
-        <menuitem value="&tableTable.label;"      accesskey="&tabletable.accesskey;"     oncommand="EditorInsertTable()"/>
-        <menuitem value="&tableRow.label;"        accesskey="&tablerow.accesskey;"       oncommand="EditorInsertTableRow()"/>
-        <menuitem value="&tableColumn.label;"     accesskey="&tablecolumn.accesskey;"    oncommand="EditorInsertTableColumn()"/>
-        <menuitem value="&tableCellBefore.label;" accesskey="&tablecell.accesskey;"      oncommand="EditorInsertTableCell(false)"/>
-        <menuitem value="&tableCellAfter.label;"  accesskey="&tablecellafter.accesskey;" oncommand="EditorInsertTableCell(true)"/>
+        <menuitem value="&tableTable.label;"        accesskey="&tabletable.accesskey;"       oncommand="EditorInsertTable()"/>
+        <menuseparator />
+        <menuitem value="&tableRowAbove.label;"     accesskey="&tablerow.accesskey;"         oncommand="EditorInsertTableRow(false)"/>
+        <menuitem value="&tableRowBelow.label;"     accesskey="&tablerowbelow.accesskey;"    oncommand="EditorInsertTableRow(true)"/>
+        <menuseparator />
+        <menuitem value="&tableColumnBefore.label;" accesskey="&tablecolumn.accesskey;"      oncommand="EditorInsertTableColumn(false)"/>
+        <menuitem value="&tableColumnAfter.label;"  accesskey="&tablecolumnafter.accesskey;" oncommand="EditorInsertTableColumn(true)"/>
+        <menuseparator />
+        <menuitem value="&tableCellBefore.label;"   accesskey="&tablecell.accesskey;"        oncommand="EditorInsertTableCell(false)"/>
+        <menuitem value="&tableCellAfter.label;"    accesskey="&tablecellafter.accesskey;"   oncommand="EditorInsertTableCell(true)"/>
    </menupopup>
    </menu>

@ -471,45 +496,17 @@
    </menupopup>
    </menu>

-    <!-- Toolbar popups -->
-    <!-- TODO: REPLACE WITH COLOR WIDGET -->
-    <menupopup id="BackColorPopup">
-       <menuitem value="&colorBlackCmd.label;"     oncommand="EditorSetBackgroundColor('black')"/>
-       <menuitem value="&colorGrayCmd.label;"      oncommand="EditorSetBackgroundColor('gray')"/>
-       <menuitem value="&colorSilverCmd.label;"    oncommand="EditorSetBackgroundColor('silver')"/>
-       <menuitem value="&colorWhiteCmd.label;"     oncommand="EditorSetBackgroundColor('white')"/>
-       <menuitem value="&colorRedCmd.label;"       oncommand="EditorSetBackgroundColor('red')"/>
-       <menuitem value="&colorBlueCmd.label;"      oncommand="EditorSetBackgroundColor('blue')"/>
-       <menuitem value="&colorGreenCmd.label;"     oncommand="EditorSetBackgroundColor('green')"/>
-       <menuitem value="&colorCyanCmd.label;"      oncommand="EditorSetBackgroundColor('cyan')"/>
-       <menuitem value="&colorYellowCmd.label;"    oncommand="EditorSetBackgroundColor('yellow')"/>
-       <menuitem value="&colorMagentaCmd.label;"   oncommand="EditorSetBackgroundColor('magenta')"/>
-    </menupopup>
-   
-    <menupopup id="TextColorPopup">
-       <menuitem value="&colorBlackCmd.label;"     oncommand="EditorSetFontColor('black')"/>
-       <menuitem value="&colorGrayCmd.label;"      oncommand="EditorSetFontColor('gray')"/>
-       <menuitem value="&colorSilverCmd.label;"    oncommand="EditorSetFontColor('silver')"/>
-       <menuitem value="&colorWhiteCmd.label;"     oncommand="EditorSetFontColor('white')"/>
-       <menuitem value="&colorRedCmd.label;"       oncommand="EditorSetFontColor('red')"/>
-       <menuitem value="&colorBlueCmd.label;"      oncommand="EditorSetFontColor('blue')"/>
-       <menuitem value="&colorGreenCmd.label;"     oncommand="EditorSetFontColor('green')"/>
-       <menuitem value="&colorCyanCmd.label;"      oncommand="EditorSetFontColor('cyan')"/>
-       <menuitem value="&colorYellowCmd.label;"    oncommand="EditorSetFontColor('yellow')"/>
-       <menuitem value="&colorMagentaCmd.label;"   oncommand="EditorSetFontColor('magenta')"/>
-    </menupopup>
-
-    <menupopup id="TextColorPicker">
+    <popup id="TextColorPicker">
      <html:div id="TextColorCaption" class="color-caption" align="center">&textColorCaption.label;</html:div>
  		<!-- TODO: Add "Last color picked" button and text -->
-      <colorpicker palettename="standard" onclick="EditorSelectTextColor()"/>
-    </menupopup>
-    <menupopup id="BackColorPicker">
+      <colorpicker palettename="standard" onclick="EditorSelectTextColor(); window.close()"/>
+    </popup>
+    <popup id="BackColorPicker">
      <!-- Text Caption is filled in at runtime -->
  		<!-- TODO: Add "Last color picked" button and text -->
      <html:div id="BackColorCaption" class="color-caption" align="center">Background Color</html:div>
-  		<colorpicker palettename="standard" onclick="EditorSelectBackColor()"/>
-    </menupopup>
+  		<colorpicker palettename="standard" onclick="EditorSelectBackColor() window.close()"/>
+    </popup>

    <menupopup id="AlignmentPopup">
      <menuitem oncommand="EditorAlign('left')">
@ -580,29 +577,11 @@
      <html:option>&size4Cmd.label;</html:option>
    </html:select>

-    <titledbutton id="TextColorPopupButton" class="popup"  popupanchor="bottomleft"/>
-    <titledbutton id="BackColorPopupButton" class="popup"  popupanchor="bottomleft"/>
-    
    <!-- The new Color Picker UI -->
-    <box id="ColorButtons" align="horizontal">
-      <box align="vertical">
-        <html:div><!-- Prevent boxes from mucking with button layout -->
-          <menu>
-            <titledbutton id="TextColorPopupButton1"/>
-            <menupopup id="TextColorPicker"/>
-          </menu>
-          <menu>
-            <titledbutton id="BackColorPopupButton2"/>
-          </menu>
-        </html:div>
-      </box>
-      <html:div>
-        <menu>
-          <titledbutton id="BackColorPopupButton1"/>
-          <menupopup id="BackColorPicker"/>
-        </menu>
-      </html:div>
-    </box>
+    <html:div id="ColorButtons">
+      <titledbutton id="TextColorPopupButton" popup="TextColorPicker" popupanchor="bottomleft"/>
+      <titledbutton id="BackColorPopupButton" popup="BackColorPicker" popupanchor="bottomleft"/>
+    </html:div>

    <titledbutton id="DecreaseFontSizeButton" onclick="EditorDecreaseFontSize()"/>
    <titledbutton id="IncreaseFontSizeButton" onclick="EditorIncreaseFontSize()"/>
--- a/editor/ui/composer/content/viewsource.xul
+++ b/editor/ui/composer/content/viewsource.xul
@ -1,225 +0,0 @@
-<?xml version="1.0"?> 
-
-<!--
-   - 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) 1999 Netscape Communications Corporation. All
-   - Rights Reserved.
-   - 
-   - Contributor(s):
-   -    Sammy Ford
-  -->
-
-<?xml-stylesheet href="chrome://navigator/skin/" type="text/css"?> 
-
-<!DOCTYPE window SYSTEM "chrome://editor/locale/viewSource.dtd" >
-<window id="main-window" xmlns:html="http://www.w3.org/TR/REC-html40"
-        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-        onload="StartupViewSource()"
-        title="&mainWindow.title;" align="vertical" width="640" height="480">
-  
-  <html:script src="chrome://navigator/content/navigator.js"></html:script>
-  <html:script src="chrome://editor/content/viewsource.js"></html:script>
-  <html:script src="chrome://editor/content/EditorCommands.js"></html:script>
-
-  <broadcaster id="args" value="http://www.mozilla.org/"/>
-  <broadcaster id="canPrint"/>
-  <broadcaster id="canGoBack" disabled="true"/>
-  <broadcaster id="Editor:LoadingProgress"/>
-  <broadcaster id="Editor:Status"/>
-  <broadcaster id="Editor:OnStartBinding"/>
-  <broadcaster id="Editor:OnStopBinding"/>
-  <broadcaster id="Editor:Throbber" busy="false"/>
-
-   <menubar>
-    <menu value="&fileMenu.label;">
-	    <menupopup>
-			  <menuitem value="&browserCmd.label;" oncommand="BrowserNewWindow();"/>
-      			<menu value="&newMenu.label;">
-				  <menupopup>
-      				<menuitem value="&newMailCmd.label;" oncommand="MsgNewMessage();"/>
-					  <menuitem value="&newChatCmd.label;" oncommand=""/>
-					  <menuseparator />
-					  <menuitem value="&newBlankPageCmd.label;" oncommand="BrowserNewWindow();"/>
-					  <menuitem value="&newPageFromTemplateCmd.label;" oncommand="BrowserNewWindow();"/>
-					  <menuitem value="&newPageFromDraftCmd.label;" oncommand="BrowserNewWindow();"/>
-				  </menupopup>
-    			</menu>
-			  <menuitem value="&openCmd.label;" oncommand="BrowserOpenWindow();"/>
-			  <menuseparator />
-			  <menuitem value="&sendPageCmd.label;" oncommand="NotImplementedYet();"/>
-			   <menuseparator />
-			  <menu value="&offlineMenu.label;">
-				  <menupopup>
-				  <menuitem value="&offlineGoOfflineCmd.label;" oncommand="NotImplementedYet();"/>
-				  <menuseparator />
-				  <menuitem value="&offlineSynchronizeCmd.label;" oncommand="NotImplementedYet();"/>
-				  </menupopup>
-			  </menu>
-			  <menuseparator />
-			  <menuitem value="&printSetupCmd.label;" oncommand=";"/>
-			  <menuitem value="&printPreviewCmd.label;" oncommand=""/>
-			  <menuitem value="&printCmd.label;" oncommand="BrowserPrint()"/>
-			  <menuseparator />
-			  <menuitem value="&closeCmd.label;" oncommand="BrowserClose();"/>
-			  <menuitem value="&quitCmd.label;" oncommand="BrowserExit();"/>
-		</menupopup>
-    </menu>
-	<menu value="&editMenu.label;">
-	  <menupopup> 
-      <menuitem value="&undoCmd.label;" oncommand="NotImplementedYet();" disabled=""/> 
-      <menuitem value="&redoCmd.label;" oncommand="NotImplementedYet();" disabled=""/> 
-      <menuseparator /> 
-      <menuitem value="&cutCmd.label;" oncommand="NotImplementedYet();" disabled=""/> 
-      <menuitem value="&copyCmd.label;" oncommand="BrowserCopy();"/> 
-      <menuitem value="&pasteCmd.label;" oncommand="NotImplementedYet();" disabled=""/> 
-      <menuitem value="&deleteCmd.label;" oncommand="NotImplementedYet();" disabled=""/> 
-      <menuseparator /> 
-      <menuitem value="&selectAllCmd.label;" oncommand="NotImplementedYet();"/> 
-      <menuseparator /> 
-      <menuitem value="&preferences.label;" oncommand="DoPreferences();"/> 
-	  </menupopup>
-    </menu> 
-
-    <menu value="&viewMenu.label;">
-	  <menupopup>
-      <menuitem value="&toolbarsCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-      <menuitem value="&sidebarCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-      <menuseparator />
-      <menuitem value="&enlargeTextSizeCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-      <menuitem value="Reduce Text Size" oncommand="NotImplementedYet();" disabled=""/>
-      <menuseparator />
-      <menu value="&useStyleSheetMenu.label;" oncommand="NotImplementedYet();">
-	      <menupopup>
-		  <menuitem value="&useStyleSheetDefaultCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-	      <menuseparator />
-	      <menuitem value="&useStyleSheetEasyReadingCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-	      <menuitem value="&useStyleSheetMaximumInformationCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-	      <menuitem value="&useStlyleSheetBizarreCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-          </menupopup>
-	  </menu>
-      <menuseparator />
-      <menuitem value="&reloadCmd.label;" oncommand="BrowserReload();" disabled=""/>
-      <menuitem value="&showImagesCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-      <menuitem value="&stopCmd.label;" oncommand="NotImplementedYet();"/>
-      <menuseparator />
-      <menuitem value="&pageSourceCmd.label;" oncommand="BrowserViewSource();" disabled=""/>
-      <menuitem value="&pageInfoCmd.label;" oncommand="NotImplementedYet();"/>
-      <menuseparator />
-      <menu value="&charSetMenu.label;">
-	      <menupopup>
-		  <menuitem value="&charWesternCmd.label;" oncommand="BrowserSetDocumentCharacterSet('ISO-8859-1');"/>
-	      <menuitem value="&charJapaneseCmd.label;" oncommand="BrowserSetDocumentCharacterSet('ISO-2022-JP');"/>
-	      <menuitem value="&charShiftJisCmd.label;" oncommand="BrowserSetDocumentCharacterSet('Shift_JIS');"/>
-	      <menuitem value="&charEupCmd.label;" oncommand="BrowserSetDocumentCharacterSet('EUC-JP');"/>
-	      </menupopup>
-	   </menu>
-	   </menupopup>
-    </menu>
-    <menu value="&searchMenu.label;">
-	  <menupopup>
-      <menuitem value="&findOnCmd.label;" oncommand="BrowserFind();;" disabled=""/>
-      <menuitem value="&findAgainCmd.label;" oncommand="BrowserFindAgain();" disabled=""/>
-      <menuseparator />
-      <menuitem value="&searchParentCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-      <menuitem value="&searchParenet2Cmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-      <menuitem value="&appSpecificCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-      <menuitem value="&appSpecificCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-      <menuseparator />
-      <menuitem value="&searchInternetCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-      <menuitem value="&searchAllMailCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-      <menuitem value="&searchBookmarksCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-      <menuitem value="&searchPeopleCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-      <menuseparator />
-      <menuitem value="&searchComputerCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-	  </menupopup>
-    </menu>
-    <menu value="&goMenu.label;">
-	  <menupopup>
-      <menuitem value="&goBackCmd.label;" oncommand="BrowserBack();" disabled=""/>
-      <menuitem value="&goForwardCmd.label;" oncommand="BrowserForward();" disabled=""/>
-      <menuitem value="&goHomeCmd.label;" oncommand="BrowserHome();" disabled=""/>
-	  </menupopup>
-    </menu>
-	 <menu value="&tasksMenu.label;">
-	  <menupopup>
-      <menuitem value="&navigatorCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-      <menuitem value="&messengerCmd.label;" oncommand="OpenMessenger();" />
-      <menuitem value="&editorCmd.label;"    oncommand="OpenEditor();" />
-      <menuitem value="&manageHistoryCmd.label;"    oncommand="OpenHistoryView();" />
-      <menuitem value="&chatCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-      <menuitem value="&shoppingCartCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-      <menu value="&toolsMenu.label;">
-	      <menupopup>
-		  <menuitem value="&toolsPluginsInfoCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-	      <menuitem value="&toolsServerToolsCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-	      <menuitem value="&toolsJavaConsoleCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-	      <menuitem value="&toolsJavascriptDebuggerCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-		  </menupopup>
-      </menu>
-      <menuseparator />
-      <menuitem value="&securityInfo.label;" oncommand="NotImplementedYet();" disabled=""/>
-      <menuseparator/>
-      <menuitem value="&window1Cmd.label;" oncommand="NotImplementedYet();" key="1" disabled=""/>
-      <menuitem value="&window2Cmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-      <menuitem value="&window3Cmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-	  </menupopup>
-    </menu>
-    
-     <menu value="&helpMenuCmd.label;">
-	  <menupopup>
-      <menuitem value="&helpContentsCmd.label;" oncommand="window.frames[0].location.href = 'http://www.mozilla.org/projects/user-docs/local/browserhelp/browsertop.html'" disabled=""/>
-      <menuseparator />
-      <menuitem value="&howTutorialCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-      <menuitem value="&helpChannelCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-      <menuseparator />
-      <menuitem value="&softwareUpdatesCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-      <menuitem value="&technicalSupportCmd.label;" oncommand="NotImplementedYet();" disabled=""/>
-      <menuitem value="&releaseNotesCmd.label;" 
-	            oncommand="window.frames[0].location.href='http://www.mozilla.org/projects/seamonkey/release-notes/index.html'" disabled=""/>
-      
-      <menuseparator />
-      <menuitem value="&aboutCommunicatorCmd.label;" 
-	            oncommand="window.frames[0].location.href='http://www.mozilla.org/projects/seamonkey/release-notes/index.html'" disabled=""/>
-	  </menupopup>
-    </menu>
-  </menubar>
-  
-  <html:iframe id="content-frame" type="content" html:name="content" html:src="about:blank" flex="100%"/>
-
-  <box align="horizontal" id="status-bar">
- 
-	<box id="security-box" class="insecure" align="horizontal" flex="100%">
-		<box align="vertical" style="width:100px">
-			<spring flex="100%"/>
-			<progressmeter id="statusbar-icon" mode="normal" value="0" onclick="dumpProgress()">
-				<observes element="Browser:LoadingProgress" attribute="mode"/>
-				<observes element="Browser:Throbber" attribute="busy" onbroadcast="onProgress()"/>
-			</progressmeter>
-			<spring flex="100%"/>
-		</box>
-
-		<titledbutton id="statusText" align="right" flex="100%" value="Document: Done" style="font-family:sans-serif;font-size:2.5mm">
-					   <observes element="Browser:Status" attribute="value" onbroadcast="onStatus()"/>			
-		</titledbutton>
-
-		<spring flex="100%"/>		
-
-		<titledbutton align="right" value="Build ID: 1999082316" style="font-family:sans-serif;font-size:2.5mm;"/>
-     </box>
-  </box>
- 
-</window>
--- a/editor/ui/composer/locale/en-US/editor.properties
+++ b/editor/ui/composer/locale/en-US/editor.properties
@ -27,7 +27,7 @@ EditMode=Edit Mode
 Preview=Preview
 CorrectSpelling=(correct spelling)
 NoSuggestedWords=(no suggested words)
-NoMisspelledWord=No misspelled word was found.
+NoMisspelledWord=No misspelled words were found.
 CheckSpelling=Check Spelling
 HTMLFiles=HTML Files
 IMGFiles=Image Files
--- a/editor/ui/composer/locale/en-US/editorOverlay.dtd
+++ b/editor/ui/composer/locale/en-US/editorOverlay.dtd
@ -74,15 +74,20 @@

 <!-- View menu items -->
 <!ENTITY viewMenu.label "View">
+<!ENTITY viewToolbarsMenu.label "Toolbars"> 
+<!ENTITY viewToolbarsMenu.accesskey "t"> 
 <!ENTITY hideCompositionToolbarCmd.label ".Hide Composition Toolbar">
 <!ENTITY viewcompositiontb.accesskey "c">
 <!ENTITY showCompositionToolbarCmd.label ".Show Composition Toolbar">
 <!ENTITY hideFormattingToolbarCmd.label ".Hide Format Toolbar">
 <!ENTITY viewformattingtb.accesskey "f">
 <!ENTITY showFormattingToolbarCmd.label ".Show Format Toolbar">
+<!ENTITY showTaskbarCmd.label "Show Taskbar">  
+<!ENTITY showTaskbarCmd.accesskey "t"> 
 <!ENTITY viewPageSource.label "View Page Source">
 <!ENTITY viewpagesource.accesskey "s">

+
 <!-- Charset menu items -->
 <!ENTITY dcharMenu.label "Character Set  ISO">
 <!ENTITY viewcharsetmenu.accesskey "s">
@ -337,19 +342,8 @@
 <!-- List menu items -->
 <!ENTITY listProps.label "List Properties...">
 <!ENTITY formatlistmenu.accesskey "l">
-<!ENTITY listNoneCmd.label "None">
-<!ENTITY listnone.accesskey "o">
-<!ENTITY listBullettedCmd.label "Bulletted">
-<!ENTITY listbulletted.accesskey "b">
-<!ENTITY listNumberedCmd.label "Numbered">
-<!ENTITY listnumbered.accesskey "n">
-<!ENTITY listDefinitionCmd.label "Definition">
-<!ENTITY listdefinition.accesskey "d">
-
-<!ENTITY alignMenu.label "Align">
-<!ENTITY formatlistmenu.accesskey "a">
-<!-- Align items shared with popup above -->

+<!-- Style Sheet submenu -->
 <!ENTITY stylesheetMenu.label "Apply Style Sheet">
 <!ENTITY formatstylesheetmenu.accesskey "e">
 <!ENTITY stylesheetEditorOneCmd.label "Editor Styles 1">
@ -367,23 +361,52 @@
 <!ENTITY stylesheetSteelyCmd.label "Steely">
 <!ENTITY sssteely.accesskey "s">

+<!-- Align menu items -->
+<!ENTITY alignMenu.label "Align">
+<!ENTITY formatalignmenu.accesskey "a">
+<!ENTITY alignLeft.label "Left">
+<!ENTITY alignleft.accesskey "l">
+<!ENTITY alignCenter.label "Center">
+<!ENTITY aligncenter.accesskey "c">
+<!ENTITY alignRight.label "Right">
+<!ENTITY alignright.accesskey "r">
+<!ENTITY alignJustify.label "Justify">
+<!ENTITY alignjustify.accesskey "j">
+
+<!ENTITY increaseIndent.label "Increase indent">
+<!ENTITY increaseindent.accesskey "i">
+<!ENTITY decreaseIndent.label "Decrease indent">
+<!ENTITY decreaseindent.accesskey "d">
+
+<!ENTITY pageProperties.label "Page Title and Properties...">
+<!ENTITY pageproperties.accesskey "g">
+<!ENTITY colorsAndBackground.label "Page Colors and Background...">
+<!ENTITY colorsandbackground.accesskey "k">
+
 <!-- Table Menu -->
 <!-- Insert SubMenu -->
 <!ENTITY tableInsertMenu.label "Insert">
 <!ENTITY tableinsertmenu.accesskey "i">
 <!ENTITY tableTable.label "Table">
 <!ENTITY tabletable.accesskey "t">
-<!ENTITY tableRow.label ".Row">
+<!ENTITY tableRow.label "Row">
 <!ENTITY tablerow.accesskey "r">
+<!ENTITY tableRowAbove.label "Row above">
+<!-- uses tablerow.accesskey -->
+<!ENTITY tableRowBelow.label "Row below">
+<!ENTITY tablerowbelow.accesskey "b">
 <!ENTITY tableColumn.label "Column">
 <!ENTITY tablecolumn.accesskey "o">
+<!ENTITY tableColumnBefore.label "Column before">
+<!-- uses tablecolumn.accesskey -->
+<!ENTITY tableColumnAfter.label "Column after">
+<!ENTITY tablecolumnafter.accesskey "a">
 <!ENTITY tableCell.label "Cell">
 <!ENTITY tablecell.accesskey "c">
 <!ENTITY tableCellBefore.label "Cell before">
 <!-- uses tablecell.accesskey -->
 <!ENTITY tableCellAfter.label "Cell after">
-<!ENTITY tablecellafter.accesskey "a">
-
+<!ENTITY tablecellafter.accesskey "f">
 <!-- Delete SubMenu -->
 <!ENTITY tableDeleteMenu.label "Delete">
 <!ENTITY tabledeletemenu.accesskey "d">
@ -448,10 +471,6 @@
 <!ENTITY formatToolbar.boldChar "B">
 <!ENTITY formatToolbar.italicChar "I">
 <!ENTITY formatToolbar.underlineChar "U">
-<!ENTITY alignLeft.label "Left">
-<!ENTITY alignCenter.label "Center">
-<!ENTITY alignRight.label "Right">
-<!ENTITY alignJustify.label "Justify">

 <!ENTITY tempNotification.label "[status message]">
 <!ENTITY tempDoneLoading.label "[Document loading message]">
--- a/editor/ui/composer/locale/en-US/viewSource.dtd
+++ b/editor/ui/composer/locale/en-US/viewSource.dtd
@ -65,7 +65,6 @@
 <!ENTITY preferences.label "Preferences">
 <!ENTITY viewMenu.label "View">
 <!ENTITY toolbarsCmd.label "Toolbars">
-<!ENTITY sidebarCmd.label "Sidebar">
 <!ENTITY enlargeTextSizeCmd.label "Enlarge Text Size">
 <!ENTITY reduceTextSizeCmd.label "Reduce Text Size">
 <!ENTITY useStyleSheetMenu.label "Use Stylesheet">
--- a/editor/ui/composer/skin/MANIFEST
+++ b/editor/ui/composer/skin/MANIFEST
@ -63,10 +63,7 @@ images:target.gif
 images:underline.gif
 images:undo.gif
 images:bold.gif
-images:text-color.gif
-images:backcolor.gif
-images:back-color1.gif
-images:back-color2.gif
+images:color.gif
 images:align.gif
 images:object-popup.gif
 images:newfile.gif
--- a/editor/ui/composer/skin/Makefile.in
+++ b/editor/ui/composer/skin/Makefile.in
@ -53,10 +53,7 @@ EXPORT_RESOURCE_TOOLBAR = \
 		$(srcdir)/images/anchor-in-doc.gif \
 		$(srcdir)/images/underline.gif \
 		$(srcdir)/images/undo.gif \
-		$(srcdir)/images/text-color.gif \
-		$(srcdir)/images/backcolor.gif \
-		$(srcdir)/images/back-color1.gif \
-		$(srcdir)/images/back-color2.gif \
+		$(srcdir)/images/color.gif \
 		$(srcdir)/images/align.gif \
 		$(srcdir)/images/object-popup.gif \
 		$(srcdir)/images/newfile.gif \
--- a/editor/ui/composer/skin/editor.css
+++ b/editor/ui/composer/skin/editor.css
@ -70,11 +70,11 @@ toolbar#FormatToolbar titledbutton.format:hover {
  /* global class="plain" should do this! */
 }

-toolbar#FormatToolbar titledbutton[class~=format]:active {
+toolbar#FormatToolbar titledbutton.format:active {
  margin: 2px 0px 0px 2px;
 }

-toolbar#FormatToolbar titledbutton[class~=TextAttribute] {
+toolbar#FormatToolbar titledbutton.TextAttribute {
 	/* Make these buttons narrower */
  padding: 2px 0px;
  min-width: 16px; 
@ -259,33 +259,6 @@ titledbutton#AlignPopupButton {
 	list-style-image:url("chrome://editor/skin/images/align.gif");
 }

-/* Use negative margins to bring buttons together to look like one */
-titledbutton#TextColorPopupButton {
-	list-style-image:url("chrome://editor/skin/images/text-color.gif");
-  border: 1px solid transparent;
-  margin: 1px -1px 1px 1px;
-  padding: 0px;
-}
-titledbutton#TextColorPopupButton:hover {
-  border: 1px solid white;
-}
-
-titledbutton#BackColorPopupButton {
-	list-style-image:url("chrome://editor/skin/images/backcolor.gif");
-  border: 1px solid transparent;
-  margin: 1px 1px 1px -1px;
-  padding: 0px;
-}
-titledbutton#BackColorPopupButton:hover {
-  border: 1px solid white;
-}
-
-box#ColorButtons {
-  border: 1px solid transparent;
-  margin:  1px;
-  padding: 0px;
-}
-
 /* Doesn't work! */
 box#ColorButtons:hover {
  border: 1px solid white;
@ -294,31 +267,47 @@ div.color-caption {
  border: 1px inset white;
 }

-titledbutton#TextColorPopupButton1 {
-	list-style-image:url("chrome://editor/skin/images/text-color1.gif");
-  border: 0px;
-  margin: 2px 0px 0px 2px;
+div#ColorButtons {
+  /* This needs to be >= 2x color button width 
+     (color.gif=12px + 2 for border) */
+  width:  28px;
+  height: 19px;
+}
+
+titledbutton#TextColorPopupButton {
+	list-style-image:url("chrome://editor/skin/images/color.gif");
+  border: 1px solid #CCCCCC;
  padding: 0px;
+  margin: 0px;
+  position: relative;
+  top: 2px;
+  left: 2px;
+  z-index: 2;
+
  /* TEMP: Set color here. TODO: Set color from page */
  background-color: #AA0000;
 }
-titledbutton#BackColorPopupButton1 {
-	list-style-image:url("chrome://editor/skin/images/back-color1.gif");
-  border: 0px;
-  /* Top margin important to lower the button */
-  margin: 8px 2px 2px 0px;
+
+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: 9px;
+  left:-4px;
+  z-index: 1;
+
  /* TEMP: Set color here. TODO: Set color from page */
  background-color: yellow;
 }
-titledbutton#BackColorPopupButton2 {
-	list-style-image:url("chrome://editor/skin/images/back-color2.gif");
-  border: 0px;
-  /* Left margin important to "indent" the button */
-  margin: 0px 0px 2px 8px;
-  padding: 0px;
-  /* TEMP: Set color here. TODO: Set color from page */
-  background-color: yellow;
+
+titledbutton#BackColorPopupButton:hover {
+  border: 1px solid white;
 }

 titledbutton#text-align-left {
--- a/editor/ui/composer/skin/makefile.win
+++ b/editor/ui/composer/skin/makefile.win
@ -51,10 +51,7 @@ install:: $(DLL)
  $(MAKE_INSTALL) images\anchor-in-doc.gif  $(DIST)\bin\chrome\editor\skin\default\images
  $(MAKE_INSTALL) images\underline.gif	    $(DIST)\bin\chrome\editor\skin\default\images
  $(MAKE_INSTALL) images\undo.gif			      $(DIST)\bin\chrome\editor\skin\default\images
-  $(MAKE_INSTALL) images\text-color.gif     $(DIST)\bin\chrome\editor\skin\default\images
-  $(MAKE_INSTALL) images\backcolor.gif      $(DIST)\bin\chrome\editor\skin\default\images
-  $(MAKE_INSTALL) images\back-color1.gif    $(DIST)\bin\chrome\editor\skin\default\images
-  $(MAKE_INSTALL) images\back-color2.gif    $(DIST)\bin\chrome\editor\skin\default\images
+  $(MAKE_INSTALL) images\color.gif     $(DIST)\bin\chrome\editor\skin\default\images
  $(MAKE_INSTALL) images\newfile.gif   $(DIST)\bin\chrome\editor\skin\default\images
  $(MAKE_INSTALL) images\openfile.gif  $(DIST)\bin\chrome\editor\skin\default\images
  $(MAKE_INSTALL) images\savefile.gif  $(DIST)\bin\chrome\editor\skin\default\images
@ -103,10 +100,7 @@ clobber::
  rm -f $(DIST)\bin\chrome\editor\skin\default\images\anchor-in-doc.gif
  rm -f $(DIST)\bin\chrome\editor\skin\default\images\underline.gif
  rm -f $(DIST)\bin\chrome\editor\skin\default\images\undo.gif
-  rm -f $(DIST)\bin\chrome\editor\skin\default\images\text-color.gif
-  rm -f $(DIST)\bin\chrome\editor\skin\default\images\backcolor.gif
-  rm -f $(DIST)\bin\chrome\editor\skin\default\images\back-color1.gif
-  rm -f $(DIST)\bin\chrome\editor\skin\default\images\back-color2.gif
+  rm -f $(DIST)\bin\chrome\editor\skin\default\images\color.gif
  rm -f $(DIST)\bin\chrome\editor\skin\default\images\object-popup.gif			
  rm -f $(DIST)\bin\chrome\editor\skin\default\images\newfile.gif
  rm -f $(DIST)\bin\chrome\editor\skin\default\images\openfile.gif
--- a/editor/ui/dialogs/content/EdDialogCommon.js
+++ b/editor/ui/dialogs/content/EdDialogCommon.js
@ -460,24 +460,18 @@ function getContainer ()
     return null;
 }

-// setColorWell assumes the following UI pattern:
-/*
-<menu>
-	<titledbutton value="&????" class="popup" align="right"/>
-The colorWell:
-  <html:div style="width:30px; background-color:white"/> 
-	<menupopup>
-		<colorpicker palettename="standard" onclick="setColorWell(this.parentNode.parentNode);"/>
-	</menupopup>
-</menu>
-*/
-function setColorWell(menu)
+function getColorAndSetColorWell(ColorPickerID, ColorWellID)
 {
-  // Find the colorWell and colorPicker in the hierarchy.
-  var colorWell = menu.firstChild.nextSibling;
-  var colorPicker = menu.firstChild.nextSibling.nextSibling.firstChild;
+  var colorWell = document.getElementById(ColorWellID);
+  var colorPicker = document.getElementById(ColorPickerID);

  // Extract color from colorPicker and assign to colorWell.
  var color = colorPicker.getAttribute('color');
-  colorWell.style.backgroundColor = color;
+  dump("setColorWell: Color = "+color+"\n");
+
+  // Use setAttribute so colorwell can be a XUL element, such as titledbutton
+  colorWell.setAttribute("style", "background-color: " + color); 
+  //colorWell.style.backgroundColor = color;
+
+  return color;
 }
--- a/editor/ui/dialogs/content/EdDialogOverlay.xul
+++ b/editor/ui/dialogs/content/EdDialogOverlay.xul
@ -36,6 +36,7 @@
  </box>
  <html:div class="separator" align="horizontal"/>
 </box>
+
 <!-- Extra buttons to use in Image Properties Dialog,
     which switches position between 2 locations
     Placed here to use same attributes as regular button -->
@ -49,4 +50,11 @@
  class   = "push dialog" 
  onclick = "onAdvancedEdit()" 
  value   = "&AdvancedEditButton.label;"/>
+
+<titledbutton 
+  id      = "ChooseFile" 
+  class   = "push dialog" 
+  onclick = "chooseFile()"
+  value   = "&chooseButton.label;"/>
+
 </overlay>		
--- a/editor/ui/dialogs/content/EdImageProps.xul
+++ b/editor/ui/dialogs/content/EdImageProps.xul
@ -72,11 +72,8 @@
          onchange   = "doOverallEnabling()" />
      </td>  
      <td>  
-        <xul:titledbutton 
-          class   = "push dialog" 
-          id      = "ChooseFile" 
-          onclick = "chooseFile()"
-          value   = "&chooseButton.label;"/>
+        <!-- from EdDialogOverlay.xul -->
+        <xul:titledbutton id="ChooseFile"/>
      </td>  
    </tr>  
    <tr>  
--- a/editor/ui/dialogs/content/EdLinkProps.js
+++ b/editor/ui/dialogs/content/EdLinkProps.js
@ -189,7 +189,7 @@ function InitDialog()
  dump("Current HREF: "+hrefInput.value+"\n");
 }

-function ChooseFile()
+function chooseFile()
 {
  // Get a local file, converted into URL format
  fileName = editorShell.GetLocalFileURL(window, "html");
--- a/editor/ui/dialogs/content/EdLinkProps.xul
+++ b/editor/ui/dialogs/content/EdLinkProps.xul
@ -62,7 +62,10 @@
  	        <html:input type="text" size="25" length="25" id="hrefInput"></html:input>
            <spring flex="100%"/>
 	          <!-- The div prevents button from being the same height as the input field -->
-            <html:div><titledbutton class="push" id="ChooseFile" onclick="ChooseFile()" value="&LinkChooseFileButton.label;" style="width: 7em"/></html:div>
+            <html:div>
+              <!-- from EdDialogOverlay.xul -->
+              <titledbutton id="ChooseFile"/>
+            </html:div>
          </box>
        </box>
        <!-- ***** The style: width setting is need to cover a bug in button width resizing when text changes ***** -->
--- a/editor/ui/dialogs/content/EdPageProps.js
+++ b/editor/ui/dialogs/content/EdPageProps.js
@ -20,9 +20,13 @@
 * Contributor(s): 
 */

+var textColor;
+var linkColor;
+var followedLinkColor;
+var activeLinkColor;
+var backgroundColor;

 //Cancel() is in EdDialogCommon.js
-
 // dialog initialization code
 function Startup()
 {
@ -36,7 +40,31 @@ function Startup()
  //.focus();
 }

-function InitDialog() {
+function InitDialog()
+{
+}
+
+function getColor(ColorPickerID, ColorWellID)
+{
+  var color = getColorAndSetColorWell(ColorPickerID, ColorWellID);
+  switch( ColorPickerID )
+  {
+    case "textCP":
+      textColor = color;
+      break;
+    case "linkCP":
+      linkColor = color;
+      break;
+    case "followedCP":
+      followedLinkColor = color;
+      break;
+    case "activeCP":
+      activeLinkColor = color;
+      break;
+    case "backgroundCP":
+      backgroundColor = color;
+      break;
+  }
 }

 function onOK()
--- a/editor/ui/dialogs/content/EdPageProps.xul
+++ b/editor/ui/dialogs/content/EdPageProps.xul
@ -29,11 +29,10 @@

 <!DOCTYPE window SYSTEM "chrome://editor/locale/EditorPageProperties.dtd">

-<window class="dialog" title="&tableWindow.title;"
+<window class="dialog" title="&windowTitle.label;"
    xmlns:html="http://www.w3.org/TR/REC-html40"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    onload="Startup()"
-    width="450" height="430"
    align="vertical">

  <!-- Methods common to all editor dialogs -->
@ -45,22 +44,137 @@
  <keyset id="keyset"/>
    <tabcontrol align="vertical">
 	    <tabbox align="horizontal" flex="100%">
-		    <tab>&tableTab.label;</tab>
-		    <tab>&cellTab.label;</tab>
+		    <tab>&generalTab.label;</tab>
+		    <tab>&backgroundTab.label;</tab>
+		    <tab>&metaTagsTab.label;</tab>
 	    </tabbox>
 
    	<tabpanel flex="100%">
-        <!-- table tab -->
-    		<box align="vertical" class="panel">
+        <!-- general tab -->
+    		<box align="vertical">
+          <html:table>
+            <html:tr>
+              <html:td>
+                &location.label;
+              </html:td>
+              <html:td id="location">
+                <!-- fill in URL at runtime -->
+              </html:td>
+            </html:tr>
+            <html:tr>
+              <html:td>
+                &lastModified.label;
+              </html:td>
+              <html:td id="lastModified">
+                <!-- fill in date at runtime -->
+              </html:td>
+            </html:tr>
+            <html:tr>
+              <html:td>
+                &titleInput.label;
+              </html:td>
+              <html:td id="titleInput">
+                <html:input type="text" id="titleInput"/>
+              </html:td>
+            </html:tr>
+            <html:tr>
+              <html:td>
+                &authorInput.label;
+              </html:td>
+              <html:td id="authorInput">
+                <html:input type="text" id="titleInput"/>
+              </html:td>
+            </html:tr>
+            <html:tr>
+              <html:td>
+                &descriptionInput.label;
+              </html:td>
+              <html:td id="title">
+                <html:input type="text" id="descriptionInput"/>
+              </html:td>
+            </html:tr>
+          </html:table>
        </box>
  
-        <!-- cell tab -->
-    		<box align="vertical" class="panel">
+        <!-- colors/background tab -->
+    		<box align="vertical">
+          <html:fieldset><html:legend class = "dialog" align = "left">&pageColors.label;</html:legend>
+            <html:input type="radio" name="ColorMode" id="DefaultColorsRadio"/>
+            <html:label for="DefaultColorsRadio">&defaultColorsRadio.label;</html:label>
+            <html:br/>
+            <html:input type="radio" name="ColorMode" id="CustomColorsRadio"/>
+            <html:label for="CustomColorsRadio">&customColorsRadio.label;</html:label>
+            <html:br/>
+            <html:div>
+              <html:label for="ColorScheme">&colorScheme.label;</html:label>
+              <!-- TODO: COLOR SCHEME SELECT LIST -->
+            </html:div>
+            <html:br/>
+            <box align="horizontal" flex="100%">
+              <box align="vertical" flex="100%">
+                <html:div class="middle-align">
+                  <titledbutton class="color-well" id="textCW" popup="textPopup"/>
+                  <titledbutton value="&normalText.label;" class="push dialog popup" align="right" popup="textPopup"/>
+                </html:div>
+                <html:div class="middle-align">
+                  <titledbutton class="color-well" id="linkCW" popup="linkPopup"/>
+                  <titledbutton value="&linkText.label;" class="push dialog popup" align="right" popup="linkPopup"/>
+                </html:div>
+                <html:div class="middle-align">
+                  <titledbutton class="color-well" id="activeCW" popup="activePopup"/>
+                  <titledbutton value="&activeLinkText.label;" class="push dialog popup" align="right" popup="activePopup"/>
+                </html:div>
+                <html:div class="middle-align">
+                  <titledbutton class="color-well" id="followedCW" popup="followedPopup"/>
+                  <titledbutton value="&followedLinkText.label;" class="push dialog popup" align="right" popup="followedPopup"/>
+                </html:div>
+                <html:div class="middle-align">
+                  <titledbutton class="color-well" id="backgroundCW" popup="backgroundPopup"/>
+                  <titledbutton value="&background.label;" class="push dialog popup" align="right" popup="backgroundPopup"/>
+                </html:div>
+              </box>
+              <!-- SAMPLE WINDOW -->
+              <div id="TextSampleWindow"/>
+            </box>
+          </html:fieldset>
+          <box align="horizontal">
+            <html:input type="checkbox" id="BackgroundImageCheckbox"/>
+            <html:label for="BackgroundImageCheckbox">
+              &backgroundImage.label;
+            </html:label>
+          </box>
+          <box align="horizontal">
+            <html:input type="text" id="BackgroundImageInput" size="10"/>
+            <spring class="spacer"/>
+            <!-- from EdDialogOverlay.xul -->
+            <titledbutton id="ChooseFile"/>
+          </box>
+        </box> <!-- end of colors tab -->
+
+        <!-- meta tags tab -->
+    		<box align="vertical">
        </box>
    	</tabpanel> 
    </tabcontrol>
-    <!-- from EdDialogOverlay -->
-    <box id="AdvancedEdit"/>
-    <spring flex="100%"/>
-	  <box id="okCancelButtons"/> 
+    <html:div class="separator" align="horizontal"/>
+    <box id="okCancelButtons"/> 
+
+<popupset>
+  <popup id="textPopup">
+    <colorpicker id="textCP" palettename="standard" onclick="getColor('textCP', 'textCW');"/>
+  </popup>
+  <popup id="linkPopup">
+    <colorpicker id="linkCP" palettename="standard" onclick="getColor('linkCP', 'linkCW');"/>
+  </popup>
+  <popup id="activePopup">
+    <colorpicker id="activeCP" palettename="standard" onclick="getColor('activeCP', 'activeCW');"/>
+  </popup>
+  <popup id="followedPopup">
+    <colorpicker id="followedCP" palettename="standard" onclick="getColor('followedCP', 'followedCW');"/>
+  </popup>
+  <popup id="backgroundPopup">
+    <colorpicker id="backgroundCP" palettename="standard" onclick="getColor('backgroundCP', 'backgroundCW');"/>
+  </popup>
+</popupset>
+
 </window>
--- a/editor/ui/dialogs/locale/en-US/EdDialogOverlay.dtd
+++ b/editor/ui/dialogs/locale/en-US/EdDialogOverlay.dtd
@ -21,3 +21,4 @@
  -->

 <!ENTITY AdvancedEditButton.label "Advanced Edit...">
+<!ENTITY chooseButton.label "Choose File...">
--- a/editor/ui/dialogs/locale/en-US/EditorImageProperties.dtd
+++ b/editor/ui/dialogs/locale/en-US/EditorImageProperties.dtd
@ -32,7 +32,6 @@
 <!ENTITY locationFieldset.label "Image Information">
 <!ENTITY locationEditField.label "Image URL">
 <!ENTITY altTextEditField.label "Alternative Text">
-<!ENTITY chooseButton.label "Choose File...">

 <!-- These controls are in the Dimensions Fieldset of the expanded area -->
 <!ENTITY dimensionsFieldset.label "Dimensions">
--- a/editor/ui/dialogs/locale/en-US/EditorLinkProperties.dtd
+++ b/editor/ui/dialogs/locale/en-US/EditorLinkProperties.dtd
@ -36,7 +36,6 @@
 <!-- These controls are in the Dimensions Fieldset of the advanced area -->
 <!ENTITY LinkURLFieldset.label "Link to">
 <!ENTITY LinkURLEditField.label "Enter a web page location or local file:">
-<!ENTITY LinkChooseFileButton.label "Choose File...">
 <!ENTITY RemoveLinkButton.label "Remove Link">
 <!ENTITY NamedAnchorMsg.label "or select a Named Anchor:">
 <!ENTITY HeadingMsg.label "or select a Heading:">
--- a/editor/ui/dialogs/locale/en-US/EditorPageProperties.dtd
+++ b/editor/ui/dialogs/locale/en-US/EditorPageProperties.dtd
@ -20,7 +20,23 @@
   - Contributor(s): 
  -->

-
 <!-- Window title -->
 <!ENTITY windowTitle.label "Page Properties">
-
+<!ENTITY generalTab.label "General">
+<!ENTITY backgroundTab.label "Colors and Background">
+<!ENTITY metaTagsTab.label "Meta Tags">
+<!ENTITY location.label "Location">
+<!ENTITY lastModified.label "Last Modified">
+<!ENTITY titleInput.label "Title">
+<!ENTITY authorInput.label "Author">
+<!ENTITY descriptionInput.label "Description">
+<!ENTITY pageColors.label "Page Colors">
+<!ENTITY defaultColorsRadio.label "Don't specify colors">
+<!ENTITY customColorsRadio.label "Use custom colors">
+<!ENTITY colorScheme.label "Color Schemes">
+<!ENTITY normalText.label "Normal text">
+<!ENTITY linkText.label "Link text">
+<!ENTITY activeLinkText.label "Active link text">
+<!ENTITY followedLinkText.label "Followed link text">
+<!ENTITY background.label "Background">
+<!ENTITY backgroundImage.label "Background Image">
--- a/editor/ui/dialogs/skin/EditorDialog.css
+++ b/editor/ui/dialogs/skin/EditorDialog.css
@ -52,8 +52,25 @@ div.spacer [align~=horizontal] {

 div#message {
  width:       20em; 
-  margin-left: 10px
+  margin-left: 10px;
+}

+div.color-well {
+  width:30px; 
+  border: 1px inset white;
+  /* Background color is set at runtime */
+  background-color:white;
+}
+
+div#TextSampleWindow {
+  border: 1px inset white;
+  width: 100px; 
+  height: 100px; 
+  background-color:white;
+}
+
+div.middle-align {
+  vertical-align: middle;
 }

 /* XUL ELEMENTS */
@ -94,12 +111,24 @@ titledbutton#MoreFewerButton[more="1"] {
  width: 10em;
 }

+titledbutton.color-well {
+	list-style-image:url("chrome://editor/skin/images/color.gif");
+  border: 1px solid #CCCCCC;
+  padding: 0px;
+  margin: 0px;
+  background-color: #AA0000;
+}
+
+titledbutton.color-well:hover {
+  border: 1px solid white;
+}
+
 /* THIS SHOULD BE IN GLOBAL.CSS */
 label.dialog[disabled],legend.dialog[disabled] {
    color: gray;
 }

-titledbutton[class~=SizeToParent] {
+titledbutton.SizeToParent {
  width: 100%;
 }