Bug 1499916 - Style URLbar/box in webpage content tabs like the main toolbar when LW-themes are applied. r=jorgk
authorRichard Marti <richard.marti@gmail.com>
Thu, 18 Oct 2018 15:12:06 +0200
changeset 33402 9d49d405053c69bb9e10b3f32189bf205ab118cb
parent 33401 e39155f745e44ce4ccb5f582db8dc68a346e1513
child 33403 1c5d8e0a6c27debe071f9bb7cd2e5b8a2084dce5
push id387
push userclokep@gmail.com
push dateMon, 10 Dec 2018 21:30:47 +0000
reviewersjorgk
bugs1499916
Bug 1499916 - Style URLbar/box in webpage content tabs like the main toolbar when LW-themes are applied. r=jorgk
mail/base/content/messenger.xul
mail/themes/linux/mail/messenger.css
mail/themes/linux/mail/searchBox.css
mail/themes/osx/mail/messenger.css
mail/themes/osx/mail/searchBox.css
mail/themes/shared/mail/tabmail.css
mail/themes/windows/mail/messenger.css
mail/themes/windows/mail/searchBox.css
--- a/mail/base/content/messenger.xul
+++ b/mail/base/content/messenger.xul
@@ -664,17 +664,17 @@
      </tabbox>
     </tabmail>
     <vbox id="contentTab" collapsed="true">
       <vbox flex="1" class="contentTabInstance">
         <toolbox id="dummycontenttoolbox" class="contentTabToolbox">
           <toolbar id="dummycontenttoolbar" class="contentTabToolbar">
             <toolbarspacer/>
             <toolbaritem class="contentTabAddress" align="center">
-              <hbox class="searchBox" align="center">
+              <hbox class="themeableSearchBox searchBox" align="center">
                 <image class="contentTabSecurity"/>
                 <description class="contentTabUrlbar"/>
               </hbox>
             </toolbaritem>
           </toolbar>
         </toolbox>
         <notificationbox flex="1" notificationside="top">
           <browser id="dummycontentbrowser" type="content" flex="1"
--- a/mail/themes/linux/mail/messenger.css
+++ b/mail/themes/linux/mail/messenger.css
@@ -57,16 +57,17 @@
   --arrowpanel-dimmed: rgba(249, 249, 250, .1);
   --arrowpanel-dimmed-further: rgba(249, 249, 250, .15);
 }
 
 toolbar[brighttext] {
   --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, #45a1ff);
 }
 
+.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] #folderPane-toolbar {
@@ -78,16 +79,17 @@ toolbar[brighttext] {
   --toolbarbutton-active-background: rgba(255, 255, 255, .4);
   --toolbarbutton-active-bordercolor: rgba(255, 255, 255, .7);
   --toolbarbutton-active-boxshadow: 0 0 0 1px rgba(255, 255, 255, .4) inset;
 
   --toolbarbutton-checkedhover-backgroundcolor: rgba(255, 255, 255, .5);
 }
 
 #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 {
   --toolbarbutton-text-color: currentColor;
   --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25));
   --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(0, 0, 0, .2));
 
@@ -193,22 +195,23 @@ toolbar[brighttext] {
     }
   }
 
   :root[tabsintitlebar] .titlebar-placeholder[type="caption-buttons"] {
     margin-inline-start: 10px;
   }
 }
 
-toolbar:not(.inline-toolbar):not(:-moz-lwtheme) {
+toolbar:not(.inline-toolbar):not(.contentTabToolbar):not(:-moz-lwtheme) {
   -moz-appearance: menubar;
   color: -moz-menubartext;
 }
 
-.inline-toolbar {
+.inline-toolbar,
+.contentTabToolbar {
   -moz-appearance: none;
   min-height: 0;
   padding: 0;
 }
 
 .inline-toolbar toolbarseparator {
   height: 28px;
 }
@@ -768,16 +771,21 @@ button[type="menu-button"] {
 .button-menubutton-dropmarker {
   margin-inline-end: 3px;
 }
 
 .contentTabInstance {
   background-color: -moz-dialog;
 }
 
+.contentTabInstance:-moz-lwtheme {
+  background-color: transparent;
+  background-image: linear-gradient(transparent 40px, -moz-dialog 40px);
+}
+
 .contentTabInstance > findbar {
   background-color: -moz-dialog;
   color: -moz-DialogText;
   text-shadow: none;
 }
 
 .contentTabInstance > findbar:-moz-lwtheme {
   background-color: var(--toolbar-bgcolor);
--- a/mail/themes/linux/mail/searchBox.css
+++ b/mail/themes/linux/mail/searchBox.css
@@ -79,37 +79,41 @@ textbox:not([searchbutton]) > .textbox-i
 #unifinder-task-edit-field[focused="true"]  {
   border-color: Highlight;
 }
 
 /* special treatment because these boxes are on themable toolbars */
 #searchInput:-moz-lwtheme,
 #IMSearchInput:-moz-lwtheme,
 #peopleSearchInput:-moz-lwtheme,
+.themeableSearchBox:-moz-lwtheme,
 .remote-gloda-search:-moz-lwtheme {
   background-color: var(--lwt-toolbar-field-background-color, hsla(0,0%,100%,.8));
   color: var(--lwt-toolbar-field-color, black);
 }
 
 #searchInput:not([focused="true"]):-moz-lwtheme,
 #IMSearchInput:not([focused="true"]):-moz-lwtheme,
 #peopleSearchInput:not([focused="true"]):-moz-lwtheme,
+.themeableSearchBox:not([focused="true"]):-moz-lwtheme,
 .remote-gloda-search:not([focused="true"]):-moz-lwtheme {
   border-color: var(--lwt-toolbar-field-border-color, hsla(240,5%,5%,.25));
 }
 #searchInput:-moz-lwtheme:hover,
 #IMSearchInput:-moz-lwtheme:hover,
 #peopleSearchInput:-moz-lwtheme:hover,
+.themeableSearchBox:-moz-lwtheme:hover,
 .remote-gloda-search:-moz-lwtheme:hover {
   background-color: var(--lwt-toolbar-field-background-color, white);
 }
 
 #searchInput:-moz-lwtheme[focused="true"],
 #IMSearchInput:-moz-lwtheme[focused="true"],
 #peopleSearchInput:-moz-lwtheme[focused="true"],
+.themeableSearchBox:-moz-lwtheme[focused="true"],
 .remote-gloda-search:-moz-lwtheme[focused="true"] {
   background-color: var(--lwt-toolbar-field-focus, var(--lwt-toolbar-field-background-color, white));
   color: var(--lwt-toolbar-field-focus-color, var(--lwt-toolbar-field-color, black));
   border-color: var(--toolbar-field-focus-border-color);
 }
 
 #PopupGlodaAutocomplete {
   margin-top: -1px;
--- a/mail/themes/osx/mail/messenger.css
+++ b/mail/themes/osx/mail/messenger.css
@@ -67,16 +67,17 @@
   --arrowpanel-dimmed-further: rgba(249, 249, 250, .15);
 }
 
 toolbar[brighttext] {
   --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, #45a1ff);
 }
 
 #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] #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));
 
@@ -109,17 +110,18 @@ toolbar[brighttext] {
     --toolbox-border-bottom-color: hsl(0, 0%, 68%);
   }
   :root:not(:-moz-lwtheme):-moz-window-inactive {
     --tabs-border-color: rgba(0,0,0,.05);
     --toolbox-border-bottom-color: hsl(0, 0%, 85%);
   }
 }
 
-.inline-toolbar {
+.inline-toolbar,
+.contentTabToolbar {
   -moz-appearance: none;
   min-width: 50px;
   min-height: 14px;
 }
 
 .inline-toolbar toolbarseparator {
   height: 20px;
   margin-top: 2px;
@@ -708,20 +710,29 @@ statusbar:-moz-lwtheme-brighttext {
   border-top-left-radius: .3em;
   margin-left: 1em;
 }
 
 .contentTabInstance {
   background-color: -moz-dialog;
 }
 
+.contentTabInstance:-moz-lwtheme {
+  background-color: transparent;
+  background-image: linear-gradient(transparent 40px, -moz-dialog 40px);
+}
+
 .contentTabInstance > findbar {
   background: linear-gradient(#e8e8e8, #d0d0d0) repeat-x;
   border-top: 1px solid #888;
   color: -moz-DialogText;
   text-shadow: none;
 }
 
 .contentTabInstance > findbar:-moz-lwtheme {
   background-color: var(--toolbar-bgcolor);
   background-image: none;
   color: var(--toolbar-color, -moz-DialogText);
 }
+
+.contentTabAddress * {
+  text-shadow: none;
+}
--- a/mail/themes/osx/mail/searchBox.css
+++ b/mail/themes/osx/mail/searchBox.css
@@ -39,38 +39,42 @@
 #IMSearchInput,
 #peopleSearchInput {
   margin-top: 2px;
   margin-bottom: 3px;
 }
 #searchInput:-moz-lwtheme,
 #IMSearchInput:-moz-lwtheme,
 #peopleSearchInput:-moz-lwtheme,
+.themeableSearchBox:-moz-lwtheme,
 .remote-gloda-search:-moz-lwtheme {
   background-color: var(--lwt-toolbar-field-background-color, hsla(0,0%,100%,.8));
   color: var(--lwt-toolbar-field-color, black);
 }
 
 #searchInput:not([focused="true"]):-moz-lwtheme,
 #IMSearchInput:not([focused="true"]):-moz-lwtheme,
 #peopleSearchInput:not([focused="true"]):-moz-lwtheme,
+.themeableSearchBox:not([focused="true"]):-moz-lwtheme,
 .remote-gloda-search:not([focused="true"]):-moz-lwtheme {
   border-color: var(--lwt-toolbar-field-border-color, hsla(240,5%,5%,.25));
 }
 
 #searchInput:-moz-lwtheme:hover,
 #IMSearchInput:-moz-lwtheme:hover,
 #peopleSearchInput:-moz-lwtheme:hover,
+.themeableSearchBox:-moz-lwtheme:hover,
 .remote-gloda-search:-moz-lwtheme:hover {
   background-color: var(--lwt-toolbar-field-background-color, white);
 }
 
 #searchInput:-moz-lwtheme[focused="true"],
 #IMSearchInput:-moz-lwtheme[focused="true"],
 #peopleSearchInput:-moz-lwtheme[focused="true"],
+.themeableSearchBox:-moz-lwtheme[focused="true"],
 .remote-gloda-search:-moz-lwtheme[focused="true"] {
   background-color: var(--lwt-toolbar-field-focus, var(--lwt-toolbar-field-background-color, white));
   color: var(--lwt-toolbar-field-focus-color, var(--lwt-toolbar-field-color, black));
   border-color: var(--toolbar-field-focus-border-color);
   box-shadow: 0 0 0 1px var(--toolbar-field-focus-border-color) inset,
               0 0 0 1px var(--toolbar-field-focus-border-color);
 }
 
--- a/mail/themes/shared/mail/tabmail.css
+++ b/mail/themes/shared/mail/tabmail.css
@@ -366,11 +366,15 @@
   background-image: url("chrome://messenger/skin/icons/insecure.png");
 }
 
 .contentTabSecurity[loading="true"] {
   background-image: url("chrome://global/skin/icons/loading.png");
   background-position: 4px 2px;
 }
 
+.contentTabAddress * {
+  -moz-user-select: text;
+}
+
 .contentTabUrlbar {
   margin: 0;
 }
--- a/mail/themes/windows/mail/messenger.css
+++ b/mail/themes/windows/mail/messenger.css
@@ -76,16 +76,17 @@
   --arrowpanel-dimmed: rgba(249, 249, 250, .1);
   --arrowpanel-dimmed-further: rgba(249, 249, 250, .15);
 }
 
 toolbar[brighttext] {
   --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, #45a1ff);
 }
 
+.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] #folderPane-toolbar {
   --toolbarbutton-hover-background: rgba(255, 255, 255, .25);
@@ -95,16 +96,17 @@ toolbar[brighttext] {
   --toolbarbutton-active-background: rgba(255, 255, 255, .4);
   --toolbarbutton-active-bordercolor: rgba(255, 255, 255, .7);
   --toolbarbutton-active-boxshadow: 0 0 0 1px rgba(255, 255, 255, .4) inset;
 
   --toolbarbutton-checkedhover-backgroundcolor: rgba(255, 255, 255, .5);
 }
 
 #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 {
   --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, rgba(0, 0, 0, .1));
   --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(0, 0, 0, .1));
 
   --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, rgba(0, 0, 0, .15));
@@ -818,16 +820,21 @@ statusbarpanel label {
   */
   margin-left: 1em;
 }
 
 .contentTabInstance {
   background-color: -moz-dialog;
 }
 
+.contentTabInstance:-moz-lwtheme {
+  background-color: transparent;
+  background-image: linear-gradient(transparent 40px, -moz-dialog 40px);
+}
+
 .contentTabInstance > findbar {
   background-color: -moz-dialog;
   color: -moz-DialogText;
   text-shadow: none;
 }
 
 .contentTabInstance > findbar:-moz-lwtheme {
   background-color: var(--toolbar-bgcolor);
--- a/mail/themes/windows/mail/searchBox.css
+++ b/mail/themes/windows/mail/searchBox.css
@@ -122,38 +122,42 @@ textbox:not([searchbutton]) > .textbox-i
 #peopleSearchInput,
 .remote-gloda-search {
   min-height: 26px;
 }
 
 #searchInput:-moz-lwtheme,
 #IMSearchInput:-moz-lwtheme,
 #peopleSearchInput:-moz-lwtheme,
+.themeableSearchBox:-moz-lwtheme,
 .remote-gloda-search:-moz-lwtheme {
   background-color: var(--lwt-toolbar-field-background-color, hsla(0,0%,100%,.8));
   color: var(--lwt-toolbar-field-color, black);
 }
 
 #searchInput:not([focused="true"]):-moz-lwtheme,
 #IMSearchInput:not([focused="true"]):-moz-lwtheme,
 #peopleSearchInput:not([focused="true"]):-moz-lwtheme,
+.themeableSearchBox:not([focused="true"]):-moz-lwtheme,
 .remote-gloda-search:not([focused="true"]):-moz-lwtheme {
   border-color: var(--lwt-toolbar-field-border-color, hsla(240,5%,5%,.25));
 }
 
 #searchInput:-moz-lwtheme:hover,
 #IMSearchInput:-moz-lwtheme:hover,
 #peopleSearchInput:-moz-lwtheme:hover,
+.themeableSearchBox:-moz-lwtheme:hover,
 .remote-gloda-search:-moz-lwtheme:hover {
   background-color: var(--lwt-toolbar-field-background-color, white);
 }
 
 #searchInput:-moz-lwtheme[focused="true"],
 #IMSearchInput:-moz-lwtheme[focused="true"],
 #peopleSearchInput:-moz-lwtheme[focused="true"],
+.themeableSearchBox:-moz-lwtheme[focused="true"],
 .remote-gloda-search:-moz-lwtheme[focused="true"] {
   background-color: var(--lwt-toolbar-field-focus, var(--lwt-toolbar-field-background-color, white));
   color: var(--lwt-toolbar-field-focus-color, var(--lwt-toolbar-field-color, black));
   border-color: var(--toolbar-field-focus-border-color);
 }
 
 #PopupGlodaAutocomplete {
   -moz-appearance: none;