Bug 1022601 - Fix up identity block styling for high contrast mode. r=felipe

--HG--
extra : rebase_source : d43ff15d005a7cbe4b79761decbab8567e30f054

browser/themes/linux/browser.css

@@ -32,11 +32,9 @@
 
   --toolbarbutton-checkedhover-backgroundcolor: rgba(200,200,200,.5);
 
-  --identity-box-verified-background-color: #fff;
-
   --panel-separator-color: ThreeDShadow;
 
-  --urlbar-separator-color: hsla(0,0%,16%,.2);
+  --urlbar-separator-color: ThreeDShadow;
 }
 
 #menubar-items {
@@ -1010,10 +1008,6 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
   border-bottom-right-radius: 1.5px;
 }
 
-#identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
-  background-color: var(--identity-box-verified-background-color);
-}
-
 #identity-box:-moz-focusring {
   outline: 1px dotted #000;
   outline-offset: -3px;

browser/themes/shared/devedition.inc.css

@@ -60,7 +60,6 @@
 
 :root[devtoolstheme="dark"] #identity-box {
   --identity-box-chrome-color: #46afe3;
-  --identity-box-verified-background-color: transparent;
 }
 
 :root[devtoolstheme="light"] {

browser/themes/shared/identity-block/identity-block.inc.css

@@ -19,9 +19,9 @@
   font-size: .9em;
   padding: 3px 5px;
   overflow: hidden;
-  /* The latter two properties have a transition to handle the delayed hiding of
+  /* The padding-left and padding-right transitions handle the delayed hiding of
      the forward button when hovered. */
-  transition: background-color 150ms ease, padding-left, padding-right;
+  transition: padding-left, padding-right;
 }
 
 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
@@ -62,6 +62,9 @@
   width: 16px;
   height: 16px;
   list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
+  filter: url(chrome://browser/skin/filters.svg#fill);
+  fill: currentColor;
+  opacity: .5;
 }
 
 #identity-box:hover > #identity-icon:not(.no-hover),
@@ -80,10 +83,11 @@
 
 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
   list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
+  opacity: 1;
 }
 
 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
-  opacity: 0.3;
+  opacity: .2;
 }
 
 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
@@ -91,7 +95,7 @@
   list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
   width: 16px;
   height: 16px;
-  opacity: 1;
+  opacity: .5;
 }
 
 /* SHARING ICON */
@@ -145,11 +149,15 @@
   margin-inline-start: 2px;
   margin-inline-end: 0;
   list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
-  opacity: 1;
+  filter: url(chrome://browser/skin/filters.svg#fill);
+  fill: currentColor;
+  opacity: .5;
 }
 
 #tracking-protection-icon[state="loaded-tracking-content"] {
   list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
+  filter: none;
+  opacity: 1;
 }
 
 #tracking-protection-icon[animate] {

browser/themes/shared/identity-block/identity-icon.svg

@@ -8,7 +8,6 @@
     <style>
       path {
         fill-rule: evenodd;
-        fill: #999999;
       }
     </style>
   </defs>

browser/themes/shared/identity-block/tracking-protection-16.svg

@@ -17,5 +17,5 @@
     </mask>
   </defs>
 
-  <use xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout)" fill="#808080" />
+  <use xlink:href="#shape-shield-outer" mask="url(#mask-shield-cutout)"/>
 </svg>

browser/themes/shared/notification-icons.inc.css

@@ -41,12 +41,6 @@
   margin-inline-end: 10px;
 }
 
-#notification-popup-box > .notification-anchor-icon:hover {
-  fill: #606060;
-}
-
-/* INDIVIDUAL NOTIFICATIONS */
-
 .camera-icon,
 .geo-icon,
 .indexedDB-icon,
@@ -67,9 +61,16 @@
 .popup-notification-icon[popupid="webRTC-shareScreen"],
 .popup-notification-icon[popupid="web-notifications"] {
   filter: url(chrome://browser/skin/filters.svg#fill);
-  fill: #999;
+  fill: currentColor;
+  opacity: .4;
 }
 
+.notification-anchor-icon:hover {
+  opacity: .6;
+}
+
+/* INDIVIDUAL NOTIFICATIONS */
+
 .popup-notification-icon[popupid="web-notifications"],
 .desktop-notification-icon {
   list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
@@ -252,7 +253,8 @@
 
 .plugin-icon.plugin-blocked {
   list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
-  fill: #d92215 !important; /* important! to override the default hover color */
+  fill: #d92215;
+  opacity: 1 !important; /* !important to override the default hover opacity */
 }
 
 #notification-popup-box[hidden] {
@@ -268,10 +270,10 @@
 
 @keyframes pluginBlockedNotification {
   from {
-    opacity: 0;
+    opacity: 0 !important;
   }
   to {
-    opacity: 1;
+    opacity: 1 !important;
   }
 }
 

browser/themes/windows/browser.css

@@ -36,8 +36,6 @@
 
   --toolbarbutton-checkedhover-backgroundcolor: rgba(0,0,0,.1);
 
-  --identity-box-verified-background-color: #fff;
-
   --urlbar-dropmarker-url: url("chrome://browser/skin/urlbar-history-dropmarker.png");
   --urlbar-dropmarker-region: rect(0px, 11px, 14px, 0px);
   --urlbar-dropmarker-hover-region: rect(0px, 22px, 14px, 11px);
@@ -49,7 +47,7 @@
 
   --panel-separator-color: ThreeDLightShadow;
 
-  --urlbar-separator-color: hsla(0,0%,16%,.2);
+  --urlbar-separator-color: ThreeDLightShadow;
 }
 
 #nav-bar[brighttext] {
@@ -1420,10 +1418,6 @@ html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
 
 /* identity box */
 
-#identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
-  background-color: var(--identity-box-verified-background-color);
-}
-
 #identity-box:-moz-focusring {
   outline: 1px dotted #000;
   outline-offset: -3px;