Bug 1352119 - Improve the performance of the throbber animation by removing the icon fade as well as only starting the throbber animation after the session has restored. r?dao draft
authorJared Wein <jwein@mozilla.com>
Wed, 16 Aug 2017 12:00:27 -0400
changeset 649965 f283f92e798bb1d65116de5b95cf6737b2bf13d7
parent 649671 2bd16202e16784aa83eb2e5a822a2a967de5e995
child 727254 41f335719411e08513b01b02ed2e61b3bd067021
push id75222
push userbmo:jaws@mozilla.com
push dateMon, 21 Aug 2017 16:05:22 +0000
reviewersdao
bugs1352119
milestone57.0a1
Bug 1352119 - Improve the performance of the throbber animation by removing the icon fade as well as only starting the throbber animation after the session has restored. r?dao MozReview-Commit-ID: 6rEwpLO6TJP
browser/base/content/browser.js
browser/themes/shared/compacttheme.inc.css
browser/themes/shared/compacttheme/loading-inverted.png
browser/themes/shared/compacttheme/loading-inverted@2x.png
browser/themes/shared/jar.inc.mn
browser/themes/shared/tabs.inc.css
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -1675,16 +1675,17 @@ var gBrowserInit = {
     });
 
     this.delayedStartupFinished = true;
 
     _resolveDelayedStartup();
 
     SessionStore.promiseAllWindowsRestored.then(() => {
       this._schedulePerWindowIdleTasks();
+      document.documentElement.setAttribute("sessionrestored", "true");
     });
 
     Services.obs.notifyObservers(window, "browser-delayed-startup-finished");
     TelemetryTimestamps.add("delayedStartupFinished");
   },
 
   /**
    * Use this function as an entry point to schedule tasks that
--- a/browser/themes/shared/compacttheme.inc.css
+++ b/browser/themes/shared/compacttheme.inc.css
@@ -126,23 +126,13 @@ toolbar[brighttext] .toolbarbutton-1 {
 #urlbar-zoom-button:-moz-lwtheme-brighttext:hover {
   background-color: rgba(255,255,255,.2);
 }
 
 #urlbar-zoom-button:-moz-lwtheme-brighttext:hover:active {
   background-color: rgba(255,255,255,.3);
 }
 
-.tab-throbber[selected][progress] {
-  list-style-image: url("chrome://browser/skin/compacttheme/loading-inverted.png");
-}
-
-@media (min-resolution: 1.1dppx) {
-  .tab-throbber[selected][progress] {
-    list-style-image: url("chrome://browser/skin/compacttheme/loading-inverted@2x.png");
-  }
-}
-
 .tab-icon-sound[soundplaying],
 .tab-icon-sound[muted] {
   filter: none !important; /* removes drop-shadow filter */
 }
 
deleted file mode 100644
index b9ee1a75df9748ff7e2924b144d2b1d3447fc0b7..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 852c4eee94052f539fae8feea7e8253de360f6b8..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
GIT binary patch
literal 0
Hc$@<O00001
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -235,11 +235,9 @@
   skin/classic/browser/places/folder-smart.svg                 (../shared/places/folder-smart.svg)
   skin/classic/browser/places/history.svg                      (../shared/places/history.svg)
   skin/classic/browser/places/unfiledBookmarks.svg             (../shared/places/unfiledBookmarks.svg)
   skin/classic/browser/privatebrowsing/aboutPrivateBrowsing.css (../shared/privatebrowsing/aboutPrivateBrowsing.css)
   skin/classic/browser/privatebrowsing/favicon.svg             (../shared/privatebrowsing/favicon.svg)
   skin/classic/browser/privatebrowsing/private-browsing.svg    (../shared/privatebrowsing/private-browsing.svg)
   skin/classic/browser/privatebrowsing/tracking-protection-off.svg (../shared/privatebrowsing/tracking-protection-off.svg)
   skin/classic/browser/privatebrowsing/tracking-protection.svg (../shared/privatebrowsing/tracking-protection.svg)
-  skin/classic/browser/compacttheme/loading-inverted.png (../shared/compacttheme/loading-inverted.png)
-  skin/classic/browser/compacttheme/loading-inverted@2x.png (../shared/compacttheme/loading-inverted@2x.png)
   skin/classic/browser/urlbar-tab.svg                          (../shared/urlbar-tab.svg)
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -65,24 +65,24 @@
 .tab-throbber,
 .tab-icon-image,
 .tab-sharing-icon-overlay,
 .tab-icon-sound,
 .tab-close-button {
   margin-top: 1px;
 }
 
-.tab-throbber[busy] {
+:root[sessionrestored] .tab-throbber[busy] {
   position: relative;
   overflow: hidden;
   width: 16px;
   height: 16px;
 }
 
-.tab-throbber[busy]::before {
+:root[sessionrestored] .tab-throbber[busy]::before {
   content: "";
   position: absolute;
   background-image: url("chrome://browser/skin/tabbrowser/loading.svg");
   background-position: left center;
   background-repeat: no-repeat;
   width: 960px;
   height: 100%;
   animation: tab-throbber-animation 1.05s steps(60) infinite;
@@ -97,17 +97,17 @@
   fill: currentColor;
   opacity: 0.7;
 }
 
 @keyframes tab-throbber-animation {
   100% { transform: translateX(-100%); }
 }
 
-.tab-throbber[progress]::before {
+:root[sessionrestored] .tab-throbber[progress]::before {
   fill: var(--tab-loading-fill);
   opacity: 1;
 }
 
 .tab-sharing-icon-overlay,
 .tab-icon-image {
   height: 16px;
   width: 16px;
@@ -123,28 +123,16 @@
   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
 }
 
 .tab-icon-image[src^="chrome://"] {
   -moz-context-properties: fill;
   fill: currentColor;
 }
 
-.tab-icon-image:not([busy]) {
-  /* This is an animation rather than a transition because the icon has
-     `display: none;` prior to this, making it impossible to fade it in via a
-     transition. */
-  animation: tab-icon-image-fade-in 0.333s;
-}
-
-@keyframes tab-icon-image-fade-in {
-  0% { opacity: 0; }
-  100% { opacity: 1; }
-}
-
 .tab-icon-image[sharing]:not([selected]),
 .tab-sharing-icon-overlay {
   animation: 3s linear tab-sharing-icon-pulse infinite;
 }
 
 .tab-label-container {
   padding-inline-start: 22px;
 }