Bug 1453701 - Add 30fps and 20fps configurations for the tab loading throbber. r=jaws
authorMike Conley <mconley@mozilla.com>
Thu, 12 Apr 2018 13:45:49 -0400
changeset 413072 d0392a55774becf075a7e20ecfe852a497e96644
parent 413071 d87d4e86f054614a6cad43c948f5484f9ecd0b1b
child 413073 19dfac734e3ef2a6620ddc1af4c2cb1aba06d901
push id33833
push useraiakab@mozilla.com
push dateFri, 13 Apr 2018 09:41:15 +0000
treeherdermozilla-central@260e4c83c8a9 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1453701
milestone61.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 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
@@ -182,16 +182,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%); }