Use radio buttons for 'Alt text' in Image dialog, b=114531, r=brade, sr=kin

editor/ui/dialogs/content/EdImageOverlay.js

@@ -23,8 +23,19 @@
  *   Neil Rashbrook <neil@parkwaycc.co.uk> (Separated from EdImageProps.js)
  */
 
+/*
+ Note: We encourage non-empty alt text for images inserted into a page. 
+ When there's no alt text, we always write 'alt=""' as the attribute, since "alt" is a required attribute.
+ We allow users to not have alt text by checking a "Don't use alterate text" radio button,
+ and we don't accept spaces as valid alt text. A space used to be required to avoid the error message
+ if user didn't enter alt text, but is uneccessary now that we no longer annoy the user 
+ with the error dialog if alt="" is present on an img element.
+ We trim all spaces at the beginning and end of user's alt text
+*/
+
 var gInsertNewImage = true;
 var gInsertNewIMap = true;
+var gDoAltTextError = false;
 var gConstrainOn = false;
 // Note used in current version, but these are set correctly
 //  and could be used to reset width and height used for constrain ratio
@@ -35,8 +46,6 @@ var gImageMap = 0;
 var gCanRemoveImageMap = false;
 var gRemoveImageMap = false;
 var gImageMapDisabled = false;
-var firstTimeOkUsed = true;
-var doAltTextError = false;
 var actualWidth = "";
 var gOriginalSrc = "";
 var actualHeight = "";
@@ -59,6 +68,9 @@ function ImageStartup()
   gDialog.tabBorder         = document.getElementById( "imageBorderTab" );
   gDialog.srcInput          = document.getElementById( "srcInput" );
   gDialog.altTextInput      = document.getElementById( "altTextInput" );
+  gDialog.altTextRadioGroup = document.getElementById( "altTextRadioGroup" );
+  gDialog.altTextRadio      = document.getElementById( "altTextRadio" );
+  gDialog.noAltTextRadio    = document.getElementById( "noAltTextRadio" );
   gDialog.customSizeRadio   = document.getElementById( "customSizeRadio" );
   gDialog.actualSizeRadio   = document.getElementById( "actualSizeRadio" );
   gDialog.constrainCheckbox = document.getElementById( "constrainCheckbox" );
@@ -92,7 +104,20 @@ function InitImage()
   // Force loading of image from its source and show preview image
   LoadPreviewImage();
 
-  gDialog.altTextInput.value = globalElement.getAttribute("alt");
+  var hasAltText = globalElement.hasAttribute("alt");
+  if (hasAltText)
+    gDialog.altTextInput.value = globalElement.getAttribute("alt");
+
+  if (gInsertNewImage || !hasAltText || (hasAltText && gDialog.altTextInput.value))
+  {
+    SetAltTextDisabled(false);
+    gDialog.altTextRadioGroup.selectedItem = gDialog.altTextRadio;
+  }
+  else
+  {
+    SetAltTextDisabled(true);
+    gDialog.altTextRadioGroup.selectedItem = gDialog.noAltTextRadio;
+  }
 
   // setup the height and width widgets
   var width = InitPixelOrPercentMenulist(globalElement,
@@ -119,7 +144,7 @@ function InitImage()
   gDialog.imagetbInput.value = globalElement.getAttribute("vspace");
 
   // dialog.border.value       = globalElement.getAttribute("border");
-  bv = GetHTMLOrCSSStyleValue(globalElement, "border", "border-top-width");
+  var bv = GetHTMLOrCSSStyleValue(globalElement, "border", "border-top-width");
   var pxIndex = bv.search(/px/);
   if (pxIndex  > 0)
   {
@@ -142,11 +167,12 @@ function InitImage()
 
   // Get alignment setting
   var align = globalElement.getAttribute("align");
-  if (align) {
+  if (align)
     align = align.toLowerCase();
-  }
+
   var imgClass;
   var textID;
+
   switch ( align )
   {
     case "top":
@@ -166,6 +192,12 @@ function InitImage()
   doDimensionEnabling();
 }
 
+// Disable alt text input when "Don't use alt" radio is checked
+function SetAltTextDisabled(disable)
+{
+  gDialog.altTextInput.disabled = disable;
+}
+
 function GetImageMap()
 {
   var usemap = globalElement.getAttribute("usemap");
@@ -452,16 +484,18 @@ function ValidateImage()
   var src = TrimString(gDialog.srcInput.value);
   globalElement.setAttribute("src", src);
 
-  // Note: allow typing spaces,
+  // Force user to enter Alt text only if "Alternate text" radio is checked
-  // Warn user if empty string just once per dialog session
+  // Don't allow just spaces in alt text
-  //   but don't consider this a failure
+  var alt = "";
-  var alt = gDialog.altTextInput.value;
+  var useAlt = gDialog.altTextRadioGroup.selectedItem == gDialog.altTextRadio;
-  if (doAltTextError && !alt)
+  if (useAlt)
+    alt = TrimString(gDialog.altTextInput.value);
+
+  if (gDoAltTextError && useAlt && !alt)
   {
     AlertWithTitle(null, GetString("NoAltText"));
     SwitchToValidatePanel();
     gDialog.altTextInput.focus();
-    doAltTextError = false;
     return false;
   }
   globalElement.setAttribute("alt", alt);
@@ -543,12 +577,8 @@ function ValidateImage()
 
 function onAccept()
 {
-  // Show alt text error only once
+  // Use this now (default = false) so Advanced Edit button dialog doesn't trigger error message
-  // (we don't initialize doAltTextError=true
+  gDoAltTextError = true;
-  //  so Advanced edit button dialog doesn't trigger that error message)
-  doAltTextError = firstTimeOkUsed;
-  firstTimeOkUsed = false;
-
 
   if (ValidateData())
   {
@@ -623,5 +653,8 @@ function onAccept()
     SaveWindowLocation();
     return true;
   }
+
+  gDoAltTextError = false;
+
   return false;
 }

editor/ui/dialogs/content/EdImageOverlay.xul

@@ -38,14 +38,13 @@
   <!-- This tab is currently not used -->
   <tab id="imageLinkTab" label="&imageLinkTab.label;"/>
 
-  <groupbox id="imageLocation">
+  <vbox id="imageLocation"> 
-    <caption label="&locationBox.label;"/>
+    <spacer class="spacer"/>
-    <!--/////// Src URL and ALT Text //////-->
+    <label control = "srcInput"
-    <label control   = "srcInput"
       value = "&locationEditField.label;"
       tooltiptext="&locationEditField.tooltip;"
       />
-    <textbox
+    <textbox flex="1"
       id         = "srcInput" 
       oninput    = "ChangeImageSrc()"
       style      = "min-width : 20em"/>
@@ -58,18 +57,22 @@
       <button id="ChooseFile"/>
     </hbox>
     <spacer class="spacer"/>
-    <hbox>
+    <radiogroup id="altTextRadioGroup" flex="1">
-      <label id      = "altTextLabel" 
+      <hbox align="center">
-        control     = "altTextInput"
+        <radio id = "altTextRadio" 
-        tooltip = "aTooltip" tooltiptext="&altTextEditField.tooltip;"
+          label   = "&altText.label;"
-        value   = "&altTextEditField.label;"/>
+          oncommand = "SetAltTextDisabled(false);"/>
-      <textbox
+        <textbox flex="1"
-        id     ="altTextInput"
+          id      = "altTextInput"
-        style  = "min-width : 20em"
+          style   = "min-width : 20em"
-        tooltip = "aTooltip" tooltiptext="&altTextEditField.tooltip;"/>
+          tooltip = "aTooltip" tooltiptext="&altTextEditField.tooltip;"
-    </hbox>
+          oninput = "SetAltTextDisabled(false);"/>
-    <spacer class="spacer"/>
+      </hbox>
-  </groupbox>
+      <radio id = "noAltTextRadio" 
+        label   = "&noAltText.label;"
+        oncommand = "SetAltTextDisabled(true);"/>
+    </radiogroup>
+  </vbox>
 
   <groupbox id="imagePreview" orient="horizontal">
     <caption label="&previewBox.label;"/>
@@ -95,150 +98,147 @@
     </vbox>
   </groupbox>
 
-  <groupbox id="imageDimensions" align="start">
+  <vbox id="imageDimensions" align="start">
-    <caption id="dimensionsLabel" label="&dimensionsBox.label;"/>
+    <spacer class="spacer"/>
-    <vbox>
+    <hbox>
-          <hbox>
+      <radiogroup id="imgSizeGroup">
-            <radiogroup id="imgSizeGroup">
+        <radio
-              <radio
+          id      = "actualSizeRadio" 
-                id      = "actualSizeRadio" 
+          label   = "&actualSizeRadio.label;"
-                label   = "&actualSizeRadio.label;"
+          tooltip = "aTooltip" tooltiptext="&actualSizeRadio.tooltip;"
-                tooltip = "aTooltip" tooltiptext="&actualSizeRadio.tooltip;"
+          oncommand = "SetActualSize()"/>
-                oncommand = "SetActualSize()"/>
+        <radio
-              <radio
+          id      = "customSizeRadio" 
-                id      = "customSizeRadio" 
+          label   = "&customSizeRadio.label;"
-                label   = "&customSizeRadio.label;"
+          tooltip = "aTooltip" tooltiptext="&customSizeRadio.tooltip;"
-                tooltip = "aTooltip" tooltiptext="&customSizeRadio.tooltip;"
+          oncommand = "doDimensionEnabling();" />
-                oncommand = "doDimensionEnabling();" />
+      </radiogroup>
-            </radiogroup>
+      <spacer flex="1"/>
-            <spacer flex="1"/>
+      <vbox>
-            <vbox>
+        <spacer flex="1"/>
-              <spacer flex="1"/>
+        <checkbox id="constrainCheckbox" label="&constrainCheckbox.label;"
-              <!--////// CONSTRAIN DIMENSIONS //////-->
+             oncommand="ToggleConstrain()"
-              <checkbox id="constrainCheckbox" label="&constrainCheckbox.label;"
+             tooltiptext="&constrainCheckbox.tooltip;"/>
-                   oncommand="ToggleConstrain()"
+      </vbox>
-                   tooltiptext="&constrainCheckbox.tooltip;"/>
+      <spacer flex="1"/>
-            </vbox>
+    </hbox>
-            <spacer flex="1"/>
+    <spacer class="spacer"/>
-          </hbox>
+    <grid class="big-left-margin">
-          <spacer class="spacer"/>
+      <columns><column/><column/><column flex="1"/></columns>
-          <grid class="big-left-margin">
+      <rows>
-            <columns><column/><column/><column flex="1"/></columns>
+        <row align="center">
-            <rows>
+          <label id    = "widthLabel"
-              <!--//////  IMAGE WIDTH  //////-->
+            control   = "widthInput"
-              <row align="center">
+            value = "&widthEditField.label;" />
-                <label id    = "widthLabel"
+          <textbox
-                  control   = "widthInput"
+            id       = "widthInput" 
-                  value = "&widthEditField.label;" />
+            class    = "narrow"
-                <textbox
+            oninput  = "constrainProportions(this.id, 'heightInput')"/>
-                  id       = "widthInput" 
+          <menulist id = "widthUnitsMenulist"
-                  class    = "narrow"
+            oncommand = "doDimensionEnabling();" />
-                  oninput  = "constrainProportions(this.id, 'heightInput')"/>
+          <!-- contents are appended by JS -->
-                <menulist id = "widthUnitsMenulist"
+        </row>
-                  oncommand = "doDimensionEnabling();" />
+        <row align="center">
-                <!-- contents are appended by JS -->
+          <label id    = "heightLabel"
-              </row>
+            control   = "heightInput"
-              <!--////// IMAGE HEIGHT //////-->
+            value = "&heightEditField.label;" />
-              <row align="center">
+          <textbox
-                <label id    = "heightLabel"
+            id       = "heightInput" 
-                  control   = "heightInput"
+            class    = "narrow"
-                  value = "&heightEditField.label;" />
+            oninput  = "constrainProportions(this.id, 'widthInput')"/>
-                <textbox
+          <menulist id = "heightUnitsMenulist"
-                  id       = "heightInput" 
+            oncommand = "doDimensionEnabling();" />
-                  class    = "narrow"
+          <!-- contents are appended by JS -->
-                  oninput  = "constrainProportions(this.id, 'widthInput')"/>
+        </row>
-                <menulist id = "heightUnitsMenulist"
+      </rows>          
-                  oncommand = "doDimensionEnabling();" />
+    </grid>
-                <!-- contents are appended by JS -->
+    <spacer flex="1"/>
-              </row>
+  </vbox>
-            </rows>          
-          </grid>
-          <spacer flex="1"/>
-    </vbox>
-  </groupbox>
 
   <hbox id="imageAppearance">
     <groupbox>
-          <caption id="spacingLabel" label="&spacingBox.label;"/>
+      <caption id="spacingLabel" label="&spacingBox.label;"/>
-          <grid>
+      <grid>
-            <columns><column/><column/><column/></columns>
+        <columns><column/><column/><column/></columns>
-            <rows>
+        <rows>
-              <row align="center">
+          <row align="center">
-                <label 
+            <label 
-                  class = "align-right" 
+              class = "align-right" 
-                  id    = "leftrightLabel"
+              id    = "leftrightLabel"
-                  value = "&leftRightEditField.label;"/>
+              value = "&leftRightEditField.label;"/>
-                <textbox
+            <textbox
-                  class     = "narrow"
+              class     = "narrow"
-                  id        = "imageleftrightInput" 
+              id        = "imageleftrightInput" 
-                  oninput   = "forceInteger(this.id)"/>
+              oninput   = "forceInteger(this.id)"/>
-                <label 
+            <label 
-                  id    = "leftrighttypeLabel"
+              id    = "leftrighttypeLabel"
-                  value = "&pixelsPopup.value;" />
+              value = "&pixelsPopup.value;" />
-              </row>
+          </row>
-              <row align="center">
+          <spacer class="spacer"/>
-                <label 
+          <row align="center">
-                  class = "align-right" 
+            <label 
-                  id    = "topbottomLabel"
+              class = "align-right" 
-                  value = "&topBottomEditField.label;"/>
+              id    = "topbottomLabel"
-                <textbox
+              value = "&topBottomEditField.label;"/>
-                  class     = "narrow"
+            <textbox
-                  id        = "imagetopbottomInput" 
+              class     = "narrow"
-                  oninput   = "forceInteger(this.id)"/>
+              id        = "imagetopbottomInput" 
-                <label
+              oninput   = "forceInteger(this.id)"/>
-                  id    = "topbottomtypeLabel"
+            <label
-                  value = "&pixelsPopup.value;" />
+              id    = "topbottomtypeLabel"
-              </row>
+              value = "&pixelsPopup.value;" />
-              <row align="center">
+          </row>
-                <label class = "align-right" 
+          <spacer class="spacer"/>
-                  id    = "borderLabel"
+          <row align="center">
-                  value = "&borderEditField.label;"/>
+            <label class = "align-right" 
-                <textbox
+              id    = "borderLabel"
-                  class     = "narrow"
+              value = "&borderEditField.label;"/>
-                  id        = "border" 
+            <textbox
-                  oninput   = "forceInteger(this.id)"/>
+              class     = "narrow"
-                <label 
+              id        = "border" 
-                  id    = "bordertypeLabel"
+              oninput   = "forceInteger(this.id)"/>
-                  value = "&pixelsPopup.value;" />
+            <label 
-              </row>
+              id    = "bordertypeLabel"
-            </rows>
+              value = "&pixelsPopup.value;" />
-          </grid>
+          </row>
-        </groupbox>
+        </rows>
+      </grid>
+    </groupbox>
 
     <vbox>
       <groupbox align="start">
-          <caption id="alignLabel" label="&alignment.label;"/>
+        <caption id="alignLabel" label="&alignment.label;"/>
-          <menulist id="alignTypeSelect" class="align-menu">
+        <menulist id="alignTypeSelect" class="align-menu">
-            <menupopup>
+          <menupopup>
-              <menuitem class="align-menu" value="top"    label="&topPopup.value;"/>
+            <menuitem class="align-menu" value="top"    label="&topPopup.value;"/>
-              <menuitem class="align-menu" value="middle" label="&centerPopup.value;"/>
+            <menuitem class="align-menu" value="middle" label="&centerPopup.value;"/>
-              <menuitem class="align-menu" value="bottom" label="&bottomPopup.value;"/>
+            <menuitem class="align-menu" value="bottom" label="&bottomPopup.value;"/>
-              <!-- HTML attribute value is opposite of the button label on purpose -->
+            <!-- HTML attribute value is opposite of the button label on purpose -->
-              <menuitem class="align-menu" value="right"  label="&wrapLeftPopup.value;"/>
+            <menuitem class="align-menu" value="right"  label="&wrapLeftPopup.value;"/>
-              <menuitem class="align-menu" value="left"   label="&wrapRightPopup.value;"/>
+            <menuitem class="align-menu" value="left"   label="&wrapRightPopup.value;"/>
-            </menupopup>
+          </menupopup>
-          </menulist>
+        </menulist>
-        </groupbox>
+      </groupbox>
 
       <groupbox>
-         <caption id="imagemapLabel" label="&imagemapBox.label;"/>
+        <caption id="imagemapLabel" label="&imagemapBox.label;"/>
-         <hbox equalsize="always">
+        <hbox equalsize="always">
 
 <!-- Hide Image Map Editor. Not ready for prime time yet
-          <button
+        <button
-            id      = "editImageMap"
+          id      = "editImageMap"
-            oncommand = "editImageMap()"
+          oncommand = "editImageMap()"
-            tooltiptext="&editImageMapButton.tooltip;"
+          tooltiptext="&editImageMapButton.tooltip;"
-            label   = "&editImageMapButton.label;"
+          label   = "&editImageMapButton.label;"
-            flex    = "1"/>
+          flex    = "1"/>
 -->
-          <button
+        <button
-            id      = "removeImageMap"
+          id      = "removeImageMap"
-            oncommand = "removeImageMap()"
+          oncommand = "removeImageMap()"
-            label   = "&removeImageMapButton.label;"
+          label   = "&removeImageMapButton.label;"
-            flex    = "1"/>
+          flex    = "1"/>
-          <spacer flex="1"/><!-- remove when we restore Image Map Editor -->
+        <spacer flex="1"/><!-- remove when we restore Image Map Editor -->
-          </hbox>
+        </hbox>
       </groupbox>
     </vbox>
   </hbox>

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

@@ -20,7 +20,7 @@
    - Contributor(s): 
   -->
 
-<!-- These strings are for use specifically in the editor's image dialog. -->
+<!-- These strings are for use specifically in the editor's image and form image dialogs. -->
 
 <!-- Window title -->
 <!ENTITY windowTitle.label "Image Properties">
@@ -28,18 +28,17 @@
 <!ENTITY pixelsPopup.value "pixels">
 <!ENTITY percentPopup.value "percent">
 
-<!-- These are in the location box. -->
+<!-- These are in the Location tab panel -->
-<!ENTITY locationBox.label "Image Information">
+<!ENTITY locationEditField.label "Image Location:">
-<!ENTITY locationEditField.label "Image URL:">
 <!ENTITY locationEditField.tooltip "Type the image's filename or location">
-<!ENTITY altTextEditField.label "Alternative Text:">
+<!ENTITY altText.label "Alternate text:">
 <!ENTITY altTextEditField.tooltip "Type text to display in place of the image">
+<!ENTITY noAltText.label "Don't use alternate text">
 
 <!ENTITY previewBox.label "Image Preview">
-
 <!ENTITY MoreFewerButton.tooltip "Display more or fewer properties to edit">
-<!-- These controls are in the Dimensions box of the expanded area -->
+
-<!ENTITY dimensionsBox.label "Dimensions">
+<!-- These controls are in the Dimensions tab panel -->
 <!-- actualSize.label should be same as actualSizeRadio.label + ":" -->
 <!ENTITY actualSize.label "Actual Size:">
 <!ENTITY actualSizeRadio.label "Actual Size">
@@ -65,7 +64,7 @@
 <!ENTITY wrapRightPopup.value "Wrap to the right">
 <!ENTITY wrapLeftPopup.value "Wrap to the left">
 
-<!-- These controls are in the Spacing Box of the expanded area -->
+<!-- These controls are in the Spacing Box -->
 <!ENTITY spacingBox.label "Spacing">
 <!ENTITY spacingBox.tooltip "Type a number for the amount of space around image">
 <!ENTITY leftRightEditField.label "Left and Right:">
@@ -80,7 +79,7 @@
 
 <!-- These tabs are currently used in the image input dialog -->
 <!ENTITY imageInputTab.label "Form">
-<!ENTITY imageLocationTab.label "Image">
+<!ENTITY imageLocationTab.label "Location">
 <!ENTITY imageDimensionsTab.label "Dimensions">
 <!ENTITY imageAppearanceTab.label "Appearance">
 <!-- This tab is currently not used -->