Bug 1563083 - replace <textbox> in EdAdvancedEdit.xul. r=mkmelin
authorKhushil Mistry <khushil324@gmail.com>
Sat, 28 Sep 2019 06:35:00 +0200
changeset 27798 d598510c62898551b2f36bf801407f1ff126c9e8
parent 27797 4235657c4c800a20e48596e9b7bceb888fb5bdbd
child 27799 294799e8fb78f58f33df298f152f6755904b6dfb
push id16491
push usermozilla@jorgk.com
push dateMon, 30 Sep 2019 22:00:09 +0000
treeherdercomm-central@294799e8fb78 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmkmelin
bugs1563083
Bug 1563083 - replace <textbox> in EdAdvancedEdit.xul. r=mkmelin
mail/components/compose/content/dialogs/EdAdvancedEdit.xul
--- a/mail/components/compose/content/dialogs/EdAdvancedEdit.xul
+++ b/mail/components/compose/content/dialogs/EdAdvancedEdit.xul
@@ -4,25 +4,28 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <!-- first checkin of the year 2000!      -->
 <!-- Ben Goodger, 12:50AM, 01/00/00 NZST  -->
 
 <?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/menulist.css" type="text/css"?>
+<?xml-stylesheet href="chrome://messenger/skin/input-fields.css" type="text/css"?>
 
 <!DOCTYPE dialog SYSTEM "chrome://messenger/locale/messengercompose/EdAdvancedEdit.dtd">
 
 <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"
-    id="advancedEditDlg"
-    style="width: 40em;"
-    title="&WindowTitle.label;"
-    onload="Startup()">
+        id="advancedEditDlg"
+        style="width: 40em;"
+        title="&WindowTitle.label;"
+        onload="Startup()">
 
+  <script src="chrome://global/content/globalOverlay.js"/>
+  <script src="chrome://global/content/editMenuOverlay.js"/>
   <!-- Methods common to all editor dialogs -->
   <script src="chrome://messenger/content/messengercompose/editorUtilities.js"/>
   <script src="chrome://messenger/content/messengercompose/EdDialogCommon.js"/>
   <!-- element page functions -->
   <script src="chrome://messenger/content/messengercompose/EdAEHTMLAttributes.js"/>
   <script src="chrome://messenger/content/messengercompose/EdAECSSAttributes.js"/>
   <script src="chrome://messenger/content/messengercompose/EdAEJSEAttributes.js"/>
   <script src="chrome://messenger/content/messengercompose/EdAEAttributes.js"/>
@@ -46,20 +49,20 @@
       <tab label="&tabJSE.label;" id="tabJSE"/>
     </tabs>
     <tabpanels flex="1">
       <!-- ============================================================== -->
       <!--                        HTML Attributes                         -->
       <!-- ============================================================== -->
       <vbox>
         <tree id="HTMLATree" class="AttributesTree" flex="1"
-          hidecolumnpicker="true" seltype="single"
-          onselect="onSelectHTMLTreeItem();"
-          onclick="onSelectHTMLTreeItem();"
-          ondblclick="editHTMLAttributeValue(event.target);">
+              hidecolumnpicker="true" seltype="single"
+              onselect="onSelectHTMLTreeItem();"
+              onclick="onSelectHTMLTreeItem();"
+              ondblclick="editHTMLAttributeValue(event.target);">
           <treecols>
             <treecol id="HTMLAttrCol" flex="35" label="&tree.attributeHeader.label;"/>
             <splitter class="tree-splitter"/>
             <treecol id="HTMLValCol" flex="65" label="&tree.valueHeader.label;"/>
           </treecols>
           <treechildren id="HTMLAList" class="gridlines" flex="1"/>
         </tree>
         <hbox align="center">
@@ -73,21 +76,24 @@
             <menulist is="menulist-editable" id="AddHTMLAttributeNameInput"
                       class="editorAdvancedEditableMenulist"
                       editable="true" flex="1"
                       style="margin:5px 2px 3px;"
                       oninput="onInputHTMLAttributeName();"
                       oncommand="onInputHTMLAttributeName();"/>
           </vbox>
           <vbox flex="1">
-            <label control="AddHTMLAttributeValueInput" value="&AttValue.label;"/>
+            <label id="AddHTMLAttributeValueLabel" control="AddHTMLAttributeValueInput"
+                   value="&AttValue.label;"/>
             <deck id="AddHTMLAttributeValueDeck" selectedIndex="0">
-              <hbox flex="1">
-                <textbox id="AddHTMLAttributeValueTextbox" flex="1"
-                         oninput="onInputHTMLAttributeValue();"/>
+              <hbox flex="1" class="input-container">
+                <html:input id="AddHTMLAttributeValueTextbox" type="text"
+                            class="input-inline"
+                            onchange="onInputHTMLAttributeValue();"
+                            aria-labelledby="AddHTMLAttributeValueLabel"/>
               </hbox>
               <hbox flex="1">
                 <menulist is="menulist-editable" id="AddHTMLAttributeValueMenulist"
                           editable="true" flex="1"
                           style="margin:5px 2px 3px;"
                           oninput="onInputHTMLAttributeValue();"
                           oncommand="onInputHTMLAttributeValue();"/>
               </hbox>
@@ -95,54 +101,58 @@
           </vbox>
         </hbox>
       </vbox>
       <!-- ============================================================== -->
       <!--                         CSS Attributes                         -->
       <!-- ============================================================== -->
       <vbox>
         <tree id="CSSATree" class="AttributesTree" flex="1"
-          hidecolumnpicker="true" seltype="single"
-          onselect="onSelectCSSTreeItem();"
-          onclick="onSelectCSSTreeItem();"
-          ondblclick="editCSSAttributeValue(event.target);">
+              hidecolumnpicker="true" seltype="single"
+              onselect="onSelectCSSTreeItem();"
+              onclick="onSelectCSSTreeItem();"
+              ondblclick="editCSSAttributeValue(event.target);">
           <treecols>
             <treecol id="CSSPropCol" flex="35" label="&tree.propertyHeader.label;"/>
             <splitter class="tree-splitter"/>
             <treecol id="CSSValCol" flex="65" label="&tree.valueHeader.label;"/>
           </treecols>
           <treechildren id="CSSAList" class="gridlines" flex="1"/>
         </tree>
         <hbox align="center">
           <label value="&editAttribute.label;"/>
           <spacer flex="1"/>
           <button label="&removeAttribute.label;" oncommand="RemoveCSSAttribute();"/>
         </hbox>
         <hbox>
           <vbox flex="1">
-            <label value="&PropertyName.label;"/>
-            <textbox id="AddCSSAttributeNameInput" flex="1"
-                     oninput="onInputCSSAttributeName();"/>
+            <label id="AddCSSAttributeNameLabel" value="&PropertyName.label;"/>
+            <html:input id="AddCSSAttributeNameInput" type="text"
+                        class="input-inline"
+                        onchange="onInputCSSAttributeName();"
+                        aria-labelledby="AddCSSAttributeNameLabel"/>
           </vbox>
           <vbox flex="1">
-            <label value="&AttValue.label;"/>
-            <textbox id="AddCSSAttributeValueInput" flex="1"
-                     oninput="onChangeCSSAttribute();"/>
+            <label id="AddCSSAttributeValueLabel" value="&AttValue.label;"/>
+            <html:input id="AddCSSAttributeValueInput" type="text"
+                        class="input-inline"
+                        onchange="onChangeCSSAttribute();"
+                        aria-labelledby="AddCSSAttributeValueLabel"/>
           </vbox>
         </hbox>
       </vbox>
       <!-- ============================================================== -->
       <!--                    JavaScript Event Handlers                   -->
       <!-- ============================================================== -->
       <vbox>
         <tree id="JSEATree" class="AttributesTree" flex="1"
-          hidecolumnpicker="true" seltype="single"
-          onselect="onSelectJSETreeItem();"
-          onclick="onSelectJSETreeItem();"
-          ondblclick="editJSEAttributeValue(event.target);">
+              hidecolumnpicker="true" seltype="single"
+              onselect="onSelectJSETreeItem();"
+              onclick="onSelectJSETreeItem();"
+              ondblclick="editJSEAttributeValue(event.target);">
           <treecols>
             <treecol id="AttrCol" flex="35" label="&tree.attributeHeader.label;"/>
             <splitter class="tree-splitter"/>
             <treecol id="HeaderCol" flex="65" label="&tree.valueHeader.label;"/>
           </treecols>
           <treechildren id="JSEAList" class="gridlines" flex="1"/>
         </tree>
         <hbox align="center">
@@ -152,17 +162,19 @@
         </hbox>
         <hbox>
           <vbox flex="1">
             <label value="&AttName.label;"/>
             <menulist id="AddJSEAttributeNameList"
                       oncommand="onSelectJSEAttribute();"/>
           </vbox>
           <vbox flex="1">
-            <label value="&AttValue.label;"/>
-            <textbox id="AddJSEAttributeValueInput"
-                     oninput="onInputJSEAttributeValue();"/>
+            <label id="AddJSEAttributeValueLabel" value="&AttValue.label;"/>
+            <html:input id="AddJSEAttributeValueInput" type="text"
+                        class="input-inline"
+                        onchange="onInputJSEAttributeValue();"
+                        aria-labelledby="AddJSEAttributeValueLabel"/>
           </vbox>
         </hbox>
       </vbox>
     </tabpanels>
   </tabbox>
 </dialog>