From d22f61f1e75999b74b4ffc78fc3951fa51c227c6 Mon Sep 17 00:00:00 2001
From: bmFtZQ <aaaa2048@outlook.com>
Date: Fri, 3 Dec 2021 15:04:55 +0800
Subject: [PATCH] add reload/stop animation

---
 chrome/icons/icons.css          | 63 +++++++++++++++++++--------------
 chrome/icons/reload-to-stop.svg | 28 +++++++++++++++
 chrome/icons/stop-to-reload.svg | 35 ++++++++++++++++++
 3 files changed, 100 insertions(+), 26 deletions(-)
 create mode 100644 chrome/icons/reload-to-stop.svg
 create mode 100644 chrome/icons/stop-to-reload.svg

diff --git a/chrome/icons/icons.css b/chrome/icons/icons.css
index 8867528..53b59bd 100644
--- a/chrome/icons/icons.css
+++ b/chrome/icons/icons.css
@@ -276,7 +276,7 @@
 #identity-popup-mainView .subviewbutton-nav::after,
 .widget-overflow-list .subviewbutton-nav::after,
 .PanelUI-subView .subviewbutton-nav::after {
-	content: url(arrow-right.svg) !important;
+	content: url("arrow-right.svg") !important;
 }
 
 #PlacesChevron,
@@ -305,12 +305,14 @@
 .tab-icon-image[src="chrome://branding/content/icon32.png"],
 .tab-icon-image[src="chrome://global/skin/icons/settings.svg"],
 .tab-icon-image[src="chrome://mozapps/skin/extensions/extension.svg"],
-.tab-icon-image[src="chrome://browser/skin/customize.svg"] {
+.tab-icon-image[src="chrome://browser/skin/customize.svg"],
+.tab-icon-image[src="chrome://browser/skin/privatebrowsing/favicon.svg"] {
 	padding-left: 16px !important;
 	box-sizing: border-box !important;
 }
 
-.tab-icon-image[src="chrome://branding/content/icon32.png"] {
+.tab-icon-image[src="chrome://branding/content/icon32.png"],
+.tab-icon-image[src="chrome://browser/skin/privatebrowsing/favicon.svg"] {
 	background: url("new-tab-image.svg") !important;
 }
 
@@ -329,105 +331,105 @@
 
 /* permissions */
 #permissions-granted-icon {
-  list-style-image: url(permissions.svg) !important;
+  list-style-image: url("permissions.svg") !important;
 }
 
 .geo-icon {
-  list-style-image: url(geo.svg) !important;
+  list-style-image: url("geo.svg") !important;
 }
 
 .geo-icon.blocked-permission-icon {
-  list-style-image: url(geo-blocked.svg) !important;
+  list-style-image: url("geo-blocked.svg") !important;
 }
 
 .xr-icon {
-  list-style-image: url(xr.svg) !important;
+  list-style-image: url("xr.svg") !important;
 }
 
 .xr-icon.blocked-permission-icon {
-  list-style-image: url(xr-blocked.svg) !important;
+  list-style-image: url("xr-blocked.svg") !important;
 }
 
 .popup-notification-icon[popupid="web-notifications"],
 .desktop-notification-icon {
-  list-style-image: url(desktop-notification.svg) !important;
+  list-style-image: url("desktop-notification.svg") !important;
 }
 
 .desktop-notification-icon.blocked-permission-icon {
-  list-style-image: url(desktop-notification-blocked.svg) !important;
+  list-style-image: url("desktop-notification-blocked.svg") !important;
 }
 
 .camera-icon {
-  list-style-image: url(camera.svg) !important;
+  list-style-image: url("camera.svg") !important;
 }
 
 .camera-icon.blocked-permission-icon {
-  list-style-image: url(camera-blocked.svg) !important;
+  list-style-image: url("camera-blocked.svg") !important;
 }
 
 .microphone-icon {
-  list-style-image: url(microphone.svg) !important;
+  list-style-image: url("microphone.svg") !important;
 }
 
 .microphone-icon.blocked-permission-icon {
-  list-style-image: url(microphone-blocked.svg) !important;
+  list-style-image: url("microphone-blocked.svg") !important;
 }
 
 .screen-icon {
-  list-style-image: url(screen.svg) !important;
+  list-style-image: url("screen.svg") !important;
 }
 
 .screen-icon.blocked-permission-icon {
-  list-style-image: url(screen-blocked.svg) !important;
+  list-style-image: url("screen-blocked.svg") !important;
 }
 
 .popup-notification-icon[popupid="persistent-storage"],
 .persistent-storage-icon {
-  list-style-image: url(persistent-storage.svg) !important;
+  list-style-image: url("persistent-storage.svg") !important;
 }
 
 .persistent-storage-icon.blocked-permission-icon {
-  list-style-image: url(persistent-storage-blocked.svg) !important;
+  list-style-image: url("persistent-storage-blocked.svg") !important;
 }
 
 .popup-icon {
-  list-style-image: url(popup.svg) !important;
+  list-style-image: url("popup.svg") !important;
 }
 
 .autoplay-media-icon {
-  list-style-image: url(autoplay-media.svg) !important;
+  list-style-image: url("autoplay-media.svg") !important;
 }
 
 .autoplay-media-icon.blocked-permission-icon {
-  list-style-image: url(autoplay-media-blocked.svg) !important;
+  list-style-image: url("autoplay-media-blocked.svg") !important;
 }
 
 #canvas-notification-icon,
 .popup-notification-icon[popupid="canvas-permissions-prompt"],
 .canvas-icon {
-  list-style-image: url(canvas.svg) !important;
+  list-style-image: url("canvas.svg") !important;
 }
 
 .canvas-icon.blocked-permission-icon {
-  list-style-image: url(canvas-blocked.svg) !important;
+  list-style-image: url("canvas-blocked.svg") !important;
 }
 
 .midi-icon,
 .midi-sysex-icon,
 .popup-notification-icon[popupid="midi"],
 .popup-notification-icon[popupid="midi-sysex"] {
-  list-style-image: url(midi.svg) !important;
+  list-style-image: url("midi.svg") !important;
 }
 
 .install-icon {
-  list-style-image: url(extension.svg) !important;
+  list-style-image: url("extension.svg") !important;
 }
 
 .install-icon.blocked-permission-icon,
 .popup-notification-icon[popupid="xpinstall-disabled"],
 .popup-notification-icon[popupid="addon-install-blocked"],
 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
-  list-style-image: url(extension-blocked.svg) !important;
+  list-style-image: url("extension-blocked.svg") !important;
 }
 
 /* tab sound icons */
@@ -442,3 +444,12 @@
 .tab-icon-overlay[activemedia-blocked] {
   list-style-image: url("tab-audio-blocked-small.svg") !important;
 }
+
+/* reload/stop animation */
+#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
+  background-image: url("reload-to-stop.svg") !important;
+}
+
+#stop-reload-button[animate] > #reload-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
+  background-image: url("stop-to-reload.svg") !important;
+}
diff --git a/chrome/icons/reload-to-stop.svg b/chrome/icons/reload-to-stop.svg
new file mode 100644
index 0000000..13b1bd9
--- /dev/null
+++ b/chrome/icons/reload-to-stop.svg
@@ -0,0 +1,28 @@
+<!-- do not round the stroke-width -->
+<svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.001" stroke="context-fill" stroke-opacity="context-fill-opacity" width="260" height="20" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <defs>
+    <clipPath id="a"><path d="M0 3h6l8 7 5 1v9H0z"/></clipPath>
+    <clipPath id="b"><path d="M9 0v12l-5 8H0V0z"/></clipPath>
+    <clipPath id="c"><path d="m5 3 2 4h5V0H5z"/></clipPath>
+    <clipPath id="d"><path d="m10 8-2 2-5-5 2-2z"/></clipPath>
+    <clipPath id="e"><path d="m5 3 10 10-2 2L3 5z"/></clipPath>
+    <clipPath id="f"><path d="m5 3 12 12-2 2L3 5z"/></clipPath>
+    <clipPath id="g"><path d="m3 1 16 16H3z"/></clipPath>
+    <clipPath id="h"><path d="M3 3h7l7 7v7H3z"/></clipPath>
+    <path id="reload" d="M17.48 9.5v.5c0 4.1-3.4 7.5-7.5 7.5s-7.5-3.4-7.5-7.5 3.4-7.5 7.5-7.5c2.8 0 5.2 1.5 6.5 3.8m.02-3.8v4h-4"/>
+    <path id="close" d="m4.5 4.5 11 11m-11 0 11-11"/>
+  </defs>
+  <svg><use href="#reload"/></svg>
+  <svg x="20"><use href="#reload" transform="rotate(45 10 10)"/></svg>
+  <svg x="40"><use href="#reload" transform="rotate(125 10 10)"/></svg>
+  <svg x="60"><use href="#reload" transform="rotate(195 10 10)"/></svg>
+  <svg x="80"><use href="#reload" transform="rotate(235 10 10)"/></svg>
+  <svg x="100"><g clip-path="url(#a)"><use href="#reload" transform="rotate(260 10 10)"/></g></svg>
+  <svg x="120"><g clip-path="url(#b)"><use href="#reload" transform="rotate(280 10 10)"/></g></svg>
+  <svg x="140"><g clip-path="url(#c)"><use href="#reload" transform="rotate(300 10 10)"/></g><use href="#close" clip-path="url(#d)"/></svg>
+  <svg x="160"><use href="#close" clip-path="url(#e)"/></svg>
+  <svg x="180"><use href="#close" clip-path="url(#f)"/></svg>
+  <svg x="200"><use href="#close" clip-path="url(#g)"/></svg>
+  <svg x="220"><use href="#close" clip-path="url(#h)"/></svg>
+  <svg x="240"><use href="#close"/></svg>
+</svg>
diff --git a/chrome/icons/stop-to-reload.svg b/chrome/icons/stop-to-reload.svg
new file mode 100644
index 0000000..0f9d2d1
--- /dev/null
+++ b/chrome/icons/stop-to-reload.svg
@@ -0,0 +1,35 @@
+<!-- do not round the stroke-width -->
+<svg xmlns="http://www.w3.org/2000/svg" stroke-width="1.001" stroke="context-fill" stroke-opacity="context-fill-opacity" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <defs>
+    <clipPath id="a"><path d="m3 6 11 11h3V3H3Z"/></clipPath>
+    <clipPath id="b"><path d="M5 3 3 5l12 12 2-2L5 3zm10 0-2 2 2 2 2-2-2-2z"/></clipPath>
+    <clipPath id="c"><path d="m5 3 12 12-2 2L3 5Z"/></clipPath>
+    <clipPath id="d"><path d="m5 3 7 7-2 2-7-7z"/></clipPath>
+    <clipPath id="e"><path d="m5 3 2 2-2 2-2-2Z"/></clipPath>
+    <clipPath id="f"><path d="m16 3-4 6h10Z"/></clipPath>
+    <clipPath id="g"><path d="m11 11 8 6V4h-4z"/></clipPath>
+    <clipPath id="h"><path d="m11 11-1 9h9V0l-7 8z"/></clipPath>
+    <clipPath id="i"><path d="M16 3 3 17v3h16V3Z"/></clipPath>
+    <clipPath id="j"><path d="m16 3-3 4-13 3v10h19V3Z"/></clipPath>
+    <clipPath id="k"><path d="m16 3-3 4L0 2v18h20V3Z"/></clipPath>
+    <clipPath id="l"><path d="m16 3-3 4-8-7H0v20h20V3Z"/></clipPath>
+    <clipPath id="m"><path d="m16 3-3 4-2-7H0v20h20V3Z"/></clipPath>
+    <path id="reload" d="M17.48 9.5v.5c0 4.1-3.4 7.5-7.5 7.5s-7.5-3.4-7.5-7.5 3.4-7.5 7.5-7.5c2.8 0 5.2 1.5 6.5 3.8m.02-3.8v4h-4"/>
+    <path id="close" d="m4.5 4.5 11 11m-11 0 11-11"/>
+  </defs>
+  <svg><use href="#close"/></svg>
+  <svg x="20"><use href="#close" clip-path="url(#a)"/></svg>
+  <svg x="40"><use href="#close" clip-path="url(#b)"/></svg>
+  <svg x="60"><g clip-path="url(#f)"><use href="#reload" transform="rotate(40 10 10)"/></g><use href="#close" clip-path="url(#c)"/></svg>
+  <svg x="80"><g clip-path="url(#g)"><use href="#reload" transform="rotate(80 10 10)"/></g><use href="#close" clip-path="url(#d)"/></svg>
+  <svg x="100"><g clip-path="url(#h)"><use href="#reload" transform="rotate(120 10 10)"/></g><use href="#close" clip-path="url(#e)"/></svg>
+  <svg x="120"><g clip-path="url(#i)"><use href="#reload" transform="rotate(160 10 10)"/></g></svg>
+  <svg x="140"><g clip-path="url(#j)"><use href="#reload" transform="rotate(200 10 10)"/></g></svg>
+  <svg x="160"><g clip-path="url(#k)"><use href="#reload" transform="rotate(250 10 10)"/></g></svg>
+  <svg x="180"><g clip-path="url(#l)"><use href="#reload" transform="rotate(270 10 10)"/></g></svg>
+  <svg x="200"><g clip-path="url(#m)"><use href="#reload" transform="rotate(300 10 10)"/></g></svg>
+  <svg x="220"><use href="#reload" transform="rotate(335 10 10)"/></svg>
+  <svg x="240"><use href="#reload" transform="rotate(345 10 10)"/></svg>
+  <svg x="260"><use href="#reload" transform="rotate(355 10 10)"/></svg>
+  <svg x="280"><use href="#reload"/></svg>
+</svg>