Bug 1582718 - remove grid usage from EdSpellCheck.xul. r=mkmelin
authorKhushil Mistry <khushil324@gmail.com>
Fri, 04 Oct 2019 13:45:00 +0200
changeset 37082 078fc8374bae796a4f2238c12f52e6d362b9ffe1
parent 37081 81233eef62edcad1e1f548e2165c33960070e3e2
child 37083 6b88366d415ec0bf89ff6125e683a4a61347ee0f
push id395
push userclokep@gmail.com
push dateMon, 02 Dec 2019 19:38:57 +0000
reviewersmkmelin
bugs1582718
Bug 1582718 - remove grid usage from EdSpellCheck.xul. r=mkmelin
mail/components/compose/content/dialogs/EdSpellCheck.xul
mail/themes/linux/editor/EditorDialog.css
mail/themes/osx/editor/EditorDialog.css
mail/themes/shared/mail/grid-layout.css
mail/themes/windows/editor/EditorDialog.css
--- a/mail/components/compose/content/dialogs/EdSpellCheck.xul
+++ b/mail/components/compose/content/dialogs/EdSpellCheck.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/input-fields.css" type="text/css"?>
+<?xml-stylesheet href="chrome://messenger/skin/shared/grid-layout.css" type="text/css"?>
 <!DOCTYPE dialog SYSTEM "chrome://messenger/locale/messengercompose/EditorSpellCheck.dtd">
 
 <!-- dialog containing a control requiring initial setup -->
 <dialog id="spellCheckDlg" buttons="cancel" title="&windowTitle.label;"
     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"
     persist="screenX screenY"
     onload="Startup()">
 
@@ -21,101 +22,107 @@
   <script src="chrome://messenger/content/messengercompose/EdDialogCommon.js"/>
   <script src="chrome://communicator/content/utilityOverlay.js"/>
   <script src="chrome://messenger/content/messengercompose/EdSpellCheck.js"/>
   <script src="chrome://global/content/contentAreaUtils.js"/>
 
   <stringbundle id="languageBundle" src="chrome://global/locale/languageNames.properties"/>
   <stringbundle id="regionBundle" src="chrome://global/locale/regionNames.properties"/>
 
-  <grid>
-    <columns>
-      <column class="spell-check"/>
-      <column class="spell-check" flex="1"/>
-      <column class="spell-check"/>
-    </columns>
-    <rows>
-      <row align="center">
-        <label id="MisspelledWordLabel" value="&misspelledWord.label;"/>
-        <label class="bold" id="MisspelledWord" crop="end"/>
-        <button class="spell-check" label="&recheckButton2.label;" oncommand="Recheck();"
-                accesskey="&recheckButton2.accessKey;"/>
-      </row>
-      <row align="center">
-        <label id="ReplaceWordLabel" value="&wordEditField.label;"
-               control="ReplaceWordInput"
-               accesskey="&wordEditField.accessKey;"/>
-        <hbox flex="1" class="input-container">
-          <html:input id="ReplaceWordInput" type="text"
-                      class="input-inline"
-                      onchange="ChangeReplaceWord()"
-                      aria-labelledby="ReplaceWordLabel"/>
-        </hbox>
-        <button id="CheckWord" oncommand="CheckWord()" label="&checkwordButton.label;"
-                accesskey="&checkwordButton.accessKey;"/>
-      </row>
-    </rows>
-  </grid>
+  <html:div class="grid-three-column-auto-x-auto">
+    <html:div class="flex-items-center">
+      <label id="MisspelledWordLabel" value="&misspelledWord.label;"/>
+    </html:div>
+    <html:div class="flex-items-center">
+      <label id="MisspelledWord" class="bold" crop="end"/>
+    </html:div>
+    <html:div class="flex-items-center">
+      <button class="spell-check" label="&recheckButton2.label;" oncommand="Recheck();"
+              accesskey="&recheckButton2.accessKey;"/>
+    </html:div>
+    <html:div class="flex-items-center">
+      <label id="ReplaceWordLabel" value="&wordEditField.label;"
+             control="ReplaceWordInput"
+             accesskey="&wordEditField.accessKey;"/>
+    </html:div>
+    <html:div>
+      <hbox flex="1" class="input-container">
+        <html:input id="ReplaceWordInput" type="text"
+                    class="input-inline"
+                    onchange="ChangeReplaceWord()"
+                    aria-labelledby="ReplaceWordLabel"/>
+      </hbox>
+    </html:div>
+    <html:div class="flex-items-center">
+      <button id="CheckWord" class="spell-check" oncommand="CheckWord()"
+              label="&checkwordButton.label;" accesskey="&checkwordButton.accessKey;"/>
+    </html:div>
+  </html:div>
   <label id="SuggestedListLabel" value="&suggestions.label;"
          control="SuggestedList"
          accesskey="&suggestions.accessKey;"/>
-  <grid flex="1">
-    <columns><column flex="1"/><column/></columns>
-    <rows>
-      <row flex="1">
-        <!-- BUG! setting class="MinWidth20em" on tree doesn't work (width=0) -->
-        <richlistbox id="SuggestedList"
-                     class="theme-listbox"
-                     onselect="SelectSuggestedWord()"
-                     ondblclick="if (gAllowSelectWord) { Replace(event.target.value); }"/>
+  <hbox flex="1" class="display-flex">
+  <html:div class="grid-two-column-x-auto flex-1">
+    <html:div class="display-flex">
+      <richlistbox id="SuggestedList"
+                   class="theme-listbox display-flex flex-1"
+                   onselect="SelectSuggestedWord()"
+                   ondblclick="if (gAllowSelectWord) { Replace(event.target.value); }"/>
+    </html:div>
+    <html:div>
+      <vbox>
         <vbox>
-          <grid>
-            <columns><column class="spell-check" flex="1"/><column class="spell-check" flex="1"/></columns>
-            <rows>
-              <row>
-                <button id="Replace" label="&replaceButton.label;"
-                        oncommand="Replace(gDialog.ReplaceWordInput.value);"
-                        accesskey="&replaceButton.accessKey;"/>
-                <button id="Ignore"  oncommand="Ignore();" label="&ignoreButton.label;"
-                        accesskey="&ignoreButton.accessKey;"/>
-              </row>
-              <row>
-                <button id="ReplaceAll" oncommand="ReplaceAll();" label="&replaceAllButton.label;"
-                        accesskey="&replaceAllButton.accessKey;"/>
-                <button id="IgnoreAll"  oncommand="IgnoreAll();" label="&ignoreAllButton.label;"
-                        accesskey="&ignoreAllButton.accessKey;"/>
-              </row>
-            </rows>
-          </grid>
-          <separator/>
-          <label value="&userDictionary.label;"/>
-          <hbox align="start">
-            <button class="spell-check" id="AddToDictionary" oncommand="AddToDictionary()" label="&addToUserDictionaryButton.label;"
-                    accesskey="&addToUserDictionaryButton.accessKey;"/>
-            <button class="spell-check" id="EditDictionary"  oncommand="EditDictionary()" label="&editUserDictionaryButton.label;"
-                    accesskey="&editUserDictionaryButton.accessKey;"/>
+          <hbox equalsize="always">
+            <button id="Replace" class="spell-check"
+                    label="&replaceButton.label;"
+                    oncommand="Replace(gDialog.ReplaceWordInput.value);"
+                    accesskey="&replaceButton.accessKey;"/>
+            <button id="Ignore" class="spell-check"
+                    oncommand="Ignore();" label="&ignoreButton.label;"
+                    accesskey="&ignoreButton.accessKey;"/>
+          </hbox>
+          <hbox equalsize="always">
+            <button id="ReplaceAll" class="spell-check"
+                    oncommand="ReplaceAll();" label="&replaceAllButton.label;"
+                    accesskey="&replaceAllButton.accessKey;"/>
+            <button id="IgnoreAll" class="spell-check"
+                    oncommand="IgnoreAll();" label="&ignoreAllButton.label;"
+                    accesskey="&ignoreAllButton.accessKey;"/>
           </hbox>
         </vbox>
-      </row>
+        <separator/>
+        <label value="&userDictionary.label;"/>
+        <hbox align="start">
+          <button id="AddToDictionary" class="spell-check" oncommand="AddToDictionary()" label="&addToUserDictionaryButton.label;"
+                  accesskey="&addToUserDictionaryButton.accessKey;"/>
+          <button id="EditDictionary" class="spell-check" oncommand="EditDictionary()" label="&editUserDictionaryButton.label;"
+                  accesskey="&editUserDictionaryButton.accessKey;"/>
+        </hbox>
+      </vbox>
+    </html:div>
+    <html:div class="grid-item-span-row">
       <label value ="&languagePopup.label;"
              control="LanguageMenulist"
              accesskey="&languagePopup.accessKey;"/>
-      <row>
-        <menulist id="LanguageMenulist" oncommand="SelectLanguage()">
-          <menupopup onpopupshowing="InitLanguageMenu(gDialog.LanguageMenulist.selectedItem.value);">
-            <!-- dynamic content populated by JS -->
-            <menuseparator/>
-            <menuitem value="more-cmd" label="&moreDictionaries.label;"/>
-          </menupopup>
-        </menulist>
-        <hbox flex="1">
-          <button class="spell-check" dlgtype="cancel" id="Stop" label="&stopButton.label;" oncommand="CancelSpellCheck();"
-                  accesskey="&stopButton.accessKey;"/>
-          <spacer flex="1"/>
-          <button class="spell-check" id="Close" label="&closeButton.label;" oncommand="onClose();"
-                  accesskey="&closeButton.accessKey;"/>
-          <button class="spell-check" id="Send" label="&sendButton.label;" oncommand="onClose();"
-                  accesskey="&sendButton.accessKey;" hidden="true"/>
-        </hbox>
-      </row>
-    </rows>
-  </grid>
+    </html:div>
+    <html:div class="display-flex">
+      <menulist id="LanguageMenulist" oncommand="SelectLanguage()" class="flex-1">
+        <menupopup onpopupshowing="InitLanguageMenu(gDialog.LanguageMenulist.selectedItem.value);">
+          <!-- dynamic content populated by JS -->
+          <menuseparator/>
+          <menuitem value="more-cmd" label="&moreDictionaries.label;"/>
+        </menupopup>
+      </menulist>
+    </html:div>
+    <html:div>
+      <hbox class="display-flex">
+        <button id="Stop" class="spell-check" dlgtype="cancel" label="&stopButton.label;" oncommand="CancelSpellCheck();"
+                accesskey="&stopButton.accessKey;"/>
+        <spacer class="flex-1"/>
+        <button id="Close" class="spell-check" label="&closeButton.label;" oncommand="onClose();"
+                accesskey="&closeButton.accessKey;"/>
+        <button id="Send" class="spell-check" label="&sendButton.label;" oncommand="onClose();"
+                accesskey="&sendButton.accessKey;" hidden="true"/>
+      </hbox>
+    </html:div>
+  </html:div>
+  </hbox>
 </dialog>
--- a/mail/themes/linux/editor/EditorDialog.css
+++ b/mail/themes/linux/editor/EditorDialog.css
@@ -171,25 +171,27 @@ tree.list {
 #NextButton[type="row"] {
   list-style-image: url("chrome://messenger/skin/icons/arrow/arrow-down.png");
 }
 
 /* ::::: spelling dialog ::::: */
 
 #MisspelledWord {
   font-weight: bold;
+  max-width: 16em;
+  text-overflow: ellipsis;
 }
 
 #ReplaceWordInput {
   min-width: 16em;
   width: 16em;
 }
 
 .spell-check {
-  min-width: 8em;
+  min-width: 8.5em;
 }
 
 /* ::::: color picker ::::: */
 
 /* use outset shape for a button look */
 .colorpicker {
   border: 1px outset #CCCCCC;
   /* This should be the same as for textbox */
@@ -306,8 +308,24 @@ groupbox {
   margin: 5px;
   padding: 5px;
 }
 
 html|table html|th {
   font-weight: normal;
   text-align: start;
 }
+
+.display-flex {
+  display: flex;
+}
+
+*|*.display-flex {
+  display: flex;
+}
+
+*|*.flex-1 {
+  flex: 1;
+}
+
+#SuggestedList {
+  flex-direction: column;
+}
--- a/mail/themes/osx/editor/EditorDialog.css
+++ b/mail/themes/osx/editor/EditorDialog.css
@@ -170,16 +170,18 @@ tree.list {
 #NextButton[type="row"] {
   list-style-image: url("chrome://messenger/skin/icons/arrow/arrow-down.png");
 }
 
 /* ::::: spelling dialog ::::: */
 
 #MisspelledWord {
   font-weight: bold;
+  max-width: 16em;
+  text-overflow: ellipsis;
 }
 
 #ReplaceWordInput {
   min-width: 16em;
   width: 16em;
 }
 
 .spell-check {
@@ -314,8 +316,20 @@ groupbox > .groupbox-title > .header {
   margin-bottom: 5px;
   margin-inline-start: -5px;
 }
 
 html|table html|th {
   font-weight: normal;
   text-align: start;
 }
+
+*|*.display-flex {
+  display: flex;
+}
+
+*|*.flex-1 {
+  flex: 1;
+}
+
+#SuggestedList {
+  flex-direction: column;
+}
--- a/mail/themes/shared/mail/grid-layout.css
+++ b/mail/themes/shared/mail/grid-layout.css
@@ -7,20 +7,29 @@
   grid-template-columns: auto auto;
 }
 
 .grid-three-column {
   display: inline-grid;
   grid-template-columns: auto auto auto;
 }
 
-.grid-two-column textbox,
+.grid-three-column-auto-x-auto {
+  display: inline-grid;
+  grid-template-columns: auto 1fr auto;
+}
+
+.grid-two-column-x-auto {
+  display: inline-grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: 1fr auto auto;
+}
+
 .grid-two-column menulist,
 .grid-two-column textarea,
-.grid-three-column textbox,
 .grid-three-column menulist,
 .grid-three-column textarea {
   width: 100%;
 }
 
 .flex-items-center {
   display: flex;
   align-items: center;
--- a/mail/themes/windows/editor/EditorDialog.css
+++ b/mail/themes/windows/editor/EditorDialog.css
@@ -183,16 +183,18 @@ tree.list {
 #NextButton > image {
   margin-inline-start: 3px;
 }
 
 /* ::::: spelling dialog ::::: */
 
 #MisspelledWord {
   font-weight: bold;
+  max-width: 16em;
+  text-overflow: ellipsis;
 }
 
 #ReplaceWordInput {
   min-width: 16em;
   width: 16em;
 }
 
 .spell-check {
@@ -338,8 +340,20 @@ groupbox > .groupbox-title > .header {
   padding-left: 3px;
   background-color: -moz-dialog;
 }
 
 html|table html|th {
   font-weight: normal;
   text-align: start;
 }
+
+*|*.display-flex {
+  display: flex;
+}
+
+*|*.flex-1 {
+  flex: 1;
+}
+
+#SuggestedList {
+  flex-direction: column;
+}