Bug 1377182 - Fix animation for tabbar session restore button. r=Gijs draft
authorErica Wright <ewright@mozilla.com>
Thu, 29 Jun 2017 11:31:59 -0700
changeset 602171 b7bcfef89c40bf94489751de26121b1329237760
parent 602051 f3483af8ecf997453064201c49c48a682c7f3c29
child 604195 07765c3c94f9093ab0a003851d1161292019df3e
push id66312
push userbmo:ewright@mozilla.com
push dateThu, 29 Jun 2017 18:51:06 +0000
reviewersGijs
bugs1377182
milestone56.0a1
Bug 1377182 - Fix animation for tabbar session restore button. r=Gijs MozReview-Commit-ID: 9bkpvelpQEw
browser/base/content/browser.js
browser/themes/shared/tabs.inc.css
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -8171,47 +8171,47 @@ function switchToTabHavingURI(aURI, aOpe
   return false;
 }
 
 var RestoreLastSessionObserver = {
   init() {
     if (SessionStore.canRestoreLastSession &&
         !PrivateBrowsingUtils.isWindowPrivate(window)) {
       if (Services.prefs.getBoolPref("browser.tabs.restorebutton")) {
-        let {restoreTabsButton} = gBrowser.tabContainer;
+        let {restoreTabsButton, restoreTabsButtonWrapperWidth} = gBrowser.tabContainer;
         let restoreTabsButtonWrapper = restoreTabsButton.parentNode;
         restoreTabsButtonWrapper.setAttribute("session-exists", "true");
         gBrowser.tabContainer.updateSessionRestoreVisibility();
+        restoreTabsButton.style.maxWidth = `${restoreTabsButtonWrapperWidth}px`;
         gBrowser.tabContainer.addEventListener("TabOpen", this);
       }
       Services.obs.addObserver(this, "sessionstore-last-session-cleared", true);
       goSetCommandEnabled("Browser:RestoreLastSession", true);
     }
   },
 
   handleEvent(event) {
     switch (event.type) {
      case "TabOpen":
         this.removeRestoreButton();
         break;
     }
   },
 
   removeRestoreButton() {
-    let {restoreTabsButton, restoreTabsButtonWrapperWidth} = gBrowser.tabContainer;
+    let {restoreTabsButton} = gBrowser.tabContainer;
     let restoreTabsButtonWrapper = restoreTabsButton.parentNode;
-    restoreTabsButtonWrapper.removeAttribute("session-exists");
     gBrowser.tabContainer.addEventListener("transitionend", function maxWidthTransitionHandler(e) {
-      if (e.propertyName == "max-width") {
+      if (e.target == gBrowser.tabContainer && e.propertyName == "max-width") {
         gBrowser.tabContainer.updateSessionRestoreVisibility();
         gBrowser.tabContainer.removeEventListener("transitionend", maxWidthTransitionHandler);
       }
     });
-    restoreTabsButton.style.maxWidth = `${restoreTabsButtonWrapperWidth}px`;
-    requestAnimationFrame(() => restoreTabsButton.style.maxWidth = 0);
+    restoreTabsButtonWrapper.removeAttribute("session-exists");
+    restoreTabsButton.style.maxWidth = 0;
     gBrowser.tabContainer.removeEventListener("TabOpen", this);
   },
 
   observe() {
     // The last session can only be restored once so there's
     // no way we need to re-enable our menu item.
     Services.obs.removeObserver(this, "sessionstore-last-session-cleared");
     goSetCommandEnabled("Browser:RestoreLastSession", false);
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -618,17 +618,18 @@
 .restore-tabs-button {
   box-sizing: border-box;
   -moz-appearance: none;
   background-color: hsl(0,0%,0%,.04);
   border: 1px solid hsla(0,0%,16%,.2);
   border-radius: 3px;
   margin: 3px;
   margin-inline-start: 9px;
-  transition: max-width 300ms;
+  transition: max-width 100ms;
+  padding: 0 5px;
 }
 
 .restore-tabs-button:hover {
   background-color: hsl(0,0%,0%,.08);
 }
 
 .restore-tabs-button:active {
   background-color: hsl(0,0%,0%,.11);
@@ -650,10 +651,9 @@
 }
 
 .restore-tabs-button > .toolbarbutton-icon {
   display: none;
 }
 
 .restore-tabs-button > .toolbarbutton-text {
   display: -moz-box;
-  padding: 0 5px;
 }