Bug 1393218 - Remove obsolete Pocket toolbar button styling. r=jaws
authorDão Gottwald <dao@mozilla.com>
Thu, 23 Apr 2020 18:49:55 +0000
changeset 589186 0914ba72c019245a1a865ecdd1e2f1fffe3d3aa3
parent 589185 3c419a37f51bbdb76a7eb55bee2a196b50f62b0f
child 589187 7b46a8bfc6af9df780c1a64367f6b7dc363d9341
push id13072
push userffxbld-merge
push dateMon, 04 May 2020 14:22:08 +0000
treeherdermozilla-beta@8a4f45b9a244 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1393218
milestone77.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1393218 - Remove obsolete Pocket toolbar button styling. r=jaws Differential Revision: https://phabricator.services.mozilla.com/D71944
browser/themes/shared/urlbar-searchbar.inc.css
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -299,18 +299,17 @@
   list-style-image: url("chrome://browser/skin/pocket-outline.svg");
 }
 
 #pocket-button-box[open="true"] > #pocket-button,
 #pocket-button-box[pocketed="true"] > #pocket-button {
   list-style-image: url("chrome://browser/skin/pocket.svg");
 }
 
-#pocket-button-box[animate="true"] > #pocket-button,
-#pocket-button[open="true"][animationsenabled] > .toolbarbutton-icon {
+#pocket-button-box[animate="true"] > #pocket-button {
   fill: transparent;
 }
 
 #pocket-button-box[open="true"] > #pocket-button,
 #pocket-button-box[pocketed="true"] > #pocket-button {
   fill: #ef4056;
   fill-opacity: 1;
 }
@@ -588,18 +587,17 @@
   from {
     transform: scaleX(-1) translateX(0);
   }
   to {
     transform: scaleX(-1) translateX(-240px);
   }
 }
 
-#pocket-button-box[animate="true"] > #pocket-animatable-box,
-#pocket-button > .toolbarbutton-animatable-box {
+#pocket-button-box[animate="true"] > #pocket-animatable-box {
   top: calc(50% - 8px); /* 8px is half the height of the sprite */
   /* Since .toolbarbutton-icon uses a different width than the animatable box,
      we need to set a padding relative to the difference in widths. */
   margin-inline-start: calc((16px + 2 * var(--toolbarbutton-inner-padding) - 20px) / 2);
   width: 20px; /* Width of each frame within the SVG sprite */
   height: 16px; /* Height of each frame within the SVG sprite */
 }
 
@@ -617,54 +615,49 @@
   margin-inline-start: 2px;
 }
 
 :root[uidensity=touch] #pocket-button-box[animate="true"] > #pocket-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 {
+#pocket-button-box[animate="true"] > #pocket-animatable-box > #pocket-animatable-image {
   height: var(--toolbarbutton-height); /* Height must be equal to height of toolbarbutton padding-box */
 }
 
-#pocket-button-box[animate="true"],
-#pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]) {
+#pocket-button-box[animate="true"] {
   position: relative;
 }
 
 #pocket-button-box:not([animate="true"]):not(:hover) > #pocket-animatable-box {
   display: none;
 }
 
 /* Preload pocket-animation.svg and library-pocket-animation.svg to prevent
    a flicker at the start of either animation. The preloading of the library
    animation is triggered off of hovering the pocket button since the pocket
    button always animates before the library button. */
-#pocket-button-box:not([animate="true"]):hover > #pocket-animatable-box > #pocket-animatable-image,
-#pocket-button[animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]):not([open="true"]):hover > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
+#pocket-button-box:not([animate="true"]):hover > #pocket-animatable-box > #pocket-animatable-image {
   background-image: url("chrome://browser/skin/pocket-animation.svg"),
                     url("chrome://browser/skin/library-pocket-animation.svg");
   background-size: 0, 0;
 }
 
-#pocket-button-box[animate="true"] > #pocket-animatable-box > #pocket-animatable-image,
-#pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
+#pocket-button-box[animate="true"] > #pocket-animatable-box > #pocket-animatable-image {
   animation-name: pocket-animation;
   animation-timing-function: steps(12);
   animation-duration: 200ms;
   background-image: url("chrome://browser/skin/pocket-animation.svg");
   fill: #ef4056;
   -moz-context-properties: fill;
   width: 260px;
 }
 
-#pocket-button-box[animate="true"]:-moz-locale-dir(rtl) > #pocket-animatable-box > #pocket-animatable-image,
-#pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]):-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
+#pocket-button-box[animate="true"]:-moz-locale-dir(rtl) > #pocket-animatable-box > #pocket-animatable-image {
   animation-name: pocket-animation-rtl;
 }
 
 
 /**
  * Contextual Feature Recommendation
  *
  * Animate the recommendation icon to expand outwards and display a text label.