Bug 1397583 - With compact UI density, urlbar animations for Pocket and bookmark star are in the wrong place (offset to the right of the normal icon). r=jaws

MozReview-Commit-ID: 2tr0ZBCNakA

--HG--
extra : rebase_source : 515071d89dafbb377083c0a6e91277d2390f7ed5

browser/extensions/pocket/skin/shared/pocket.css

@@ -59,6 +59,16 @@
   margin-inline-start: 4px;
 }
 
+:root[uidensity=compact] #pocket-button-box[animate="true"] > #pocket-animatable-box {
+  /* .urlbar-icon has width 24px in this case */
+  margin-inline-start: 2px;
+}
+
+:root[uidensity=touch] #star-button-box[animationsenabled] > #star-button[starred][animate] + #star-button-animatable-box {
+  /* .urlbar-icon has width 30px in this case */
+  margin-inline-start: 5px;
+}
+
 #pocket-button-box[animate="true"] > #pocket-animatable-box > #pocket-animatable-image,
 #pocket-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   height: var(--toolbarbutton-height); /* Height must be equal to height of toolbarbutton padding-box */

browser/themes/shared/urlbar-searchbar.inc.css

@@ -270,6 +270,16 @@
   max-height: 33px;
 }
 
+:root[uidensity=compact] #star-button-box[animationsenabled] > #star-button[starred][animate] + #star-button-animatable-box {
+  /* .urlbar-icon has width 24px in this case */
+  margin-inline-start: -4.5px;
+}
+
+:root[uidensity=touch] #star-button-box[animationsenabled] > #star-button[starred][animate] + #star-button-animatable-box {
+  /* .urlbar-icon has width 30px in this case */
+  margin-inline-start: -1.5px;
+}
+
 #star-button-box[animationsenabled] > #star-button[starred][animate] + #star-button-animatable-box > #star-button-animatable-image {
   background-image: url("chrome://browser/skin/bookmark-animation.svg");
   background-size: auto;