Bug 1196313 - Add a transition for the background color of the identity box on hover. r=Gijs, r=dao, a=sledru
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Thu, 27 Aug 2015 12:11:32 +0100
changeset 289034 c92238c774388593f3e0c0782f8cdc47d33069cd
parent 289033 179a6b8926096f2dd4e75748ca775bfa7acb3619
child 289035 b78e8e05ce0dc1c4523fdbe57673273d38127fd7
push id5067
push userraliiev@mozilla.com
push dateMon, 21 Sep 2015 14:04:52 +0000
treeherdermozilla-beta@14221ffe5b2f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersGijs, dao, sledru
bugs1196313
milestone42.0a2
Bug 1196313 - Add a transition for the background color of the identity box on hover. r=Gijs, r=dao, a=sledru
browser/themes/shared/identity-block/identity-block.inc.css
--- a/browser/themes/shared/identity-block/identity-block.inc.css
+++ b/browser/themes/shared/identity-block/identity-block.inc.css
@@ -23,16 +23,19 @@
                                 var(--identity-box-border-color) 15%,
                                 var(--identity-box-border-color) 85%,
                                 transparent 85%);
   border-image-slice: 1;
   font-size: .9em;
   padding: 3px 5px;
   margin-inline-end: 4px;
   overflow: hidden;
+  /* The latter two properties have a transition to handle the delayed hiding of
+     the forward button when hovered. */
+  transition: background-color 150ms ease, padding-left, padding-right;
 }
 
 #identity-box:hover,
 #identity-box[open=true] {
   background-color: var(--identity-box-selected-background-color);
   border-image-source: none;
 }
 
@@ -52,27 +55,25 @@
   padding-inline-start: 10px;
   border-radius: 0;
 }
 
 @conditionalForwardWithUrlbar@ > #urlbar > #identity-box {
   border-radius: 0;
 }
 
-@conditionalForwardWithUrlbar@:not([switchingtabs]) > #urlbar > #identity-box {
-  transition: padding-left, padding-right;
-}
-
 @conditionalForwardWithUrlbar@ > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box {
   padding-inline-start: calc(var(--backbutton-urlbar-overlap) + 4px);
 }
 
 @conditionalForwardWithUrlbar@:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box {
-  /* forward button hiding is delayed when hovered */
-  transition-delay: 100s;
+  /* Forward button hiding is delayed when hovered, so we should use the same
+     delay for the identity box. We handle both horizontal paddings (for LTR and
+     RTL), the latter two delays here are for padding-left and padding-right. */
+  transition-delay: 0s, 100s, 100s;
 }
 
 @conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] + #urlbar > #notification-popup-box[hidden] + #identity-box {
   /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
   padding-inline-start: calc(var(--backbutton-urlbar-overlap) + 4.01px);
 }
 
 /* TRACKING PROTECTION ICON */