Bug 435079 - Migrate Composer's New Page Settings prefs to the new prefpane
authorStefan <stefanh@inbox.com>
Thu, 17 Jul 2008 12:04:44 -0400
changeset 16016 c32a70debffaa57564bbc9d2bb583f301775d35d
parent 16015 8c360ab14ee456c8e628863230bb23ca4b997a0b
child 16017 2935954b1bb2c19be1839d4efe45ce28ee286505
push idunknown
push userunknown
push dateunknown
bugs435079
milestone1.9.1a1pre
Bug 435079 - Migrate Composer's New Page Settings prefs to the new prefpane r=NeilAway, sr=NeilAway
editor/ui/composer/content/editorPrefsOverlay.xul
editor/ui/composer/content/pref-composer.js
editor/ui/composer/content/pref-editing.xul
editor/ui/jar.mn
editor/ui/locales/jar.mn
--- a/editor/ui/composer/content/editorPrefsOverlay.xul
+++ b/editor/ui/composer/content/editorPrefsOverlay.xul
@@ -29,46 +29,42 @@
     <treeitem container="true"
               id="composerItem"
               insertafter="mailnews,navigator"
               label="&compose.label;"
               prefpane="composer_pane"
               url="chrome://editor/content/pref-composer.xul"
               helpTopic="composer_prefs_general">
       <treechildren id="composerChildren">
-      <!-- XXX Move pref panes from below to here as they are migrated -->
+        <treeitem id="editingItem"
+                  label="&editing.label;"
+                  prefpane="editing_pane"
+                  url="chrome://editor/content/pref-editing.xul"
+                  helpTopic="composer_prefs_newpage"/>
         <treeitem id="toolbarsItem"
                   label="&toolbars.label;"
                   prefpane="toolbars_pane"
                   url="chrome://editor/content/pref-toolbars.xul"
                   helpTopic="composer_prefs_toolbars"/>
       </treechildren>
     </treeitem>
   </treechildren>
 
   <!-- category tree entries for editor -->
   <treechildren id="panelChildren">
     <treeitem container="true" id="editor" insertafter="mailnews,navigator">
       <treerow>       
         <treecell label="Migrated: &compose.label;"/> 
       </treerow>
-      <!-- XXX Move these up as we migrate the panels -->
       <treechildren>
         <treeitem>
           <treerow>
-            <treecell url="chrome://editor/content/pref-editing.xul" label="&editing.label;"/> 
+            <treecell label="Migrated: &editing.label;"/> 
           </treerow>
         </treeitem>
-        <!--     
-        <treeitem>
-          <treerow>
-            <treecell url="chrome://editor/content/pref-publish.xul" label="&publish.label;"/> 
-          </treerow>
-        </treeitem>  
-        -->
         <treeitem>
           <treerow>
             <treecell label="Migrated: &toolbars.label;"/> 
           </treerow>
         </treeitem>  
       </treechildren>
     </treeitem>
   </treechildren>
--- a/editor/ui/composer/content/pref-composer.js
+++ b/editor/ui/composer/content/pref-composer.js
@@ -15,301 +15,207 @@
  * March 31, 1998.
  *
  * The Initial Developer of the Original Code is
  * Netscape Communications Corporation.
  * Portions created by the Initial Developer are Copyright (C) 1998-1999
  * the Initial Developer. All Rights Reserved.
  *
  * Contributor(s):
+ *   Stefan Hermes <stefanh@inbox.com>
  *
  * Alternatively, the contents of this file may be used under the terms of
  * either of the GNU General Public License Version 2 or later (the "GPL"),
  * or the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
  * in which case the provisions of the GPL or the LGPL are applicable instead
  * of those above. If you wish to allow use of your version of this file only
  * under the terms of either the GPL or the LGPL, and not to allow others to
  * use your version of this file under the terms of the MPL, indicate your
  * decision by deleting the provisions above and replace them with the notice
  * and other provisions required by the GPL or the LGPL. If you do not delete
  * the provisions above, a recipient may use your version of this file under
  * the terms of any one of the MPL, the GPL or the LGPL.
  *
  * ***** END LICENSE BLOCK ***** */
-// This is mostly a modified version of code in EdColorProps.xul
 
-// Initialize in case we can't get them from prefs???
-var defaultTextColor = "#000000";
-var defaultLinkColor = "#000099";
-var defaultActiveColor = "#000099";
-var defaultVisitedColor = "#990099";
-var defaultBackgroundColor = "#FFFFFF";
+var gPrefService = Components.classes["@mozilla.org/preferences-service;1"]
+                             .getService(Components.interfaces.nsIPrefBranch2);
+const browserPrefsObserver =
+{
+  observe: function(aSubject, aTopic, aData)
+  {
+    if (aTopic != "nsPref:changed" || document.getElementById("editor.use_custom_colors").value)
+      return;
 
-var customTextColor;
-var customLinkColor;
-var customActiveColor;
-var customVisitedColor;
-var customBackgroundColor;
-var previewBGColor;
-var backgroundImage = "";
-
-// Strings we use often
-const styleStr =       "style";
-const textStr =        "text";
-const linkStr =        "link";
-const vlinkStr =       "vlink";
-const alinkStr =       "alink";
-const bgcolorStr =     "bgcolor";
-const backgroundStr =  "background";
-const colorStyle =     "color: ";
-const backColorStyle = "background-color: ";
-const backImageStyle = "; background-image: url(";
-
-var browserColors;
-var dialog;
+    switch (aData)
+    {
+      case "browser.anchor_color":
+        SetColorPreview("linkText", gPrefService.getCharPref(aData));
+        break;
+      case "browser.active_color":
+        SetColorPreview("activeLinkText", gPrefService.getCharPref(aData));
+        break;
+      case "browser.visited_color":
+        SetColorPreview("visitedLinkText", gPrefService.getCharPref(aData));
+        break;
+      default:
+        SetBgAndFgColors(gPrefService.getBoolPref("browser.display.use_system_colors"))
+    }
+  }
+};
 
 function Startup()
 {
-  gDialog.ColorPreview = document.getElementById("ColorPreview");
-  gDialog.NormalText = document.getElementById("NormalText");
-  gDialog.LinkText = document.getElementById("LinkText");
-  gDialog.ActiveLinkText = document.getElementById("ActiveLinkText");
-  gDialog.VisitedLinkText = document.getElementById("VisitedLinkText");
-  gDialog.DefaultColorsRadio = document.getElementById("DefaultColorsRadio");
-  gDialog.CustomColorsRadio = document.getElementById("CustomColorsRadio");
-  gDialog.BackgroundImageInput = document.getElementById("BackgroundImageInput");
-
-  // The data elements that hold the pref values
-  gDialog.NormalData = document.getElementById("textData");
-  gDialog.LinkData = document.getElementById("linkData");
-  gDialog.ActiveLinkData = document.getElementById("aLinkData");
-  gDialog.VisitedLinkData = document.getElementById("fLinkData");
-  gDialog.BackgroundColorData = document.getElementById("backgroundColorData");
-  gDialog.BackgroundImageData = document.getElementById("backgroundImageData");
-
-  browserColors = GetDefaultBrowserColors();
+  // Add browser prefs observers
+  gPrefService.addObserver("browser.display.use_system_colors", browserPrefsObserver, false);
+  gPrefService.addObserver("browser.display.foreground_color", browserPrefsObserver, false);
+  gPrefService.addObserver("browser.display.background_color", browserPrefsObserver, false);
+  gPrefService.addObserver("browser.anchor_color", browserPrefsObserver, false);
+  gPrefService.addObserver("browser.active_color", browserPrefsObserver, false);
+  gPrefService.addObserver("browser.visited_color", browserPrefsObserver, false);
 
-  // Use author's browser pref colors passed into dialog
-  defaultTextColor = browserColors.TextColor;
-  defaultLinkColor = browserColors.LinkColor;
-  defaultActiveColor = browserColors.ActiveLinkColor;
-  defaultVisitedColor =  browserColors.VisitedLinkColor;
-  defaultBackgroundColor=  browserColors.BackgroundColor;
-
-  // Get the colors and image set by prefs init code 
-  customTextColor = gDialog.NormalData.getAttribute("value"); 
-  customLinkColor = gDialog.LinkData.getAttribute("value");
-  customActiveColor = gDialog.ActiveLinkData.getAttribute("value");
-  customVisitedColor = gDialog.VisitedLinkData.getAttribute("value");
-  customBackgroundColor = gDialog.BackgroundColorData.getAttribute("value");
-  backgroundImage = gDialog.BackgroundImageData.getAttribute("value");
-  if (backgroundImage)
-    gDialog.BackgroundImageInput.value = backgroundImage;
-
-  // "value" attribute value is a string conversion of boolean!
-  if( document.getElementById( "useCustomColors" ).value == "true" )
-    UseCustomColors();
-  else
-    UseDefaultColors();
-
-  return true;
+  // Add event listener so we can remove our observers
+  window.addEventListener("unload", WindowOnUnload, false);
+  UpdateDependent(document.getElementById("editor.use_custom_colors").value);
 }
 
-function GetColorAndUpdate(ColorWellID)
+function GetColorAndUpdatePref(aType, aButtonID)
 {
-  // Only allow selecting when in custom mode
-  if (!gDialog.CustomColorsRadio.selected) return;
-
-  var colorWell = document.getElementById(ColorWellID);
-  if (!colorWell) return;
-
   // Don't allow a blank color, i.e., using the "default"
   var colorObj = { NoDefault:true, Type:"", TextColor:0, PageColor:0, Cancel:false };
+  var preference = document.getElementById("editor." + aButtonID + "_color");
 
-  switch( ColorWellID )
-  {
-    case "textCW":
-      colorObj.Type = "Text";
-      colorObj.TextColor = customTextColor;
-      break;
-    case "linkCW":
-      colorObj.Type = "Link";
-      colorObj.TextColor = customLinkColor;
-      break;
-    case "activeCW":
-      colorObj.Type = "ActiveLink";
-      colorObj.TextColor = customActiveColor;
-      break;
-    case "visitedCW":
-      colorObj.Type = "VisitedLink";
-      colorObj.TextColor = customVisitedColor;
-      break;
-    case "backgroundCW":
-      colorObj.Type = "Page";
-      colorObj.PageColor = customBackgroundColor;
-      break;
-  }
+  if (aButtonID == "background")
+    colorObj.PageColor = preference.value;
+  else
+    colorObj.TextColor = preference.value;
+
+  colorObj.Type = aType;
 
   window.openDialog("chrome://editor/content/EdColorPicker.xul", "_blank", "chrome,close,titlebar,modal", "", colorObj);
 
   // User canceled the dialog
   if (colorObj.Cancel)
     return;
 
-  var color = "";
-  switch( ColorWellID )
-  {
-    case "textCW":
-      color = customTextColor = colorObj.TextColor;
-      gDialog.NormalData.setAttribute("value", color); 
-      break;
-    case "linkCW":
-      color = customLinkColor = colorObj.TextColor;
-      gDialog.LinkData.setAttribute("value", color);
-      break;
-    case "activeCW":
-      color = customActiveColor = colorObj.TextColor;
-      gDialog.ActiveLinkData.setAttribute("value", color);
-      break;
-    case "visitedCW":
-      color = customVisitedColor = colorObj.TextColor;
-      gDialog.VisitedLinkData.setAttribute("value", color);
-      break;
-    case "backgroundCW":
-      color = customBackgroundColor = colorObj.BackgroundColor;
-      gDialog.BackgroundColorData.setAttribute("value", color);
-      break;
-  }
-  setColorWell(ColorWellID, color); 
-  SetColorPreview(ColorWellID, color);
+  // Update preference with picked color
+  if (aType == "Page")
+    preference.value = colorObj.BackgroundColor;
+  else
+    preference.value = colorObj.TextColor;
 }
 
-function SetColorPreview(ColorWellID, color)
+function UpdateDependent(aCustomEnabled)
 {
-  switch( ColorWellID )
+  ToggleElements(aCustomEnabled);
+
+  if (aCustomEnabled)
+  { // Set current editor colors on preview and buttons
+    SetColors("textCW", "normalText", document.getElementById("editor.text_color").value);
+    SetColors("linkCW", "linkText", document.getElementById("editor.link_color").value);
+    SetColors("activeCW", "activeLinkText", document.getElementById("editor.active_link_color").value);
+    SetColors("visitedCW", "visitedLinkText", document.getElementById("editor.followed_link_color").value);
+    SetColors("backgroundCW", "ColorPreview", document.getElementById("editor.background_color").value);
+  }
+  else
+  { // Set current browser colors on preview
+    SetBgAndFgColors(gPrefService.getBoolPref("browser.display.use_system_colors"));
+    SetColorPreview("linkText", gPrefService.getCharPref("browser.anchor_color"));
+    SetColorPreview("activeLinkText", gPrefService.getCharPref("browser.active_color"));
+    SetColorPreview("visitedLinkText", gPrefService.getCharPref("browser.visited_color"));
+  }
+}
+
+function ToggleElements(aCustomEnabled)
+{
+  var buttons = document.getElementById("color-rows").getElementsByTagName("button");
+  
+  for (var i = 0; i < buttons.length; i++)
   {
-    case "textCW":
-      gDialog.NormalText.setAttribute(styleStr,colorStyle+color);
-      break;
-    case "linkCW":
-      gDialog.LinkText.setAttribute(styleStr,colorStyle+color);
-      break;
-    case "activeCW":
-      gDialog.ActiveLinkText.setAttribute(styleStr,colorStyle+color);
-      break;
-    case "visitedCW":
-      gDialog.VisitedLinkText.setAttribute(styleStr,colorStyle+color);
-      break;
-    case "backgroundCW":
-      // Must combine background color and image style values
-      var styleValue = backColorStyle+color;
-      if (backgroundImage)
-        styleValue += ";"+backImageStyle+backgroundImage+");";
-
-      gDialog.ColorPreview.setAttribute(styleStr,styleValue);
-      previewBGColor = color;
-      break;
+    let isLocked = CheckLocked(buttons[i].id);
+    buttons[i].disabled = !aCustomEnabled || isLocked;
+    buttons[i].previousSibling.disabled = !aCustomEnabled || isLocked;
+    buttons[i].firstChild.setAttribute("default", !aCustomEnabled || isLocked);
   }
 }
 
-function UseCustomColors()
+function CheckLocked(aButtonID)
 {
-  SetElementEnabledById("TextButton", true);
-  SetElementEnabledById("LinkButton", true);
-  SetElementEnabledById("ActiveLinkButton", true);
-  SetElementEnabledById("VisitedLinkButton", true);
-  SetElementEnabledById("BackgroundButton", true);
-  SetElementEnabledById("Text", true);
-  SetElementEnabledById("Link", true);
-  SetElementEnabledById("Active", true);
-  SetElementEnabledById("Visited", true);
-  SetElementEnabledById("Background", true);
+  return document.getElementById("editor." + aButtonID + "_color").locked;
+}
+
+// Updates preview and button color when a editor color pref change
+function UpdateColors(aColorWellID, aPreviewID, aColor)
+{
+  // Only show editor colors from prefs if we're in custom mode
+  if (!document.getElementById("editor.use_custom_colors").value)
+    return;
+
+  SetColors(aColorWellID, aPreviewID, aColor)
+}
 
-  SetColorPreview("textCW",       customTextColor);
-  SetColorPreview("linkCW",       customLinkColor);
-  SetColorPreview("activeCW",     customActiveColor);
-  SetColorPreview("visitedCW",    customVisitedColor);
-  SetColorPreview("backgroundCW", customBackgroundColor);
+function SetColors(aColorWellID, aPreviewID, aColor)
+{
+  SetColorWell(aColorWellID, aColor);
+  SetColorPreview(aPreviewID, aColor);
+}
+
+function SetColorWell(aColorWellID, aColor)
+{
+  document.getElementById(aColorWellID).style.backgroundColor = aColor;
+}
 
-  setColorWell("textCW",          customTextColor);
-  setColorWell("linkCW",          customLinkColor);
-  setColorWell("activeCW",        customActiveColor);
-  setColorWell("visitedCW",       customVisitedColor);
-  setColorWell("backgroundCW",    customBackgroundColor);
+function SetColorPreview(aPreviewID, aColor)
+{
+  if (aPreviewID == "ColorPreview")
+    document.getElementById(aPreviewID).style.backgroundColor = aColor;
+  else
+    document.getElementById(aPreviewID).style.color = aColor;
+}
 
-  gDialog.NormalData.setAttribute("value",          customTextColor); 
-  gDialog.LinkData.setAttribute("value",            customLinkColor);
-  gDialog.ActiveLinkData.setAttribute("value",      customActiveColor);
-  gDialog.VisitedLinkData.setAttribute("value",     customVisitedColor);
-  gDialog.BackgroundColorData.setAttribute("value", customBackgroundColor);
+function UpdateBgImagePreview(aImage)
+{
+  var colorPreview = document.getElementById("ColorPreview");
+  colorPreview.style.backgroundImage = !aImage ? "" : "url(" + aImage + ")";
 }
 
-function UseDefaultColors()
+// Sets browser background/foreground colors
+function SetBgAndFgColors(aSysPrefEnabled)
 {
-  SetColorPreview("textCW",       defaultTextColor);
-  SetColorPreview("linkCW",       defaultLinkColor);
-  SetColorPreview("activeCW",     defaultActiveColor);
-  SetColorPreview("visitedCW",    defaultVisitedColor);
-  SetColorPreview("backgroundCW", defaultBackgroundColor);
-
-  // Setting to blank color will remove color from buttons,
-  setColorWell("textCW",       "");
-  setColorWell("linkCW",       "");
-  setColorWell("activeCW",     "");
-  setColorWell("visitedCW",    "");
-  setColorWell("backgroundCW", "");
+  if (aSysPrefEnabled)
+  { // Use system colors
+    SetColorPreview("normalText", "windowtext");
+    SetColorPreview("ColorPreview", "window");
+  }
+  else
+  {
+    SetColorPreview("normalText", gPrefService.getCharPref("browser.display.foreground_color"));
+    SetColorPreview("ColorPreview", gPrefService.getCharPref("browser.display.background_color"));
+  }
+}
 
-  // Disable color buttons and labels
-  SetElementEnabledById("TextButton", false);
-  SetElementEnabledById("LinkButton", false);
-  SetElementEnabledById("ActiveLinkButton", false);
-  SetElementEnabledById("VisitedLinkButton", false);
-  SetElementEnabledById("BackgroundButton", false);
-  SetElementEnabledById("Text", false);
-  SetElementEnabledById("Link", false);
-  SetElementEnabledById("Active", false);
-  SetElementEnabledById("Visited", false);
-  SetElementEnabledById("Background", false);
-  
-  // Note that we leave custom colors set even if 
-  //  custom colors pref is false (we just ignore the colors)
-}
-  
 function ChooseImageFile()
 {
-  // Get a local image file, converted into URL format
-  var fileName = GetLocalFileURL("img");
-  if (fileName)
-  {
-    gDialog.BackgroundImageInput.value = fileName;
-    ValidateAndPreviewImage(true);
-  }
-  SetTextboxFocus(gDialog.BackgroundImageInput);
-}
+  const nsIFilePicker = Components.interfaces.nsIFilePicker;
+  var fp = Components.classes["@mozilla.org/filepicker;1"]
+                     .createInstance(nsIFilePicker);
+  var editorBundle = document.getElementById("bundle_editor");
+  var title = editorBundle.getString("SelectImageFile");
+  fp.init(window, title, nsIFilePicker.modeOpen);
+  fp.appendFilters(nsIFilePicker.filterImages);
+  if (fp.show() == nsIFilePicker.returnOK)
+    document.getElementById("editor.default_background_image").value = fp.fileURL.spec;
 
-function ChangeBackgroundImage()
-{
-  // Don't show error message for image while user is typing
-  ValidateAndPreviewImage(false);
+  var textbox = document.getElementById("backgroundImageInput");
+  textbox.focus();
+  textbox.select();
 }
 
-function ValidateAndPreviewImage(ShowErrorMessage)
+function WindowOnUnload()
 {
-  // First make a string with just background color
-  var styleValue = backColorStyle+previewBGColor+";";
-
-  var image = TrimString(gDialog.BackgroundImageInput.value);
-  if (image)
-  {
-    backgroundImage = image;
-    // Append image style
-    styleValue += backImageStyle+backgroundImage+");";
-  }
-  else
-    backgroundImage = "";
-
-  // Set style on preview (removes image if not valid)
-  gDialog.ColorPreview.setAttribute(styleStr, styleValue);
-  
-  // Set the pref data so pref code saves it 
-  gDialog.BackgroundImageData.setAttribute("value", backgroundImage ? backgroundImage : "");
+  gPrefService.removeObserver("browser.display.use_system_colors", browserPrefsObserver, false);
+  gPrefService.removeObserver("browser.display.foreground_color", browserPrefsObserver, false);
+  gPrefService.removeObserver("browser.display.background_color", browserPrefsObserver, false);
+  gPrefService.removeObserver("browser.anchor_color", browserPrefsObserver, false);
+  gPrefService.removeObserver("browser.active_color", browserPrefsObserver, false);
+  gPrefService.removeObserver("browser.visited_color", browserPrefsObserver, false);
+  window.removeEventListener("unload", WindowOnUnload, false);
 }
-
--- a/editor/ui/composer/content/pref-editing.xul
+++ b/editor/ui/composer/content/pref-editing.xul
@@ -34,120 +34,182 @@
  the provisions above, a recipient may use your version of this file under
  the terms of any one of the MPL, the GPL or the LGPL.
 
  ***** END LICENSE BLOCK ***** -->
 
 <?xml-stylesheet href="chrome://communicator/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://editor/skin/EditorDialog.css" type="text/css"?>
 
-<!DOCTYPE page SYSTEM "chrome://editor/locale/pref-editing.dtd">
+<!DOCTYPE overlay SYSTEM "chrome://editor/locale/pref-editing.dtd">
 
-<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-      onload="parent.initPanel('chrome://editor/content/pref-editing.xul');"
-      headertitle="&pref.editing.title;">
+<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <prefpane id="editing_pane"
+            label="&pref.editing.title;"
+            script="chrome://editor/content/pref-composer.js">
 
-  <script lanugage="JavaScript">
-  <![CDATA[
-   var _elementIDs = ["editorAuthor", "useCustomColors", "textData", "linkData", "aLinkData", "fLinkData", "backgroundColorData", "backgroundImageData"];
-  ]]>
-  </script>
+    <preferences id="editing_preferences">
+      <preference id="editor.author"
+                  name="editor.author"
+                  type="string"/>
+      <preference id="editor.use_custom_colors"
+                  name="editor.use_custom_colors"
+                  type="bool"
+                  onchange="UpdateDependent(this.value);"/>
+      <preference id="editor.text_color"
+                  name="editor.text_color"
+                  type="string"
+                  onchange="UpdateColors('textCW', 'normalText', this.value);"/>
+      <preference id="editor.link_color"
+                  name="editor.link_color"
+                  type="string"
+                  onchange="UpdateColors('linkCW', 'linkText', this.value);"/>
+      <preference id="editor.active_link_color"
+                  name="editor.active_link_color"
+                  type="string"
+                  onchange="UpdateColors('activeCW', 'activeLinkText', this.value);"/>
+      <preference id="editor.followed_link_color"
+                  name="editor.followed_link_color"
+                  type="string"
+                  onchange="UpdateColors('visitedCW', 'visitedLinkText', this.value);"/>
+      <preference id="editor.background_color"
+                  name="editor.background_color"
+                  type="string"
+                  onchange="UpdateColors('backgroundCW', 'ColorPreview', this.value);"/>
+      <preference id="editor.default_background_image"
+                  name="editor.default_background_image"
+                  type="string"
+                  onchange="UpdateBgImagePreview(this.value);"/>
+    </preferences>
 
-  <script type="application/x-javascript" src="chrome://editor/content/pref-composer.js"/>
-  <script type="application/x-javascript" src="chrome://editor/content/editorUtilities.js"/>
-  <script type="application/x-javascript" src="chrome://editor/content/EdDialogCommon.js"/>
+    <stringbundle id="bundle_editor"
+                  src="chrome://editor/locale/editor.properties"/>
 
-  <vbox>
-    <label value="&authorName.label;" accesskey="&authorName.accesskey;" control="editorAuthor"/>
-    <hbox>
-      <textbox id="editorAuthor" flex="1"
-               prefstring="editor.author"/>
-      <spacer flex="1"/>
-    </hbox>
-  </vbox>
-  <spacer class="smallspacer"/>
-  <groupbox align="start">
-    <caption label="&pageColorHeader;"/> 
-    <radiogroup id="useCustomColors"
-                preftype="bool" prefstring="editor.use_custom_colors">
-      <radio id="DefaultColorsRadio"
-          value="false" 
-          label="&defaultColorsRadio.label;" 
-          accesskey="&defaultColors.accesskey;"
-          oncommand="UseDefaultColors();"/>
-      <radio id="CustomColorsRadio" 
-          value="true" label="&customColorsRadio.label;"
-          accesskey="&customColors.accesskey;" 
-          oncommand="UseCustomColors()"/>
-    </radiogroup>
-    <hbox class="indent">
-      <grid>
-        <columns><column/><column/></columns>
-        <rows>
-          <row align="center">
-            <label id="Text" value="&normalText.label;&colon.character;" 
-                   accesskey="&normalText.accesskey;" control="TextButton"/>
-            <button id="TextButton" class="color-button" oncommand="GetColorAndUpdate('textCW');">
-              <spacer id="textCW" class="color-well"/>
-            </button>
-            <data id="textData" pref="true" preftype="color" prefstring="editor.text_color" prefattribute="value" wsm_attributes="value"/>
-          </row>
-          <row align="center">
-            <label id="Link" value="&linkText.label;&colon.character;" 
-                   accesskey="&linkText.accesskey;" control="LinkButton"/>
-            <button id="LinkButton" class="color-button" oncommand="GetColorAndUpdate('linkCW');">
-              <spacer id="linkCW" class="color-well"/>
-            </button>
-            <data id="linkData" pref="true" preftype="color" prefstring="editor.link_color" prefattribute="value" wsm_attributes="value"/>
-          </row>
-          <row align="center">
-            <label id="Active" value="&activeLinkText.label;&colon.character;" 
-                   accesskey="&activeLinkText.accesskey;" control="ActiveLinkButton"/>
-            <button id="ActiveLinkButton" class="color-button" oncommand="GetColorAndUpdate('activeCW');">
-              <spacer id="activeCW" class="color-well"/>
-            </button>
-            <data id="aLinkData" pref="true" preftype="color" prefstring="editor.active_link_color" prefattribute="value" wsm_attributes="value"/>
-          </row>
-          <row align="center">
-            <label id="Visited" value ="&visitedLinkText.label;&colon.character;" 
-                   accesskey="&visitedLinkText.accesskey;" control="VisitedLinkButton"/>
-            <button id="VisitedLinkButton" class="color-button" oncommand="GetColorAndUpdate('visitedCW');">
-              <spacer id="visitedCW" class="color-well"/>
-            </button>
-            <data id="fLinkData" pref="true" preftype="color" prefstring="editor.followed_link_color" prefattribute="value" wsm_attributes="value"/>
-          </row>
-          <row align="center">
-            <label id="Background" value="&background.label;"
-                   accesskey="&background.accesskey;" control="BackgroundButton"/>
-            <button id="BackgroundButton" class="color-button" oncommand="GetColorAndUpdate('backgroundCW');">
-              <spacer id="backgroundCW" class="color-well"/>
-            </button>
-            <data id="backgroundColorData" pref="true" preftype="color" prefstring="editor.background_color" prefattribute="value" wsm_attributes="value"/>
-          </row>
-        </rows>
-      </grid>
-      <vbox id="ColorPreview" flex="1">
+    <vbox>
+      <label value="&authorName.label;" 
+             accesskey="&authorName.accesskey;"
+             control="editorAuthor">
+      </label>
+      <hbox>
+        <textbox id="editorAuthor"
+                 flex="1"
+                 preference="editor.author"/>
         <spacer flex="1"/>
-        <label class="larger" id="NormalText"      value="&normalText.label;"/>
-        <spacer flex="1"/>
-        <label class="larger" id="LinkText"        value="&linkText.label;"/>
-        <spacer flex="1"/>
-        <label class="larger" id="ActiveLinkText"  value="&activeLinkText.label;"/>
-        <spacer flex="1"/>
-        <label class="larger" id="VisitedLinkText" value="&visitedLinkText.label;"/>
+      </hbox>
+    </vbox>
+    <spacer class="smallspacer"/>
+    <groupbox align="start">
+      <caption label="&pageColorHeader;"/> 
+      <radiogroup id="useCustomColors"
+                  preference="editor.use_custom_colors">
+        <radio id="defaultColorsRadio"
+               value="false" 
+               label="&defaultColorsRadio.label;" 
+               accesskey="&defaultColors.accesskey;"/>
+        <radio id="customColorsRadio" 
+               value="true"
+               label="&customColorsRadio.label;"
+               accesskey="&customColors.accesskey;"/>
+      </radiogroup>
+      <hbox class="indent">
+        <grid>
+          <columns><column/><column/></columns>
+          <rows id="color-rows">
+            <row align="center">
+              <label id="textLabel"
+                     value="&normalText.label;&colon.character;" 
+                     accesskey="&normalText.accesskey;"
+                     control="text"/>
+              <button id="text"
+                      class="color-button"
+                      oncommand="GetColorAndUpdatePref('Text', 'text');">
+                <spacer id="textCW" class="color-well"/>
+              </button>
+            </row>
+            <row align="center">
+              <label id="linkLabel"
+                     value="&linkText.label;&colon.character;" 
+                     accesskey="&linkText.accesskey;"
+                     control="link"/>
+              <button id="link"
+                      class="color-button"
+                      oncommand="GetColorAndUpdatePref('Link', 'link');">
+                <spacer id="linkCW" class="color-well"/>
+              </button>
+            </row>
+            <row align="center">
+              <label id="activeLinkLabel"
+                     value="&activeLinkText.label;&colon.character;" 
+                     accesskey="&activeLinkText.accesskey;"
+                     control="active_link"/>
+              <button id="active_link"
+                      class="color-button"
+                      oncommand="GetColorAndUpdatePref('ActiveLink', 'active_link');">
+                <spacer id="activeCW" class="color-well"/>
+              </button>
+            </row>
+            <row align="center">
+              <label id="visitedLinkLabel"
+                     value ="&visitedLinkText.label;&colon.character;" 
+                     accesskey="&visitedLinkText.accesskey;"
+                     control="followed_link"/>
+              <button id="followed_link"
+                      class="color-button"
+                      oncommand="GetColorAndUpdatePref('VisitedLink', 'followed_link');">
+                <spacer id="visitedCW" class="color-well"/>
+              </button>
+            </row>
+            <row align="center">
+              <label id="backgroundLabel"
+                     value="&background.label;"
+                     accesskey="&background.accesskey;"
+                     control="background"/>
+              <button id="background"
+                      class="color-button"
+                      oncommand="GetColorAndUpdatePref('Page', 'background');">
+                <spacer id="backgroundCW" class="color-well"/>
+              </button>
+            </row>
+          </rows>
+        </grid>
+        <vbox id="ColorPreview"
+              flex="1">
+          <spacer flex="1"/>
+          <label id="normalText"
+                 class="larger"
+                 value="&normalText.label;"/>
+          <spacer flex="1"/>
+          <label id="linkText"
+                 class="larger"
+                 value="&linkText.label;"/>
+          <spacer flex="1"/>
+          <label id="activeLinkText"
+                 class="larger"
+                 value="&activeLinkText.label;"/>
+          <spacer flex="1"/>
+          <label id="visitedLinkText"
+                 class="larger"
+                 value="&visitedLinkText.label;"/>
+          <spacer flex="1"/>
+        </vbox>
         <spacer flex="1"/>
-      </vbox>
-      <spacer flex="1"/>
-    </hbox>
-    <spacer class="spacer"/>
-    <label value="&backgroundImage.label;" accesskey="&backgroundImage.accesskey;" control="BackgroundImageInput"/>
-    <hbox align="center">
-      <textbox id="BackgroundImageInput" oninput="ChangeBackgroundImage();" style="min-width: 23em" flex="1" class="uri-element">
-        <observes element="backgroundImageData" attribute="disabled"/>
-      </textbox>
-      <button label="&chooseFile.label;" accesskey="&chooseFile.accesskey;"
-              oncommand="ChooseImageFile()">
-        <observes element="backgroundImageData" attribute="disabled"/>
-      </button>
-      <data id="backgroundImageData" preftype="string" prefstring="editor.default_background_image" prefattribute="value"/>
-    </hbox>
-  </groupbox>
-</page>
+      </hbox>
+      <spacer class="spacer"/>
+      <label id="backgroundImageLabel"
+             value="&backgroundImage.label;"
+             accesskey="&backgroundImage.accesskey;"
+             control="backgroundImageInput">
+      </label>
+      <hbox align="center">
+        <textbox id="backgroundImageInput"
+                 class="uri-element"
+                 preference="editor.default_background_image"
+                 style="min-width: 23em;"
+                 flex="1"/>
+        <button label="&chooseFile.label;"
+                accesskey="&chooseFile.accesskey;"
+                oncommand="ChooseImageFile();">
+          <observes element="backgroundImageInput" attribute="disabled"/>
+        </button>
+      </hbox>
+    </groupbox>
+  </prefpane>
+</overlay>
--- a/editor/ui/jar.mn
+++ b/editor/ui/jar.mn
@@ -21,17 +21,16 @@ comm.jar:
       content/editor/EditorContent.css                         (composer/content/EditorContent.css)  
 *     content/editor/editorOverlay.xul                         (composer/content/editorOverlay.xul) 
       content/editor/editorOverlay.js                          (composer/content/editorOverlay.js) 
       content/editor/composerOverlay.xul                       (composer/content/composerOverlay.xul) 
       content/editor/pref-toolbars.xul                         (composer/content/pref-toolbars.xul) 
       content/editor/pref-editing.xul                          (composer/content/pref-editing.xul) 
       content/editor/pref-composer.js                          (composer/content/pref-composer.js) 
       content/editor/pref-composer.xul                         (composer/content/pref-composer.xul) 
-      content/editor/pref-publish.xul                          (composer/content/pref-publish.xul) 
       content/editor/editorSmileyOverlay.xul                   (composer/content/editorSmileyOverlay.xul) 
       content/editor/editorPrefsOverlay.xul                    (composer/content/editorPrefsOverlay.xul) 
       content/editor/editorNavigatorOverlay.xul                (composer/content/editorNavigatorOverlay.xul) 
       content/editor/editorMailOverlay.xul                     (composer/content/editorMailOverlay.xul) 
       content/editor/editorTasksOverlay.xul                    (composer/content/editorTasksOverlay.xul) 
       content/editor/editorApplicationOverlay.js               (composer/content/editorApplicationOverlay.js) 
       content/editor/StructBarContextMenu.js                   (composer/content/StructBarContextMenu.js) 
       content/editor/images/sendtoback.gif                     (composer/content/images/sendtoback.gif)
--- a/editor/ui/locales/jar.mn
+++ b/editor/ui/locales/jar.mn
@@ -36,17 +36,16 @@
 @AB_CD@.jar:
 % locale editor-region @AB_CD@ %locale/@AB_CD@/editor-region/
   locale/@AB_CD@/editor/editor.dtd                           (%chrome/composer/editor.dtd)
   locale/@AB_CD@/editor/editorPrefsOverlay.dtd               (%chrome/composer/editorPrefsOverlay.dtd)
   locale/@AB_CD@/editor/editorNavigatorOverlay.dtd           (%chrome/composer/editorNavigatorOverlay.dtd)
   locale/@AB_CD@/editor/pref-toolbars.dtd                    (%chrome/composer/pref-toolbars.dtd)
   locale/@AB_CD@/editor/pref-editing.dtd                     (%chrome/composer/pref-editing.dtd)
   locale/@AB_CD@/editor/pref-composer.dtd                    (%chrome/composer/pref-composer.dtd)
-  locale/@AB_CD@/editor/pref-publish.dtd                     (%chrome/composer/pref-publish.dtd)
   locale/@AB_CD@/editor/EdLinkChecker.dtd                    (%chrome/dialogs/EdLinkChecker.dtd)
   locale/@AB_CD@/editor/EditorPageProperties.dtd             (%chrome/dialogs/EditorPageProperties.dtd)
   locale/@AB_CD@/editor/EditorSnapToGrid.dtd                 (%chrome/dialogs/EditorSnapToGrid.dtd)
   locale/@AB_CD@/editor/EditorImageMap.dtd                   (%chrome/dialogs/EditorImageMap.dtd)
   locale/@AB_CD@/editor/EditorImageMapHotSpot.dtd            (%chrome/dialogs/EditorImageMapHotSpot.dtd)
   locale/@AB_CD@/editor/EditConflict.dtd                     (%chrome/dialogs/EditConflict.dtd)
   locale/@AB_CD@/editor/EditorSaveAsCharset.dtd              (%chrome/dialogs/EditorSaveAsCharset.dtd)
   locale/@AB_CD@/editor/EditorPublish.dtd                    (%chrome/dialogs/EditorPublish.dtd)