Bug 1535960 - Style the cloudfile richlistitem editable text correctly. r+a=jorgk
authorRichard Marti <richard.marti@gmail.com>
Sun, 17 Mar 2019 20:24:30 +0100
changeset 33958 cb8478a06fed374e1ea30d5fc28739032a0f0c6b
parent 33957 39f40f151c57babdd70fdc3c7497d3bdcc720a78
child 33959 46d97a666b3bb953f4488d44b6f1d58a2bc2d745
push id2392
push usermozilla@jorgk.com
push dateSat, 23 Mar 2019 18:54:09 +0000
treeherdercomm-beta@8a987f6e6350 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1535960
Bug 1535960 - Style the cloudfile richlistitem editable text correctly. r+a=jorgk
mail/components/preferences/applications.js
mail/themes/linux/mail/preferences/applications.css
mail/themes/osx/mail/preferences/applications.css
mail/themes/shared/mail/incontentprefs/aboutPreferences.css
mail/themes/windows/mail/preferences/applications.css
--- a/mail/components/preferences/applications.js
+++ b/mail/components/preferences/applications.js
@@ -611,17 +611,17 @@ var gCloudFileTab = {
         button.remove();
       }
     }
   },
 
   makeRichListItemForAccount(aAccount) {
     let rli = document.createElement("richlistitem");
     rli.value = aAccount.accountKey;
-    rli.setAttribute("align", "baseline");
+    rli.setAttribute("align", "center");
     rli.setAttribute("class", "cloudfileAccount");
     rli.setAttribute("value", aAccount.accountKey);
 
     if (aAccount.iconURL)
       rli.style.listStyleImage = "url('" + aAccount.iconURL + "')";
 
     let icon = document.createElement("image");
     icon.setAttribute("class", "typeIcon");
--- a/mail/themes/linux/mail/preferences/applications.css
+++ b/mail/themes/linux/mail/preferences/applications.css
@@ -10,24 +10,22 @@
  */
 .actionsMenu {
   margin-top: -1px;
   margin-bottom: -1px;
   margin-inline-start: -1px;
   margin-inline-end: 0;
 }
 
-.typeIcon,
 .actionIcon {
-  margin: 0px 3px;
+  margin: 0 3px;
 }
 
-#handlersView richlistitem label {
-  margin-inline-start: 1px;
-  margin-top: 2px;
+richlistitem {
+  min-height: 35px;
 }
 
 richlistitem[appHandlerIcon="ask"],
 menuitem[appHandlerIcon="ask"] {
   list-style-image: url("chrome://messenger/skin/preferences/alwaysAsk.png");
 }
 
 richlistitem[appHandlerIcon="save"],
@@ -55,39 +53,38 @@ menuitem[appHandlerIcon="save"] {
  */
 .cloudfileAccount {
   padding: 4px;
 }
 
 .cloudfileAccount .typeIcon {
   height: 16px;
   width: 16px;
-  margin-top: 3px;
-  margin-bottom: 3px;
 }
 
 .cloudfileAccount > label {
-  /* This label needs to be the same height as the textbox. */
-  margin-top: 3px;
-  margin-bottom: 4px;
+  margin-inline-start: 1px;
+  margin-top: initial;
+  margin-bottom: initial;
 }
+
 .cloudfileAccount:not([selected]) > label {
   pointer-events: none;
 }
 
 .cloudfileAccount > textbox {
   color: -moz-fieldtext !important;
   min-height: unset;
   margin: 0;
-  padding-inline: 4px;
+  padding-inline-start: 4px;
 }
 
 #authMessage {
   text-align: center;
-  padding: 0px 80px;
+  padding: 0 80px;
 }
 
 #authImage {
   list-style-image: url("chrome://messenger/skin/preferences/auth-error.png");
   width: 200px;
   height: 200px;
 }
 
@@ -95,8 +92,14 @@ menuitem[appHandlerIcon="save"] {
   margin-bottom: 15px;
 }
 
 #cloudFileLoadingSpinner {
   width: 16px;
   height: 16px;
   list-style-image: url("chrome://global/skin/icons/loading.png");
 }
+
+@media (min-resolution: 1.1dppx) {
+  #cloudFileLoadingSpinner {
+    list-style-image: url("chrome://global/skin/icons/loading@2x.png");
+  }
+}
--- a/mail/themes/osx/mail/preferences/applications.css
+++ b/mail/themes/osx/mail/preferences/applications.css
@@ -9,28 +9,22 @@
  * Also make sure the labels are the same distance away from the icons.
  */
 .actionsMenu {
   margin-inline-start: -2px;
   margin-top: 0;
   margin-bottom: -1px;
 }
 
-.typeIcon,
 .actionIcon {
-  margin: 0px 3px;
-}
-
-richlistitem label {
-  margin-inline-start: 1px;
-  margin-top: 2px;
+  margin: 0 3px;
 }
 
 richlistitem {
-  min-height: 22px;
+  min-height: 35px;
 }
 
 richlistitem[appHandlerIcon="ask"],
 menuitem[appHandlerIcon="ask"] {
   list-style-image: url("chrome://messenger/skin/preferences/alwaysAsk.png");
 }
 
 richlistitem[appHandlerIcon="save"],
@@ -53,33 +47,31 @@ menuitem[appHandlerIcon="save"] {
 
 .cloudfileAccount description{
   padding-left: 3px;
 }
 
 /**
  * Used by the outgoing attachment manager
  */
-.cloudfileAccount[state="connecting"],
-.cloudfileAccount[state="waiting-to-connect"] {
-  list-style-image: url("chrome://global/skin/icons/loading.png") !important;
-}
-
-.cloudfileAccount[state="auth-error"],
-.cloudfileAccount[state="no-connection"] {
-  list-style-image: url("chrome://global/skin/icons/error.svg") !important;
-  -moz-context-properties: fill;
-  fill: #d70022;
-}
 
 .cloudfileAccount .typeIcon {
   max-height: 16px;
   max-width: 16px;
-  margin-top: 3px;
-  margin-bottom: 3px;
+  margin-inline-end: 5px;
+}
+
+.cloudfileAccount:not([selected]) > label {
+  pointer-events: none;
+}
+
+.cloudfileAccount > textbox {
+  min-height: unset;
+  margin: 0;
+  padding-inline-start: 4px;
 }
 
 #authMessage {
   text-align: center;
   padding: 0px 80px;
 }
 
 #authImage {
@@ -94,14 +86,12 @@ menuitem[appHandlerIcon="save"] {
 
 #cloudFileLoadingSpinner {
   width: 16px;
   height: 16px;
   list-style-image: url("chrome://global/skin/icons/loading.png");
 }
 
 @media (min-resolution: 2dppx) {
-  .cloudfileAccount[state="connecting"],
-  .cloudfileAccount[state="waiting-to-connect"],
-  #cloudFileLoadingSpinner  {
-    list-style-image: url("chrome://global/skin/icons/loading@2x.png") !important;
+  #cloudFileLoadingSpinner {
+    list-style-image: url("chrome://global/skin/icons/loading@2x.png");
   }
 }
--- a/mail/themes/shared/mail/incontentprefs/aboutPreferences.css
+++ b/mail/themes/shared/mail/incontentprefs/aboutPreferences.css
@@ -290,23 +290,23 @@ tab:-moz-focusring > .tab-middle {
   opacity: 0.5;
 }
 
 #handlersView richlistitem[selected="true"] .shortDetails {
   color: inherit;
 }
 
 .typeIcon {
-  margin-inline-start: 10px !important;
-  margin-inline-end: 9px !important;
+  margin-inline-start: 10px;
+  margin-inline-end: 9px;
 }
 
 .actionIcon {
-  margin-inline-start: 11px !important;
-  margin-inline-end: 8px !important;
+  margin-inline-start: 11px;
+  margin-inline-end: 8px;
 }
 
 .actionsMenu {
   min-height: 36px;
 }
 
 .actionsMenu > menupopup > menuitem {
   padding-inline-start: 10px !important;
--- a/mail/themes/windows/mail/preferences/applications.css
+++ b/mail/themes/windows/mail/preferences/applications.css
@@ -10,28 +10,22 @@
  */
 .actionsMenu {
   margin-top: 0;
   margin-bottom: 0;
   margin-inline-start: -2px;
   margin-inline-end: 0;
 }
 
-.typeIcon,
 .actionIcon {
-  margin: 0px 3px;
-}
-
-richlistitem label {
-  margin-inline-start: 1px;
-  margin-top: 2px;
+  margin: 0 3px;
 }
 
 richlistitem {
-  min-height: 22px;
+  min-height: 35px;
 }
 
 richlistitem[appHandlerIcon="ask"],
 menuitem[appHandlerIcon="ask"] {
   list-style-image: url("chrome://messenger/skin/preferences/alwaysAsk.png");
 }
 
 richlistitem[appHandlerIcon="save"],
@@ -51,38 +45,38 @@ menuitem[appHandlerIcon="save"] {
 .actionsMenu > menupopup > menuitem {
   padding-inline-start: 4px;
 }
 
 /**
  * Used by the outgoing attachment manager
  */
 
-.cloudfileAccount[state="connecting"],
-.cloudfileAccount[state="waiting-to-connect"] {
-  list-style-image: url("chrome://global/skin/icons/loading.png") !important;
-}
-
-.cloudfileAccount[state="auth-error"],
-.cloudfileAccount[state="no-connection"] {
-  list-style-image: url("chrome://global/skin/icons/error.svg") !important;
-  -moz-context-properties: fill;
-  fill: #d70022;
-}
-
 .cloudfileAccount .typeIcon {
   max-height: 16px;
   max-width: 16px;
-  margin-top: 3px;
-  margin-bottom: 3px;
+}
+
+.cloudfileAccount > label {
+  margin-top: initial;
+  margin-bottom: initial;
+}
+.cloudfileAccount:not([selected]) > label {
+  pointer-events: none;
+}
+
+.cloudfileAccount > textbox {
+  min-height: unset;
+  margin: 0;
+  padding-inline-start: 4px;
 }
 
 #authMessage {
   text-align: center;
-  padding: 0px 80px;
+  padding: 0 80px;
 }
 
 #authImage {
   list-style-image: url("chrome://messenger/skin/preferences/auth-error.png");
   width: 150px;
   height: 150px;
 }
 
@@ -90,8 +84,14 @@ menuitem[appHandlerIcon="save"] {
   padding-bottom: 6px;
 }
 
 #cloudFileLoadingSpinner {
   width: 16px;
   height: 16px;
   list-style-image: url("chrome://global/skin/icons/loading.png");
 }
+
+@media (min-resolution: 1.1dppx) {
+  #cloudFileLoadingSpinner {
+    list-style-image: url("chrome://global/skin/icons/loading@2x.png");
+  }
+}