Bug 1563112 - replace <textbox> in EdTableProps.xul. r=mkmelin
authorKhushil Mistry <khushil324@gmail.com>
Sat, 28 Sep 2019 01:33:00 +0200
changeset 37002 29a9fba778faaa483c20104938d6230c52b5ecb4
parent 37001 fed51e9af3892d78ba8ae0495a077fabb20daf46
child 37003 9442615bca8d249eb32065d8b6b2f547418fd9a5
push id395
push userclokep@gmail.com
push dateMon, 02 Dec 2019 19:38:57 +0000
reviewersmkmelin
bugs1563112
Bug 1563112 - replace <textbox> in EdTableProps.xul. r=mkmelin
mail/components/compose/content/dialogs/EdTableProps.js
mail/components/compose/content/dialogs/EdTableProps.xul
--- a/mail/components/compose/content/dialogs/EdTableProps.js
+++ b/mail/components/compose/content/dialogs/EdTableProps.js
@@ -1102,20 +1102,17 @@ function ChangeCellTextbox(textboxID) {
 function SetCheckbox(checkboxID) {
   if (checkboxID && checkboxID.length > 0) {
     // Set associated checkbox
     document.getElementById(checkboxID).checked = true;
   }
   gCellDataChanged = true;
 }
 
-function ChangeIntTextbox(textboxID, checkboxID) {
-  // Filter input for just integers
-  forceInteger(textboxID);
-
+function ChangeIntTextbox(checkboxID) {
   // Set associated checkbox
   SetCheckbox(checkboxID);
 }
 
 function CloneAttribute(destElement, srcElement, attr) {
   var value = srcElement.getAttribute(attr);
   // Use editor methods since we are always
   //  modifying a table in the document and
--- a/mail/components/compose/content/dialogs/EdTableProps.xul
+++ b/mail/components/compose/content/dialogs/EdTableProps.xul
@@ -2,16 +2,17 @@
 
 <!-- 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/shared/grid-layout.css" type="text/css" ?>
+<?xml-stylesheet href="chrome://messenger/skin/input-fields.css" type="text/css" ?>
 
 <!DOCTYPE dialog [
 <!ENTITY % edTableProperties SYSTEM "chrome://messenger/locale/messengercompose/EditorTableProperties.dtd">
 %edTableProperties;
 <!ENTITY % edDialogOverlay SYSTEM "chrome://messenger/locale/messengercompose/EdDialogOverlay.dtd">
 %edDialogOverlay;
 ]>
 
@@ -20,16 +21,18 @@
     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"
     onload="Startup()"
     buttons="accept,extra1,cancel"
     buttonlabelclose="&closeButton.label;"
     buttonlabelextra1="&applyButton.label;"
     buttonaccesskeyextra1="&applyButton.accesskey;">
 
   <!-- Methods common to all editor dialogs -->
+  <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/EdTableProps.js"/>
 
   <spacer id="location" offsetY="50" persist="offsetX offsetY"/>
 
   <tabbox id="TabBox">
     <tabs flex="1">
@@ -44,79 +47,92 @@
           <hbox class="groupbox-title">
             <label class="header">&size.label;</label>
           </hbox>
           <hbox>
             <vbox>
               <hbox>
                 <vbox>
                   <hbox align="center" flex="1">
-                    <label value="&tableRows.label;" accesskey="&tableRows.accessKey;" control="TableRowsInput"/>
+                    <label id="TableRowsLabel" value="&tableRows.label;" accesskey="&tableRows.accessKey;"
+                           control="TableRowsInput"/>
                   </hbox>
                   <hbox align="center" flex="1">
-                    <label value="&tableColumns.label;" accesskey="&tableColumns.accessKey;" control="TableColumnsInput"/>
+                    <label id="TableColumnsLabel" value="&tableColumns.label;" accesskey="&tableColumns.accessKey;"
+                           control="TableColumnsInput"/>
                   </hbox>
                 </vbox>
                 <vbox>
-                  <textbox id="TableRowsInput" oninput="forceInteger(this.id);" style="width:3em;"/>
-                  <textbox id="TableColumnsInput" oninput="forceInteger(this.id);" style="width:3em;"/>
+                  <html:input id="TableRowsInput" type="number" class="narrow input-inline"
+                              aria-labelledby="TableRowsLabel"/>
+                  <html:input id="TableColumnsInput" type="number" class="narrow input-inline"
+                              aria-labelledby="TableColumnsLabel"/>
                 </vbox>
               </hbox>
             </vbox>
             <vbox>
               <html:div class="grid-three-column">
                 <html:div class="flex-items-center">
-                  <label value="&tableHeight.label;" accesskey="&tableHeight.accessKey;"
-                         id="TableHeightLabel" control="TableHeightInput"/>
+                  <label id="TableHeightLabel" value="&tableHeight.label;"
+                         accesskey="&tableHeight.accessKey;" control="TableHeightInput"/>
                 </html:div>
                 <html:div>
-                  <textbox id="TableHeightInput" oninput="forceInteger(this.id);" style="width:3em;"/>
+                  <html:input id="TableHeightInput" type="number" class="narrow input-inline"
+                              aria-labelledby="TableHeightLabel"/>
                 </html:div>
                 <html:div class="flex-items-center">
                   <menulist id="TableHeightUnits"/>
                 </html:div>
                 <html:div class="flex-items-center">
-                  <label value="&tableWidth.label;" accesskey="&tableWidth.accessKey;" control="TableWidthInput"/>
+                  <label id="TableWidthLabel" value="&tableWidth.label;"
+                         accesskey="&tableWidth.accessKey;" control="TableWidthInput"/>
                 </html:div>
                 <html:div>
-                  <textbox id="TableWidthInput" oninput="forceInteger(this.id);" style="width:3em;"/>
+                  <html:input id="TableWidthInput" type="number" class="narrow input-inline"
+                              aria-labelledby="TableWidthLabel"/>
                 </html:div>
                 <html:div class="flex-items-center">
                   <menulist id="TableWidthUnits"/>
                 </html:div>
               </html:div>
             </vbox>
           </hbox>
         </groupbox>
         <groupbox>
           <hbox class="groupbox-title">
             <label class="header">&tableBorderSpacing.label;</label>
           </hbox>
           <hbox>
             <vbox>
               <hbox flex="1" align="center">
-                <label control="BorderWidthInput"
+                <label id="BorderWidthLabel"
+                       control="BorderWidthInput"
                        value="&tableBorderWidth.label;"
                        accesskey="&tableBorderWidth.accessKey;"/>
               </hbox>
               <hbox flex="1" align="center">
-                <label control="SpacingInput"
+                <label id="SpacingLabel"
+                       control="SpacingInput"
                        value="&tableSpacing.label;"
                        accesskey="&tableSpacing.accessKey;"/>
               </hbox>
               <hbox flex="1" align="center">
-                <label control="PaddingInput"
+                <label id="PaddingLabel"
+                       control="PaddingInput"
                        value="&tablePadding.label;"
                        accesskey="&tablePadding.accessKey;"/>
               </hbox>
             </vbox>
             <vbox>
-              <textbox class="narrow" id="BorderWidthInput" oninput="forceInteger(this.id);"/>
-              <textbox class="narrow" id="SpacingInput" oninput="forceInteger(this.id);"/>
-              <textbox class="narrow" id="PaddingInput" oninput="forceInteger(this.id);"/>
+              <html:input id="BorderWidthInput" type="number" class="narrow input-inline"
+                          aria-labelledby="BorderWidthLabel"/>
+              <html:input id="SpacingInput" type="number" class="narrow input-inline"
+                          aria-labelledby="SpacingLabel"/>
+              <html:input id="PaddingInput" type="number" class="narrow input-inline"
+                          aria-labelledby="PaddingLabel"/>
             </vbox>
             <vbox>
               <hbox flex="1" align="center">
                 <label align="left" value="&pixels.label;"/>
               </hbox>
               <hbox flex="1" align="center">
                 <label value="&tablePxBetwCells.label;"/>
               </hbox>
@@ -224,20 +240,22 @@
                 <hbox flex="1" align="center">
                   <checkbox id="CellHeightCheckbox" label="&tableHeight.label;" accesskey="&tableHeight.accessKey;"/>
                 </hbox>
                 <hbox flex="1" align="center">
                   <checkbox id="CellWidthCheckbox" label="&tableWidth.label;" accesskey="&tableWidth.accessKey;"/>
                 </hbox>
               </vbox>
               <vbox flex="1">
-                <textbox class="narrow" id="CellHeightInput"
-                         oninput="ChangeIntTextbox(this.id, 'CellHeightCheckbox');"/>
-                <textbox class="narrow" id="CellWidthInput"
-                         oninput="ChangeIntTextbox(this.id, 'CellWidthCheckbox');"/>
+                <html:input id="CellHeightInput" type="number" class="narrow input-inline"
+                            onchange="ChangeIntTextbox('CellHeightCheckbox');"
+                            aria-labelledby="CellHeightCheckbox"/>
+                <html:input id="CellWidthInput" type="number" class="narrow input-inline"
+                            onchange="ChangeIntTextbox('CellWidthCheckbox');"
+                            aria-labelledby="CellWidthCheckbox"/>
               </vbox>
               <vbox>
                 <hbox flex="1" align="center">
                   <menulist id="CellHeightUnits" oncommand="SetCheckbox('CellHeightCheckbox');"/>
                 </hbox>
                 <hbox flex="1" align="center">
                   <menulist id="CellWidthUnits" oncommand="SetCheckbox('CellWidthCheckbox');"/>
                 </hbox>