Add support for 'Title' attribute in Image dialog. b=68800, r=brade, sr=hewitt

editor/ui/dialogs/content/EdImageOverlay.js

@@ -67,6 +67,7 @@ function ImageStartup()
   gDialog.tabDimensions     = document.getElementById( "imageDimensionsTab" );
   gDialog.tabBorder         = document.getElementById( "imageBorderTab" );
   gDialog.srcInput          = document.getElementById( "srcInput" );
+  gDialog.titleInput        = document.getElementById( "titleInput" );
   gDialog.altTextInput      = document.getElementById( "altTextInput" );
   gDialog.altTextRadioGroup = document.getElementById( "altTextRadioGroup" );
   gDialog.altTextRadio      = document.getElementById( "altTextRadio" );
@@ -104,6 +105,9 @@ function InitImage()
   // Force loading of image from its source and show preview image
   LoadPreviewImage();
 
+  if (globalElement.hasAttribute("title"))
+    gDialog.titleInput.value = globalElement.getAttribute("title");
+
   var hasAltText = globalElement.hasAttribute("alt");
   var altText;
   if (hasAltText)
@@ -507,6 +511,8 @@ function ValidateImage()
   var src = TrimString(gDialog.srcInput.value);
   globalElement.setAttribute("src", src);
 
+  globalElement.setAttribute("title", TrimString(gDialog.titleInput.value));
+
   // Force user to enter Alt text only if "Alternate text" radio is checked
   // Don't allow just spaces in alt text
   var alt = "";

editor/ui/dialogs/content/EdImageOverlay.xul

@@ -43,28 +43,52 @@
       accesskey="&locationEditField.accessKey;"
       tooltiptext="&locationEditField.tooltip;"
       />
-    <textbox id="srcInput" oninput="ChangeImageSrc();"/>
+    <textbox id="srcInput" oninput="ChangeImageSrc();" tabindex="1"/>
     <hbox>
       <checkbox 
         id  = "MakeRelativeCheckbox"
-        for = "srcInput"/>
+        for = "srcInput"
+        tabindex="2"/>
       <spacer flex="1"/>
       <!-- from EdDialogOverlay.xul -->
-      <button id="ChooseFile"/>
+      <button id="ChooseFile"  tabindex="3"/>
     </hbox>
     <spacer class="spacer"/>
     <radiogroup id="altTextRadioGroup" flex="1">
-      <hbox align="center">
-        <radio id = "altTextRadio" 
-          label   = "&altText.label;"
-          accesskey = "&altText.accessKey;"
-          oncommand = "SetAltTextDisabled(false);"/>
-        <textbox flex="1"
-          id      = "altTextInput"
-          style   = "min-width : 20em"
-          tooltiptext="&altTextEditField.tooltip;"
-          oninput = "SetAltTextDisabled(false);"/>
-      </hbox>
+      <grid>
+        <columns><column/><column flex="1"/></columns>
+        <rows>
+          <row align="center">
+            <label 
+              style   = "margin-left: 26px"
+              control = "titleInput"
+              accesskey = "&title.accessKey;"
+              value   ="&title.label;"
+              tooltiptext="&title.tooltip;"
+              for     = "titleInput"/>
+            <textbox flex="1"
+              id      = "titleInput"
+              class   = "MinWidth20em"
+              tooltiptext="&title.tooltip;"
+              tabindex="4"/>
+          </row>
+          <row align="center">
+            <radio id = "altTextRadio" 
+              label   = "&altText.label;"
+              accesskey = "&altText.accessKey;"
+              tooltiptext="&altTextEditField.tooltip;"
+              oncommand = "SetAltTextDisabled(false);"
+              tabindex="5"/>
+            <textbox flex="1"
+              id      = "altTextInput"
+              class   = "MinWidth20em"
+              tooltiptext="&altTextEditField.tooltip;"
+              oninput = "SetAltTextDisabled(false);"
+              tabindex="6"/>
+          </row>
+        </rows>
+      </grid>
+
       <radio id = "noAltTextRadio" 
         label   = "&noAltText.label;"
         accesskey = "&noAltText.accessKey;"

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

@@ -32,6 +32,9 @@
 <!ENTITY locationEditField.label "Image Location:">
 <!ENTITY locationEditField.accessKey "L">
 <!ENTITY locationEditField.tooltip "Type the image's filename or location">
+<!ENTITY title.label "Tooltip:">
+<!ENTITY title.accessKey "T">
+<!ENTITY title.tooltip "The html 'title' attribute that displays as a tooltip">
 <!ENTITY altText.label "Alternate text:">
 <!ENTITY altText.accessKey "A">
 <!ENTITY altTextEditField.tooltip "Type text to display in place of the image">