Bug 1563092 - replace <textbox> in EdImageProps.xul and edImage.inc.xul. r=mkmelin
authorKhushil Mistry <khushil324@gmail.com>
Thu, 03 Oct 2019 11:00:00 +0200
changeset 37066 6f766cbe59fdab4b0ad503386d9978b05c19ecef
parent 37065 b22962d53db9ab1577a4f8df9dbf86f282797de4
child 37067 926c2b57bd01a3572fcfb5ac532fdb9072ac71f6
push id395
push userclokep@gmail.com
push dateMon, 02 Dec 2019 19:38:57 +0000
reviewersmkmelin
bugs1563092
Bug 1563092 - replace <textbox> in EdImageProps.xul and edImage.inc.xul. r=mkmelin
mail/components/compose/content/dialogs/EdImageProps.xul
mail/components/compose/content/dialogs/edImage.inc.xul
--- a/mail/components/compose/content/dialogs/EdImageProps.xul
+++ b/mail/components/compose/content/dialogs/EdImageProps.xul
@@ -1,31 +1,34 @@
 <?xml version="1.0"?>
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 <?xml-stylesheet href="chrome://editor/skin/editor.css" type="text/css"?>
 <?xml-stylesheet href="chrome://editor/skin/EditorDialog.css" type="text/css"?>
+<?xml-stylesheet href="chrome://messenger/skin/input-fields.css" type="text/css"?>
 
 <!DOCTYPE dialog [
 <!ENTITY % edImageProperties SYSTEM "chrome://messenger/locale/messengercompose/EditorImageProperties.dtd">
 %edImageProperties;
 <!ENTITY % composeEditorOverlayDTD SYSTEM "chrome://messenger/locale/messengercompose/mailComposeEditorOverlay.dtd">
 %composeEditorOverlayDTD;
 <!ENTITY % edDialogOverlay SYSTEM "chrome://messenger/locale/messengercompose/EdDialogOverlay.dtd">
 %edDialogOverlay;
 ]>
 
 <!-- dialog containing a control requiring initial setup -->
 <dialog id="imageDlg" title="&windowTitle.label;"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"
         onload="Startup()"
         buttons="accept,cancel">
 
+  <script src="chrome://global/content/globalOverlay.js"/>
+  <script src="chrome://global/content/editMenuOverlay.js"/>
   <script src="chrome://messenger/content/messengercompose/editorUtilities.js"/>
   <script src="chrome://messenger/content/messengercompose/EdDialogCommon.js"/>
   <script src="chrome://messenger/content/messengercompose/EdImageProps.js"/>
   <script src="chrome://messenger/content/messengercompose/EdImageDialog.js"/>
   <script src="chrome://messenger/content/messengercompose/EdImageLinkLoader.js"/>
 
   <spacer id="location" offsetY="50" persist="offsetX offsetY"/>
 
@@ -36,21 +39,23 @@
       <tab id="imageAppearanceTab" label="&imageAppearanceTab.label;"/>
       <tab id="imageLinkTab" label="&imageLinkTab.label;"/>
     </tabs>
     <tabpanels>
 #include edImage.inc.xul
       <vbox>
         <spacer class="spacer"/>
         <vbox id="LinkLocationBox">
-          <label control="hrefInput"
+          <label id="hrefLabel"
+                 control="hrefInput"
                  accesskey="&LinkURLEditField2.accessKey;"
                  width="1">&LinkURLEditField2.label;</label>
-          <textbox id="hrefInput" type="text"
-                   class="uri-element padded" oninput="ChangeLinkLocation();"/>
+          <html:input id="hrefInput" type="text"
+                      class="uri-element padded input-inline" onpinut="ChangeLinkLocation();"
+                      aria-labelledby="hrefLabel"/>
           <hbox align="center">
             <checkbox id="MakeRelativeLink"
                       for="hrefInput"
                       label="&makeUrlRelative.label;"
                       accesskey="&makeUrlRelative.accessKey;"
                       oncommand="MakeInputValueRelativeOrAbsolute(this);"
                       tooltiptext="&makeUrlRelative.tooltip;"/>
             <spacer flex="1"/>
--- a/mail/components/compose/content/dialogs/edImage.inc.xul
+++ b/mail/components/compose/content/dialogs/edImage.inc.xul
@@ -1,24 +1,25 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
       <vbox id="imageLocation">
         <spacer class="spacer"/>
-        <label control = "srcInput"
-          value = "&locationEditField.label;"
-          accesskey="&locationEditField.accessKey;"
-          tooltiptext="&locationEditField.tooltip;"
-          />
+        <label id="srcLabel"
+               control="srcInput"
+               value="&locationEditField.label;"
+               accesskey="&locationEditField.accessKey;"
+               tooltiptext="&locationEditField.tooltip;"/>
         <tooltip id="shortenedDataURI">
           <label value="&locationEditField.shortenedDataURI;"/>
         </tooltip>
-        <textbox id="srcInput" oninput="ChangeImageSrc();" tabindex="1" class="uri-element"
-                 tooltiptext="&locationEditField.tooltip;"/>
+        <html:input id="srcInput" type="text" oninput="ChangeImageSrc();" tabindex="1"
+                    class="uri-element input-inline" title="&locationEditField.tooltip;"
+                    aria-labelledby="srcLabel"/>
         <hbox id="MakeRelativeHbox">
           <checkbox id="MakeRelativeCheckbox"
                     tabindex="2"
                     label="&makeUrlRelative.label;"
                     accesskey="&makeUrlRelative.accessKey;"
                     oncommand="MakeInputValueRelativeOrAbsolute(this);"
                     tooltiptext="&makeUrlRelative.tooltip;"/>
           <checkbox id="AttachSourceToMail"
@@ -33,51 +34,54 @@
                   label="&chooseFileButton.label;"
                   accesskey="&chooseFileButton.accessKey;"/>
         </hbox>
         <spacer class="spacer"/>
         <radiogroup id="altTextRadioGroup" flex="1">
           <hbox>
             <vbox>
               <hbox align="center" flex="1">
-                <label style="margin-left: 26px"
+                <label id="titleLabel"
+                       style="margin-left:26px"
                        control="titleInput"
                        accesskey="&title.accessKey;"
                        value="&title.label;"
                        tooltiptext="&title.tooltip;"/>
               </hbox>
               <hbox align="center" flex="1">
                 <radio id="altTextRadio" value="usealt-yes"
                        label="&altText.label;"
                        accesskey="&altText.accessKey;"
                        tooltiptext="&altTextEditField.tooltip;"
                        persist="selected"
                        oncommand = "SetAltTextDisabled(false);"
                        tabindex="5"/>
               </hbox>
             </vbox>
-            <vbox>
-              <textbox id="titleInput"
-                       flex="1"
-                       class="MinWidth20em"
-                       tooltiptext="&title.tooltip;"
-                       tabindex="4"/>
-              <textbox id="altTextInput"
-                       flex="1"
-                       class="MinWidth20em"
-                       tooltiptext="&altTextEditField.tooltip;"
-                       oninput="SetAltTextDisabled(false);"
-                       tabindex="6"/>
+            <vbox flex="1">
+              <html:input id="titleInput"
+                          type="text"
+                          class="MinWidth20em input-inline"
+                          title="&title.tooltip;"
+                          tabindex="4"
+                          aria-labelledby="titleLabel"/>
+              <html:input id="altTextInput"
+                          type="text"
+                          class="MinWidth20em input-inline"
+                          title="&altTextEditField.tooltip;"
+                          oninput="SetAltTextDisabled(false);"
+                          tabindex="6"
+                          aria-labelledby="altTextRadio"/>
             </vbox>
           </hbox>
           <radio id="noAltTextRadio" value="usealt-no"
                  label="&noAltText.label;"
-                 accesskey = "&noAltText.accessKey;"
+                 accesskey="&noAltText.accessKey;"
                  persist="selected"
-                 oncommand = "SetAltTextDisabled(true);"/>
+                 oncommand="SetAltTextDisabled(true);"/>
         </radiogroup>
       </vbox>
 
       <vbox id="imageDimensions" align="start">
         <spacer class="spacer"/>
         <hbox>
           <radiogroup id="imgSizeGroup">
             <radio id="actualSizeRadio"
@@ -101,103 +105,116 @@
                       accesskey="&constrainCheckbox.accessKey;"
                       oncommand="ToggleConstrain()"
                       tooltiptext="&constrainCheckbox.tooltip;"/>
           </vbox>
           <spacer flex="1"/>
         </hbox>
         <spacer class="spacer"/>
         <hbox class="indent">
-          <vbox>
-            <hbox flex="1" align="center">
-              <label id="widthLabel"
-                     control="widthInput"
-                     accesskey="&widthEditField.accessKey;"
-                     value="&widthEditField.label;"/>
-            </hbox>
-            <hbox flex="1" align="center">
-              <label id="heightLabel"
-                     control="heightInput"
-                     accesskey="&heightEditField.accessKey;"
-                     value="&heightEditField.label;"/>
-            </hbox>
-          </vbox>
-          <vbox>
-            <textbox id="widthInput"
-                     class="narrow"
-                     oninput="constrainProportions(this.id, 'heightInput')"/>
-            <textbox id="heightInput"
-                     class="narrow"
-                     oninput="constrainProportions(this.id, 'widthInput')"/>
-          </vbox>
-          <vbox flex="1">
-            <menulist id="widthUnitsMenulist"
-                      oncommand="doDimensionEnabling();" />
-            <menulist id="heightUnitsMenulist"
-                      oncommand="doDimensionEnabling();" />
-          </vbox>
+          <html:table>
+            <html:tr>
+              <html:th>
+                <label id="widthLabel"
+                       control="widthInput"
+                       accesskey="&widthEditField.accessKey;"
+                       value="&widthEditField.label;"/>
+              </html:th>
+              <html:td>
+                <html:input id="widthInput" type="number" min="0"
+                            class="narrow input-inline"
+                            oninput="constrainProportions(this.id,'heightInput')"
+                            aria-labelledby="widthLabel"/>
+              </html:td>
+              <html:td>
+                <menulist id="widthUnitsMenulist"
+                          oncommand="doDimensionEnabling();"/>
+              </html:td>
+            </html:tr>
+            <html:tr>
+              <html:th>
+                <label id="heightLabel"
+                       control="heightInput"
+                       accesskey="&heightEditField.accessKey;"
+                       value="&heightEditField.label;"/>
+              </html:th>
+              <html:td>
+                <html:input id="heightInput" type="number" min="0"
+                            class="narrow input-inline"
+                            oninput="constrainProportions(this.id,'widthInput')"
+                            aria-labelledby="heightLabel"/>
+              </html:td>
+              <html:td>
+                <menulist id="heightUnitsMenulist"
+                          oncommand="doDimensionEnabling();"/>
+              </html:td>
+            </html:tr>
+          </html:table>
         </hbox>
         <spacer flex="1"/>
       </vbox>
 
       <hbox id="imageAppearance">
         <groupbox>
           <hbox class="groupbox-title">
             <label id="spacingLabel" class="header">&spacingBox.label;</label>
           </hbox>
-          <hbox>
-            <vbox>
-              <hbox flex="1" align="center">
+          <html:table>
+            <html:tr>
+              <html:th>
                 <label id="leftrightLabel"
                        class="align-right"
                        control="imageleftrightInput"
                        accesskey="&leftRightEditField.accessKey;"
                        value="&leftRightEditField.label;"/>
-              </hbox>
-              <hbox flex="1" align="center">
+              </html:th>
+              <html:td>
+                <html:input id="imageleftrightInput" type="number" min="0"
+                            class="narrow input-inline"
+                            aria-labelledby="leftrightLabel"/>
+              </html:td>
+              <html:td id="leftrighttypeLabel">
+                &pixelsPopup.value;
+              </html:td>
+            </html:tr>
+            <html:tr>
+              <html:th>
                 <label id="topbottomLabel"
                        class="align-right"
                        control="imagetopbottomInput"
                        accesskey="&topBottomEditField.accessKey;"
                        value="&topBottomEditField.label;"/>
-              </hbox>
-              <hbox flex="1" align="center">
+              </html:th>
+              <html:td>
+                <html:input id="imagetopbottomInput" type="number" min="0"
+                            class="narrow input-inline"
+                            aria-labelledby="topbottomLabel"/>
+              </html:td>
+              <html:td id="topbottomtypeLabel">
+                &pixelsPopup.value;
+              </html:td>
+            </html:tr>
+            <html:tr>
+              <html:th>
                 <label id="borderLabel"
                        class="align-right"
                        control="border"
                        accesskey="&borderEditField.accessKey;"
                        value="&borderEditField.label;"/>
-              </hbox>
-            </vbox>
-            <vbox>
-              <textbox id="imageleftrightInput"
-                       class="narrow"
-                       oninput="forceInteger(this.id)"/>
-              <textbox id="imagetopbottomInput"
-                       class="narrow"
-                       oninput="forceInteger(this.id)"/>
-              <textbox id="border"
-                       class="narrow"
-                       oninput="forceInteger(this.id)"/>
-            </vbox>
-            <vbox>
-              <hbox flex="1" align="center">
-                <label id="leftrighttypeLabel"
-                       value="&pixelsPopup.value;" />
-              </hbox>
-              <hbox flex="1" align="center">
-                <label id="topbottomtypeLabel"
-                       value="&pixelsPopup.value;" />
-              </hbox>
-              <hbox flex="1" align="center">
-                <label id="bordertypeLabel"
-                       value="&pixelsPopup.value;" />
-              </hbox>
-            </vbox>
-          </hbox>
+              </html:th>
+              <html:td>
+                <html:input id="border" type="number" min="0"
+                            class="narrow input-inline"
+                            aria-labelledby="borderLabel"/>
+              </html:td>
+              <html:td id="bordertypeLabel">
+                &pixelsPopup.value;
+              </html:td>
+            </html:tr>
+          </html:table>
         </groupbox>
 
         <vbox>
           <groupbox align="start">
             <hbox class="groupbox-title">
               <label id="alignLabel" class="header">&alignment.label;</label>
             </hbox>
             <menulist id="alignTypeSelect" class="align-menu">