Bug 1453701 - Add 30fps and 20fps configurations for the tab loading throbber. r?jaws draft
authorMike Conley <mconley@mozilla.com>
Thu, 12 Apr 2018 13:45:49 -0400
changeset 781234 6d1ed956597b0629c9c8222e8365f0194b5d24cd
parent 778674 6792eee0c9c5d1cf0fa10244c55e21a31a98c120
push id106249
push usermconley@mozilla.com
push dateThu, 12 Apr 2018 18:59:49 +0000
reviewersjaws
bugs1453701
milestone61.0a1
Bug 1453701 - Add 30fps and 20fps configurations for the tab loading throbber. r?jaws MozReview-Commit-ID: FH6XUPOVtZp
browser/app/profile/firefox.js
browser/themes/shared/jar.inc.mn
browser/themes/shared/tabbrowser/loading-20fps.svg
browser/themes/shared/tabbrowser/loading-30fps.svg
browser/themes/shared/tabs.inc.css
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -453,16 +453,18 @@ pref("browser.link.open_newwindow.restri
 // different.
 #ifdef XP_MACOSX
 pref("browser.link.open_newwindow.disabled_in_fullscreen", true);
 #else
 pref("browser.link.open_newwindow.disabled_in_fullscreen", false);
 #endif
 
 // Tabbed browser
+pref("browser.tabs.20FpsThrobber", false);
+pref("browser.tabs.30FpsThrobber", false);
 pref("browser.tabs.closeTabByDblclick", false);
 pref("browser.tabs.closeWindowWithLastTab", true);
 // Open related links to a tab, e.g., link in current tab, at next to the
 // current tab if |insertRelatedAfterCurrent| is true.  Otherwise, always
 // append new tab to the end.
 pref("browser.tabs.insertRelatedAfterCurrent", true);
 // Open all links, e.g., bookmarks, history items at next to current tab
 // if |insertAfterCurrent| is true.  Otherwise, append new tab to the end
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -181,16 +181,18 @@
 
   skin/classic/browser/tabbrowser/tab-connecting.png           (../shared/tabbrowser/tab-connecting.png)
   skin/classic/browser/tabbrowser/tab-connecting@2x.png        (../shared/tabbrowser/tab-connecting@2x.png)
   skin/classic/browser/tabbrowser/tab-loading.png              (../shared/tabbrowser/tab-loading.png)
   skin/classic/browser/tabbrowser/tab-loading@2x.png           (../shared/tabbrowser/tab-loading@2x.png)
   skin/classic/browser/tabbrowser/tab-loading-inverted.png     (../shared/tabbrowser/tab-loading-inverted.png)
   skin/classic/browser/tabbrowser/tab-loading-inverted@2x.png  (../shared/tabbrowser/tab-loading-inverted@2x.png)
   skin/classic/browser/tabbrowser/loading.svg                  (../shared/tabbrowser/loading.svg)
+  skin/classic/browser/tabbrowser/loading-20fps.svg            (../shared/tabbrowser/loading-20fps.svg)
+  skin/classic/browser/tabbrowser/loading-30fps.svg            (../shared/tabbrowser/loading-30fps.svg)
   skin/classic/browser/tabbrowser/loading-burst.svg            (../shared/tabbrowser/loading-burst.svg)
   skin/classic/browser/tabbrowser/crashed.svg                  (../shared/tabbrowser/crashed.svg)
   skin/classic/browser/tabbrowser/newtab.svg                   (../shared/tabbrowser/newtab.svg)
   skin/classic/browser/tabbrowser/indicator-tab-attention.svg  (../shared/tabbrowser/indicator-tab-attention.svg)
   skin/classic/browser/tabbrowser/pendingpaint.png             (../shared/tabbrowser/pendingpaint.png)
   skin/classic/browser/tabbrowser/tab-audio-playing.svg        (../shared/tabbrowser/tab-audio-playing.svg)
   skin/classic/browser/tabbrowser/tab-audio-muted.svg          (../shared/tabbrowser/tab-audio-muted.svg)
   skin/classic/browser/tabbrowser/tab-audio-blocked.svg        (../shared/tabbrowser/tab-audio-blocked.svg)
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/tabbrowser/loading-20fps.svg
@@ -0,0 +1,68 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="16" fill="context-fill">
+  <svg>
+    <path d="M2.062 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="16">
+    <path d="M5.058 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="32">
+    <path d="M8.338 6.171c1.435 0 2.6 0.82 2.6 1.829 0 1.01 -1.165 1.829 -2.6 1.829s-2.6 -0.82 -2.6 -1.829c0 -1.01 1.165 -1.829 2.6 -1.829z"/>
+  </svg>
+  <svg x="48">
+    <path d="M10.33 6.343c1.767 0 3.201 0.742 3.201 1.657s-1.434 1.657 -3.2 1.657c-1.766 0 -3.2 -0.742 -3.2 -1.657s1.434 -1.657 3.2 -1.657z"/>
+  </svg>
+  <svg x="64">
+    <path d="M11.648 6.3c1.683 0 3.05 0.762 3.05 1.7s-1.367 1.7 -3.05 1.7c-1.683 0 -3.05 -0.762 -3.05 -1.7s1.367 -1.7 3.05 -1.7z"/>
+  </svg>
+  <svg x="80">
+    <path d="M12.551 6.15c1.394 0 2.525 0.829 2.525 1.85 0 1.021 -1.131 1.85 -2.525 1.85 -1.393 0 -2.525 -0.829 -2.525 -1.85 0 -1.021 1.132 -1.85 2.525 -1.85z"/>
+  </svg>
+  <svg x="96">
+    <path d="M13.17 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="112">
+    <path d="M13.578 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2c0 -1.104 0.897 -2 2 -2z"/>
+  </svg>
+  <svg x="128">
+    <path d="M13.823 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="144">
+    <path d="M13.935 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="160">
+    <path d="M13.937 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="176">
+    <path d="M12.219 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="192">
+    <path d="M7.913 6.171c1.34 0 2.429 0.82 2.429 1.829 0 1.01 -1.088 1.829 -2.429 1.829 -1.34 0 -2.428 -0.82 -2.428 -1.829 0 -1.01 1.088 -1.829 2.428 -1.829z"/>
+  </svg>
+  <svg x="208">
+    <path d="M5.545 6.343c1.577 0 2.857 0.742 2.857 1.657s-1.28 1.657 -2.857 1.657c-1.577 0 -2.858 -0.742 -2.858 -1.657s1.28 -1.657 2.858 -1.657z"/>
+  </svg>
+  <svg x="224">
+    <path d="M4.168 6.3c1.517 0 2.75 0.762 2.75 1.7s-1.233 1.7 -2.75 1.7c-1.518 0 -2.75 -0.762 -2.75 -1.7s1.232 -1.7 2.75 -1.7z"/>
+  </svg>
+  <svg x="240">
+    <path d="M3.288 6.15c1.311 0 2.375 0.829 2.375 1.85 0 1.021 -1.064 1.85 -2.375 1.85 -1.31 0 -2.375 -0.829 -2.375 -1.85 0 -1.021 1.065 -1.85 2.375 -1.85z"/>
+  </svg>
+  <svg x="256">
+    <path d="M2.714 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2c0 -1.104 0.897 -2 2 -2z"/>
+  </svg>
+  <svg x="272">
+    <path d="M2.35 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2c0 -1.104 0.897 -2 2 -2z"/>
+  </svg>
+  <svg x="288">
+    <path d="M2.142 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="304">
+    <path d="M2.053 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2c0 -1.104 0.897 -2 2 -2z"/>
+  </svg>
+  <svg x="320">
+    <path d="M2.062 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/tabbrowser/loading-30fps.svg
@@ -0,0 +1,98 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="480" height="16" fill="context-fill">
+  <svg>
+    <path d="M2.062 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="16">
+    <path d="M3.613 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="32">
+    <path d="M6.352 6.057c1.214 0 2.2 0.87 2.2 1.943 0 1.072 -0.986 1.943 -2.2 1.943 -1.214 0 -2.2 -0.87 -2.2 -1.943 0 -1.072 0.986 -1.943 2.2 -1.943z"/>
+  </svg>
+  <svg x="48">
+    <path d="M8.338 6.171c1.435 0 2.6 0.82 2.6 1.829 0 1.01 -1.165 1.829 -2.6 1.829s-2.6 -0.82 -2.6 -1.829c0 -1.01 1.165 -1.829 2.6 -1.829z"/>
+  </svg>
+  <svg x="64">
+    <path d="M9.762 6.286c1.655 0 3 0.768 3 1.714s-1.345 1.714 -3 1.714c-1.656 0 -3 -0.768 -3 -1.714s1.344 -1.714 3 -1.714z"/>
+  </svg>
+  <svg x="80">
+    <path d="M10.828 6.4c1.877 0 3.4 0.717 3.4 1.6 0 0.883 -1.523 1.6 -3.4 1.6 -1.876 0 -3.4 -0.717 -3.4 -1.6 0 -0.883 1.524 -1.6 3.4 -1.6z"/>
+  </svg>
+  <svg x="96">
+    <path d="M11.648 6.3c1.683 0 3.05 0.762 3.05 1.7s-1.367 1.7 -3.05 1.7c-1.683 0 -3.05 -0.762 -3.05 -1.7s1.367 -1.7 3.05 -1.7z"/>
+  </svg>
+  <svg x="112">
+    <path d="M12.287 6.2c1.49 0 2.7 0.807 2.7 1.8s-1.21 1.8 -2.7 1.8c-1.49 0 -2.7 -0.807 -2.7 -1.8s1.21 -1.8 2.7 -1.8z"/>
+  </svg>
+  <svg x="128">
+    <path d="M12.785 6.1c1.297 0 2.35 0.851 2.35 1.9s-1.053 1.9 -2.35 1.9c-1.297 0 -2.35 -0.851 -2.35 -1.9s1.053 -1.9 2.35 -1.9z"/>
+  </svg>
+  <svg x="144">
+    <path d="M13.17 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2c0 -1.104 0.897 -2 2 -2z"/>
+  </svg>
+  <svg x="160">
+    <path d="M13.463 6c1.103 0 2 0.896 2 2s-0.897 2 -2 2a2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="176">
+    <path d="M13.677 6c1.103 0 2 0.896 2 2s-0.897 2 -2 2a2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="192">
+    <path d="M13.823 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="208">
+    <path d="M13.911 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="224">
+    <path d="M13.947 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="240">
+    <path d="M13.937 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="256">
+    <path d="M13.27 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2c0 -1.104 0.897 -2 2 -2z"/>
+  </svg>
+  <svg x="272">
+    <path d="M10.65 6.057c1.182 0 2.142 0.87 2.142 1.943 0 1.072 -0.96 1.943 -2.143 1.943 -1.182 0 -2.142 -0.87 -2.142 -1.943 0 -1.072 0.96 -1.943 2.142 -1.943z"/>
+  </svg>
+  <svg x="288">
+    <path d="M7.911 6.171c1.34 0 2.429 0.82 2.429 1.829 0 1.01 -1.088 1.829 -2.429 1.829 -1.34 0 -2.428 -0.82 -2.428 -1.829 0 -1.01 1.088 -1.829 2.428 -1.829z"/>
+  </svg>
+  <svg x="304">
+    <path d="M6.18 6.286c1.498 0 2.715 0.768 2.715 1.714s-1.217 1.714 -2.715 1.714c-1.498 0 -2.714 -0.768 -2.714 -1.714s1.216 -1.714 2.714 -1.714z"/>
+  </svg>
+  <svg x="320">
+    <path d="M5.01 6.4c1.655 0 3 0.717 3 1.6 0 0.883 -1.345 1.6 -3 1.6 -1.656 0 -3 -0.717 -3 -1.6 0 -0.883 1.344 -1.6 3 -1.6z"/>
+  </svg>
+  <svg x="336">
+    <path d="M4.167 6.3c1.518 0 2.75 0.762 2.75 1.7s-1.232 1.7 -2.75 1.7 -2.75 -0.762 -2.75 -1.7 1.232 -1.7 2.75 -1.7z"/>
+  </svg>
+  <svg x="352">
+    <path d="M3.54 6.2c1.38 0 2.5 0.807 2.5 1.8s-1.12 1.8 -2.5 1.8 -2.5 -0.807 -2.5 -1.8 1.12 -1.8 2.5 -1.8z"/>
+  </svg>
+  <svg x="368">
+    <path d="M3.069 6.1c1.241 0 2.25 0.851 2.25 1.9s-1.009 1.9 -2.25 1.9c-1.242 0 -2.25 -0.851 -2.25 -1.9s1.008 -1.9 2.25 -1.9z"/>
+  </svg>
+  <svg x="384">
+    <path d="M2.714 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="400">
+    <path d="M2.452 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="416">
+    <path d="M2.266 6c1.103 0 2 0.896 2 2s-0.897 2 -2 2a2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="432">
+    <path d="M2.142 6c1.103 0 2 0.896 2 2s-0.897 2 -2 2a2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="448">
+    <path d="M2.071 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+  <svg x="464">
+    <path d="M2.046 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2c0 -1.104 0.897 -2 2 -2z"/>
+  </svg>
+  <svg x="480">
+    <path d="M2.062 6a2 2 0 0 1 0 4 2.001 2.001 0 0 1 -2 -2 2 2 0 0 1 2 -2z"/>
+  </svg>
+</svg>
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -196,23 +196,31 @@
      however, that currently forces main thread painting. When this is fixed
      (after WebRender lands), we can do something like
      `transition: fill 0.333s, opacity 0.333s;` */
 
   fill: currentColor;
   opacity: 0.7;
 }
 
-%ifdef NIGHTLY_BUILD
 @supports -moz-bool-pref("browser.tabs.30FpsThrobber") {
   :root[sessionrestored] .tab-throbber[busy]::before {
+    background-image: url("chrome://browser/skin/tabbrowser/loading-30fps.svg");
     animation: tab-throbber-animation 1.05s steps(30) infinite;
+    width: 480px;
   }
 }
-%endif
+
+@supports -moz-bool-pref("browser.tabs.20FpsThrobber") {
+  :root[sessionrestored] .tab-throbber[busy]::before {
+    background-image: url("chrome://browser/skin/tabbrowser/loading-20fps.svg");
+    animation: tab-throbber-animation 1.05s steps(20) infinite;
+    width: 320px;
+  }
+}
 
 :root[sessionrestored] .tab-throbber[busy]:-moz-locale-dir(rtl)::before {
   animation-name: tab-throbber-animation-rtl;
 }
 
 @keyframes tab-throbber-animation {
   0% { transform: translateX(0); }
   100% { transform: translateX(-100%); }