Bug 1612182 - Style the otr-button also for dark themes. r=aleca
authorRichard Marti <richard.marti@gmail.com>
Thu, 30 Jan 2020 22:15:32 +0200
changeset 38048 779c55ffd47b1ced2db5ba5397c4c42b9300ad47
parent 38047 8da7b1c071396ffd740a495f86817df41d23fc68
child 38049 857a1d5c45074840d913440bf8151d79198b98cf
push id398
push userclokep@gmail.com
push dateMon, 09 Mar 2020 19:10:28 +0000
reviewersaleca
bugs1612182
Bug 1612182 - Style the otr-button also for dark themes. r=aleca
chat/themes/otr.css
mail/components/im/content/chat-conversation-info.js
mail/themes/linux/mail/chat.css
mail/themes/linux/mail/messenger.css
mail/themes/osx/mail/messenger.css
mail/themes/windows/mail/messenger.css
--- a/chat/themes/otr.css
+++ b/chat/themes/otr.css
@@ -23,42 +23,51 @@
 .otr-finished > image {
   list-style-image: url("chrome://chat/skin/otr-connection-finished.svg");
 }
 
 .otr-private > image {
   list-style-image: url("chrome://chat/skin/otr-connection-encrypted.svg");
 }
 
-toolbarbutton.otr-button {
-  -moz-appearance: button !important;
+.otr-button {
+  -moz-appearance: none !important;
   padding: 1px !important;
+  border: 1px solid var(--toolbarbutton-hover-bordercolor);
+  border-radius: var(--toolbarbutton-border-radius);
+  background: var(--toolbarbutton-hover-background) !important;
+  box-shadow: var(--toolbarbutton-hover-boxshadow);
+  transition-property: background-color, border-color, box-shadow;
+  transition-duration: 150ms;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.otr-button:not([disabled="true"]):not([open="true"]):hover {
+  background: var(--toolbarbutton-active-background) !important;
+  border-color: var(--toolbarbutton-active-bordercolor);
+}
+
+.otr-button[open="true"] {
+  background: var(--toolbarbutton-active-background) !important;
+  border-color: var(--toolbarbutton-active-bordercolor);
+  box-shadow: var(--toolbarbutton-active-boxshadow);
 }
 
 .otr-button > image {
-  margin-inline-end: 3px;
+  margin-inline-end: 3px !important;
   width: 14px;
 }
 
 .otr-button .toolbarbutton-menu-dropmarker {
   -moz-appearance: none !important;
-  list-style-image: none;
+  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
   margin-left: 0;
   margin-right: 0;
   margin-inline-start: 3px;
-  width: 9px;
-}
-
-.otr-button .toolbarbutton-menu-dropmarker::part(icon) {
-  width: 17px;
-  height: 7px;
-  background-image: url("chrome://messenger/skin/icons/toolbarbutton-arrow.svg");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: 9px 7px;
 }
 
 /* otr botificationbox tweaks */
 
 #otr-notification-box notification[type="warning"] {
   background: #FFF2BE !important;
 }
 
--- a/mail/components/im/content/chat-conversation-info.js
+++ b/mail/components/im/content/chat-conversation-info.js
@@ -86,17 +86,17 @@
                 valign="middle"
                 hidden="true">
             <label class="otr-label"
                    crop="end"
                    data-l10n-id="state-label"
                    flex="1"/>
             <toolbarbutton id="otrButton"
                            mode="dialog"
-                           class="otr-button toolbarbutton-1"
+                           class="otr-button"
                            type="menu"
                            label="Insecure"
                            data-l10n-id="start-tooltip">
               <menupopup class="otr-menu-popup">
                 <menuitem class="otr-start" data-l10n-id="start-label"
                           oncommand='this.closest("chat-conversation-info").onOtrStartClicked();'/>
                 <menuitem class="otr-end" data-l10n-id="end-label"
                           oncommand='this.closest("chat-conversation-info").onOtrEndClicked();'/>
--- a/mail/themes/linux/mail/chat.css
+++ b/mail/themes/linux/mail/chat.css
@@ -85,8 +85,12 @@
   margin-bottom: 18px;
 }
 
 #setStatusTypeMenupopup .menu-iconic-icon,
 #imAccountsStatus .menu-iconic-icon,
 #appmenu_imAccountsStatus .menu-iconic-icon {
   visibility: visible;
 }
+
+.otr-button:hover {
+  color: inherit;
+}
--- a/mail/themes/linux/mail/messenger.css
+++ b/mail/themes/linux/mail/messenger.css
@@ -96,16 +96,17 @@ toolbar[brighttext] {
 .contentTabToolbox[brighttext],
 #header-view-toolbar[brighttext],
 #ab-toolbox > toolbar[brighttext],
 .mail-toolbox > toolbar[brighttext],
 #event-toolbox > toolbar[brighttext],
 #compose-toolbox > toolbar[brighttext],
 #headers-box > toolbar[brighttext],
 #FormatToolbox > toolbar[brighttext],
+:root[lwt-tree-brighttext] .otr-container,
 :root[lwt-tree-brighttext] #searchTerms {
   --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25));
   --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .5));
   --toolbarbutton-header-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25));
 
   --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4));
   --toolbarbutton-active-bordercolor: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .7));
   --toolbarbutton-active-boxshadow: 0 0 0 1px var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4)) inset;
--- a/mail/themes/osx/mail/messenger.css
+++ b/mail/themes/osx/mail/messenger.css
@@ -93,16 +93,17 @@ toolbar[brighttext] {
 }
 
 #FindToolbar:-moz-lwtheme,
 .contentTabToolbox:-moz-lwtheme,
 #ab-toolbox > toolbar:-moz-lwtheme,
 .mail-toolbox > toolbar:-moz-lwtheme,
 #compose-toolbox > toolbar:-moz-lwtheme,
 #navigation-toolbox > toolbar:-moz-lwtheme,
+:root[lwt-tree-brighttext] .otr-container,
 :root[lwt-tree-brighttext] #folderPane-toolbar {
   --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, hsla(0, 0%, 100%, .1));
   --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background, hsla(0, 0%, 0%, .2));
 
   --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, hsla(0, 0%, 0%, .02));
   --toolbarbutton-active-bordercolor: var(--lwt-toolbarbutton-active-background, hsla(0, 0%, 0%, .3));
   --toolbarbutton-active-boxshadow: 0 0 0 1px var(--lwt-toolbarbutton-active-background, hsla(0, 0%, 0%, .2)) inset;
 
@@ -409,23 +410,17 @@ toolbar:not([mode="icons"]) .toolbarbutt
 .toolbarbutton-1:-moz-window-inactive[disabled="true"] > .toolbarbutton-icon,
 .toolbarbutton-1:-moz-window-inactive[type="menu-button"]
   > .toolbarbutton-menubutton-button[disabled="true"] > .toolbarbutton-icon {
   opacity: .25;
 }
 
 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
-  list-style-image: url(chrome://messenger/skin/icons/toolbarbutton-arrow.svg);
-}
-
-.toolbarbutton-menu-dropmarker::part(icon),
-.toolbarbutton-menubutton-dropmarker::part(icon) {
-  width: 7px;
-  height: 5px;
+  list-style-image: url("chrome://global/skin/icons/arrow-dropdown-12.svg");
 }
 
 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
   margin-inline-end: 1px;
   padding-inline-start: 4px;
 }
 
 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
--- a/mail/themes/windows/mail/messenger.css
+++ b/mail/themes/windows/mail/messenger.css
@@ -120,16 +120,17 @@ toolbar[brighttext] {
 .toolbar[brighttext],
 .contentTabToolbox[brighttext],
 #header-view-toolbar[brighttext],
 #ab-toolbox > toolbar[brighttext],
 .mail-toolbox > toolbar[brighttext],
 #event-toolbox > toolbar[brighttext],
 #compose-toolbox > toolbar[brighttext],
 #navigation-toolbox > toolbar[brighttext],
+:root[lwt-tree-brighttext] .otr-container,
 :root[lwt-tree-brighttext] #searchTerms {
   --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25));
   --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .5));
   --toolbarbutton-header-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25));
 
   --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4));
   --toolbarbutton-active-bordercolor: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .7));
   --toolbarbutton-active-boxshadow: 0 0 0 1px var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4)) inset;