Simplified background image UI in Colors and Background dialog, b=47693, r=sfraser

editor/ui/dialogs/content/EdColorProps.js

@@ -86,7 +86,6 @@ function Startup()
   dialog.VisitedLinkText = document.getElementById("VisitedLinkText");
   dialog.DefaultColorsRadio = document.getElementById("DefaultColorsRadio");
   dialog.CustomColorsRadio = document.getElementById("CustomColorsRadio");
-  dialog.BackgroundImageCheckbox = document.getElementById("BackgroundImageCheckbox");
   dialog.BackgroundImageInput = document.getElementById("BackgroundImageInput");
 
   BodyElement = editorShell.editorDocument.body;
@@ -171,15 +170,6 @@ function InitDialog()
 
   // Get image from document
   dialog.BackgroundImage = globalElement.getAttribute(backgroundStr);
- 
-  if (dialog.BackgroundImage)
-    dialog.BackgroundImageCheckbox.checked = true;
-  else 
-  {
-    // See if we saved an image from previous dialog usage
-    dialog.BackgroundImage = lastSetBackgroundImage;
-  }
-
   if (dialog.BackgroundImage)
   {
     dialog.BackgroundImageInput.value = dialog.BackgroundImage;
@@ -268,21 +258,6 @@ function UseDefaultColors()
   SetColor("backgroundCW", defaultBackgroundColor);
 }
 
-
-function onBackgroundImageCheckbox()
-{
-  // First make a string with just background color
-  var styleValue = colorStyle+dialog.backgroundColor+";";
-  if (dialog.BackgroundImageCheckbox.checked && ValidateImage())
-  {
-    // Append image style
-    styleValue += backImageStyle+dialog.BackgroundImage+");";
-  }
-dump(styleValue+"=style value when setting image\n")
-  // Set style on preview (removes image if not checked or not valid)
-  dialog.ColorPreview.setAttribute(styleStr, styleValue);
-}
-
 function chooseFile()
 {
   // Get a local file, converted into URL format
@@ -291,8 +266,17 @@ function chooseFile()
   {
     dialog.BackgroundImage = fileName;
     dialog.BackgroundImageInput.value = fileName;
-    dialog.BackgroundImageCheckbox.checked = true;
     dialog.ColorPreview.setAttribute(backgroundStr, fileName);
+    // First make a string with just background color
+    var styleValue = colorStyle+dialog.backgroundColor+";";
+    if (ValidateImage())
+    {
+      // Append image style
+      styleValue += backImageStyle+dialog.BackgroundImage+");";
+    }
+dump(styleValue+"=style value when setting image\n")
+    // Set style on preview (removes image if not checked or not valid)
+    dialog.ColorPreview.setAttribute(styleStr, styleValue);
   }
   
   // Put focus into the input field
@@ -315,9 +299,6 @@ function ValidateImage()
   SetTextfieldFocus(dialog.BackgroundImageInput);
   ShowInputErrorMessage(GetString("MissingImageError"));
 
-  // Don't allow checkbox if bad or no image
-  dialog.BackgroundImageCheckbox.checked = false;
-  // TODO: Do fancy enabling/disabling instead?
   return false;
 }
 
@@ -340,15 +321,13 @@ function ValidateData()
     globalElement.setAttribute(alinkStr,   dialog.activeLinkColor);
     globalElement.setAttribute(bgcolorStr, dialog.backgroundColor);
   }
-  if (dialog.BackgroundImageCheckbox.checked)
+
+  if (ValidateImage())
   {
-    if (!ValidateImage())
-      return false;
-
     globalElement.setAttribute(backgroundStr, dialog.BackgroundImage);
-
   } else {
     globalElement.removeAttribute(backgroundStr);
+    return false;
   }
   
   return true;

editor/ui/dialogs/content/EdColorProps.xul

@@ -131,17 +131,18 @@
     </box>
   <spring class="spacer"/>
   </titledbox>
-  <checkbox id="BackgroundImageCheckbox" value="&backgroundImage.label;" oncommand="onBackgroundImageCheckbox()"
-       tooltip="aTooltip" tooltiptext="&backgroundImage.tooltip;" />
+  <spring class="spacer"/>
+  <text class="label" id="BackgroundImageCheckbox" value="&backgroundImage.label;"/>
   <grid>
     <columns><column/><column/></columns>
     <rows>
       <row style="margin-bottom: 5px">
-        <textfield id="BackgroundImageInput"/>
+        <textfield id="BackgroundImageInput"
+         tooltip="aTooltip" tooltiptext="&backgroundImage.tooltip;" />
         <button class="dialog" id="ChooseFile" flex="1" />
       </row>
       <row autostretch="never" valign="middle">
-        <html class="label wrap" flex="1">&saveImageMsg.label;</html>
+        <spring/>
         <button class="dialog" id="AdvancedEditButton" flex="1"/>
       </row>
     </rows>

editor/ui/dialogs/locale/en-US/EditorColorProperties.dtd

@@ -22,7 +22,7 @@
 
 <!-- Window title -->
 <!ENTITY windowTitle.label "Page Colors and Background">
-<!ENTITY pageColors.label "Page Colors: ">
+<!ENTITY pageColors.label "Page Colors">
 <!ENTITY defaultColorsRadio.label "Reader's default colors (Don't set colors in page)">
 <!ENTITY defaultColorsRadio.tooltip "Use the color settings from the viewer (reader's) browser only">
 <!ENTITY customColorsRadio.label "Use custom colors:">
@@ -33,6 +33,5 @@
 <!ENTITY visitedLinkText.label "Visited link text">
 <!ENTITY background.label "Background:">
 <!ENTITY colon.character ":">
-<!ENTITY backgroundImage.label "Background Image (Uncheck to edit page without image): ">
+<!ENTITY backgroundImage.label "Background Image:">
 <!ENTITY backgroundImage.tooltip "Use an image file as the background for your document">
-<!ENTITY saveImageMsg.label "Filename and location will be saved for future use.">

editor/ui/dialogs/locale/en-US/EditorInsertTable.dtd

@@ -26,8 +26,8 @@
 <!ENTITY size.label "Size">
 <!ENTITY numRowsEditField.label "Rows:">
 <!ENTITY numColumnsEditField.label "Columns:">
-<!ENTITY widthEditField.label "Table width:">
-<!ENTITY heightEditField.label "Table height:">
+<!ENTITY widthEditField.label "Width:">
+<!ENTITY heightEditField.label "Height:">
 <!ENTITY heightEditField.tooltip "Type a number, then choose pixels or a percentage of the window or parent cell">
 <!ENTITY borderEditField.label "Border:">
 <!ENTITY borderEditField.tooltip "Type a number for the table's border, or type zero (0) for no border">