Bug 1580253 - remove grid usage from EdColorProps.xul. r=mkmelin
authorKhushil Mistry <khushil324@gmail.com>
Tue, 10 Sep 2019 22:17:00 +0200
changeset 27553 35e13c4b6c0dc181adbd22a37acd1c7a112bc172
parent 27552 3971431fe094db61e268f93635f0db68a4d8a902
child 27554 1ff6192e719fb411dcdf0ee832f8c7a88ef4849a
push id16390
push usermozilla@jorgk.com
push dateWed, 11 Sep 2019 22:10:17 +0000
treeherdercomm-central@821c6838bcd0 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmkmelin
bugs1580253
Bug 1580253 - remove grid usage from EdColorProps.xul. r=mkmelin
mail/components/compose/content/dialogs/EdColorProps.xul
mail/themes/linux/editor/EditorDialog.css
mail/themes/osx/editor/EditorDialog.css
mail/themes/windows/editor/EditorDialog.css
--- a/mail/components/compose/content/dialogs/EdColorProps.xul
+++ b/mail/components/compose/content/dialogs/EdColorProps.xul
@@ -33,61 +33,62 @@
       <radio id="DefaultColorsRadio" label="&defaultColorsRadio.label;" oncommand="UseDefaultColors()"
         accesskey="&defaultColorsRadio.accessKey;"
         tooltiptext="&defaultColorsRadio.tooltip;" />
       <radio id="CustomColorsRadio" label="&customColorsRadio.label;" oncommand="UseCustomColors()"
         accesskey="&customColorsRadio.accessKey;"
         tooltiptext="&customColorsRadio.tooltip;" />
     </radiogroup>
     <hbox class="indent">
-      <grid>
-        <columns><column/><column/></columns>
-        <rows>
-          <row align="center">
+      <hbox>
+        <vbox>
+          <hbox flex="1" align="center">
             <label id="Text" control="TextButton"
                    value="&normalText.label;&colon.character;"
                    accesskey="&normalText.accessKey;"/>
-            <button id="TextButton" class="color-button" oncommand="GetColorAndUpdate('textCW');">
-              <spacer id="textCW" class="color-well"/>
-            </button>
-          </row>
-          <row align="center">
-            <label id="Link" control="LinkButton"
+          </hbox>
+          <hbox flex="1" align="center">
+            <label id="Link" flex="1" control="LinkButton"
                    value="&linkText.label;&colon.character;"
                    accesskey="&linkText.accessKey;"/>
-            <button id="LinkButton" class="color-button" oncommand="GetColorAndUpdate('linkCW');">
-              <spacer id="linkCW" class="color-well"/>
-            </button>
-          </row>
-          <row align="center">
-            <label id="Active" control="ActiveLinkButton"
+          </hbox>
+          <hbox flex="1" align="center">
+            <label id="Active" flex="1" control="ActiveLinkButton"
                    value="&activeLinkText.label;&colon.character;"
                    accesskey="&activeLinkText.accessKey;"/>
-            <button id="ActiveLinkButton" class="color-button" oncommand="GetColorAndUpdate('activeCW');">
-              <spacer id="activeCW" class="color-well"/>
-            </button>
-          </row>
-          <row align="center">
-            <label id="Visited" control="VisitedLinkButton"
+          </hbox>
+          <hbox flex="1" align="center">
+            <label id="Visited" flex="1" control="VisitedLinkButton"
                    value="&visitedLinkText.label;&colon.character;"
                    accesskey="&visitedLinkText.accessKey;"/>
-            <button id="VisitedLinkButton" class="color-button" oncommand="GetColorAndUpdate('visitedCW');">
-              <spacer id="visitedCW" class="color-well"/>
-            </button>
-          </row>
-          <row align="center">
-            <label id="Background" control="BackgroundButton"
+          </hbox>
+          <hbox flex="1" align="center">
+            <label id="Background" flex="1" control="BackgroundButton"
                    value="&background.label;"
                    accesskey="&background.accessKey;"/>
-            <button id="BackgroundButton" class="color-button" oncommand="GetColorAndUpdate('backgroundCW');">
-              <spacer id="backgroundCW" class="color-well"/>
-            </button>
-          </row>
-        </rows>
-      </grid>
+          </hbox>
+        </vbox>
+        <vbox>
+          <button id="TextButton" class="color-button" oncommand="GetColorAndUpdate('textCW');">
+            <spacer id="textCW" class="color-well"/>
+          </button>
+          <button id="LinkButton" class="color-button" oncommand="GetColorAndUpdate('linkCW');">
+            <spacer id="linkCW" class="color-well"/>
+          </button>
+          <button id="ActiveLinkButton" class="color-button" oncommand="GetColorAndUpdate('activeCW');">
+            <spacer id="activeCW" class="color-well"/>
+          </button>
+          <button id="VisitedLinkButton" class="color-button" oncommand="GetColorAndUpdate('visitedCW');">
+            <spacer id="visitedCW" class="color-well"/>
+          </button>
+          <button id="BackgroundButton" class="color-button" oncommand="GetColorAndUpdate('backgroundCW');">
+            <spacer id="backgroundCW" class="color-well"/>
+          </button>
+        </vbox>
+      </hbox>
       <vbox id="ColorPreview" flex="1">
         <spacer flex="1"/>
         <label class="larger" id="NormalText"      value="&normalText.label;"/>
         <spacer flex="1"/>
         <label class="larger" id="LinkText"        value="&linkText.label;"/>
         <spacer flex="1"/>
         <label class="larger" id="ActiveLinkText"  value="&activeLinkText.label;"/>
         <spacer flex="1"/>
--- a/mail/themes/linux/editor/EditorDialog.css
+++ b/mail/themes/linux/editor/EditorDialog.css
@@ -59,29 +59,36 @@ groupbox {
   margin-top    : 6px;
   margin-bottom : 6px;
 }
 
 .color-well {
   width: 20px;
   height: 12px;
   border: 1px inset #CCCCCC;
+  margin: 1px 0px;
 }
 
 .color-well[default="true"] {
   border: 1px solid transparent;
   background-color: inherit;
 }
 
 .color-button {
   /* override large default min-width */
   min-width : 0px;
   margin: 2px;
 }
 
+button.color-button .button-text {
+  /* override default margin-inline-* */
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}
+
 .menu-list[focused="true"] {
   color: white;
 }
 
 *|*#ColorPicker {
   -moz-user-focus: normal;
   margin: 1px 5px 2px;
   padding: 3px;
--- a/mail/themes/osx/editor/EditorDialog.css
+++ b/mail/themes/osx/editor/EditorDialog.css
@@ -59,29 +59,36 @@ groupbox {
   margin-top    : 6px;
   margin-bottom : 6px;
 }
 
 .color-well {
   width: 20px;
   height: 12px;
   border: 1px inset #CCCCCC;
+  margin: 1px 0px;
 }
 
 .color-well[default="true"] {
   border: 1px solid transparent;
   background-color: inherit;
 }
 
 .color-button {
   /* override large default min-width */
   min-width : 0px;
   margin: 2px;
 }
 
+button.color-button .button-text {
+  /* override default margin-inline-* */
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}
+
 .menu-list[focused="true"] {
   color: white;
 }
 
 *|*#ColorPicker {
   -moz-user-focus: normal;
   margin: 1px 5px 2px;
   padding: 3px;
--- a/mail/themes/windows/editor/EditorDialog.css
+++ b/mail/themes/windows/editor/EditorDialog.css
@@ -66,29 +66,36 @@ groupbox > hbox > .header {
   margin-top    : 6px;
   margin-bottom : 6px;
 }
 
 .color-well {
   width: 20px;
   height: 12px;
   border: 1px inset #CCCCCC;
+  margin: 1px 0px;
 }
 
 .color-well[default="true"] {
   border: 1px solid transparent;
   background-color: inherit;
 }
 
 .color-button {
   /* override large default min-width */
   min-width : 0px;
   margin: 2px;
 }
 
+button.color-button .button-text {
+  /* override default margin-inline-* */
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}
+
 .menu-list[focused="true"] {
   color: white;
 }
 
 *|*#ColorPicker {
   -moz-user-focus: normal;
   margin: 1px 5px 2px;
   padding: 3px;