fix firefox hello icon

4 files changed, 28 insertions, 12 deletions

diff --git a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss
index c0eac2f..8aac321 100644
--- a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss
+++ b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss
@@ -1060,14 +1060,21 @@ toolbar[brighttext] #sync-button[status="active"] {
 }
 
 #loop-button > .toolbarbutton-badge-container {
-  list-style-image: url(chrome://browser/skin/loop/toolbar.png);
+  list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/loop-toolbar-icons.svg");
   -moz-image-region: rect(0, 18px, 18px, 0);
+
+  #TabsToolbar & { list-style-image: url("chrome://browser/skin/custom_images/#{$darker_asset_path_2}/loop-tabbar-icons.svg"); }
 }
 
-toolbar[brighttext] #loop-button > .toolbarbutton-badge-container {
-  list-style-image: url(chrome://browser/skin/loop/toolbar-inverted.png);
+#loop-button:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-container,
+#TabsToolbar #loop-button:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-container {
+  list-style-image: url("chrome://browser/skin/custom_images/loop-toolbar-icons-active.svg");
 }
 
+//toolbar[brighttext] #loop-button > .toolbarbutton-badge-container {
+//  list-style-image: url(chrome://browser/skin/loop/toolbar-inverted.png);
+//}
+
 #loop-button[state="disabled"] > .toolbarbutton-badge-container,
 #loop-button[disabled="true"] > .toolbarbutton-badge-container {
   -moz-image-region: rect(0, 36px, 18px, 18px);
diff --git a/arc-firefox-theme/chrome/browser/sass/browser-dark.css b/arc-firefox-theme/chrome/browser/sass/browser-dark.css
index e897904..81db042 100644
--- a/arc-firefox-theme/chrome/browser/sass/browser-dark.css
+++ b/arc-firefox-theme/chrome/browser/sass/browser-dark.css
@@ -786,11 +786,14 @@ toolbar[brighttext] #sync-button[status="active"] {
   -moz-image-region: rect(0, 720px, 18px, 702px); }
 
 #loop-button > .toolbarbutton-badge-container {
-  list-style-image: url(chrome://browser/skin/loop/toolbar.png);
+  list-style-image: url("chrome://browser/skin/custom_images/dark/loop-toolbar-icons.svg");
   -moz-image-region: rect(0, 18px, 18px, 0); }
+  #TabsToolbar #loop-button > .toolbarbutton-badge-container {
+    list-style-image: url("chrome://browser/skin/custom_images/dark/loop-tabbar-icons.svg"); }
 
-toolbar[brighttext] #loop-button > .toolbarbutton-badge-container {
-  list-style-image: url(chrome://browser/skin/loop/toolbar-inverted.png); }
+#loop-button:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-container,
+#TabsToolbar #loop-button:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-container {
+  list-style-image: url("chrome://browser/skin/custom_images/loop-toolbar-icons-active.svg"); }
 
 #loop-button[state="disabled"] > .toolbarbutton-badge-container,
 #loop-button[disabled="true"] > .toolbarbutton-badge-container {
diff --git a/arc-firefox-theme/chrome/browser/sass/browser-darker.css b/arc-firefox-theme/chrome/browser/sass/browser-darker.css
index 4a6899e..2cc34ff 100644
--- a/arc-firefox-theme/chrome/browser/sass/browser-darker.css
+++ b/arc-firefox-theme/chrome/browser/sass/browser-darker.css
@@ -786,11 +786,14 @@ toolbar[brighttext] #sync-button[status="active"] {
   -moz-image-region: rect(0, 720px, 18px, 702px); }
 
 #loop-button > .toolbarbutton-badge-container {
-  list-style-image: url(chrome://browser/skin/loop/toolbar.png);
+  list-style-image: url("chrome://browser/skin/custom_images/light/loop-toolbar-icons.svg");
   -moz-image-region: rect(0, 18px, 18px, 0); }
+  #TabsToolbar #loop-button > .toolbarbutton-badge-container {
+    list-style-image: url("chrome://browser/skin/custom_images/dark/loop-tabbar-icons.svg"); }
 
-toolbar[brighttext] #loop-button > .toolbarbutton-badge-container {
-  list-style-image: url(chrome://browser/skin/loop/toolbar-inverted.png); }
+#loop-button:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-container,
+#TabsToolbar #loop-button:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-container {
+  list-style-image: url("chrome://browser/skin/custom_images/loop-toolbar-icons-active.svg"); }
 
 #loop-button[state="disabled"] > .toolbarbutton-badge-container,
 #loop-button[disabled="true"] > .toolbarbutton-badge-container {
diff --git a/arc-firefox-theme/chrome/browser/sass/browser-light.css b/arc-firefox-theme/chrome/browser/sass/browser-light.css
index 5aed89b..74f5abd 100644
--- a/arc-firefox-theme/chrome/browser/sass/browser-light.css
+++ b/arc-firefox-theme/chrome/browser/sass/browser-light.css
@@ -786,11 +786,14 @@ toolbar[brighttext] #sync-button[status="active"] {
   -moz-image-region: rect(0, 720px, 18px, 702px); }
 
 #loop-button > .toolbarbutton-badge-container {
-  list-style-image: url(chrome://browser/skin/loop/toolbar.png);
+  list-style-image: url("chrome://browser/skin/custom_images/light/loop-toolbar-icons.svg");
   -moz-image-region: rect(0, 18px, 18px, 0); }
+  #TabsToolbar #loop-button > .toolbarbutton-badge-container {
+    list-style-image: url("chrome://browser/skin/custom_images/light/loop-tabbar-icons.svg"); }
 
-toolbar[brighttext] #loop-button > .toolbarbutton-badge-container {
-  list-style-image: url(chrome://browser/skin/loop/toolbar-inverted.png); }
+#loop-button:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-container,
+#TabsToolbar #loop-button:not([disabled=true]):-moz-any([open], [checked], :hover:active) > .toolbarbutton-badge-container {
+  list-style-image: url("chrome://browser/skin/custom_images/loop-toolbar-icons-active.svg"); }
 
 #loop-button[state="disabled"] > .toolbarbutton-badge-container,
 #loop-button[disabled="true"] > .toolbarbutton-badge-container {