Bug 1696553 - Move the loading burst inside of the tab-background so it will get clipped by the tab shape and border radius. r=desktop-theme-reviewers,ntim

Differential Revision: https://phabricator.services.mozilla.com/D110139

browser/base/content/tabbrowser-tab.js

@@ -13,7 +13,7 @@
         ? `
         <vbox class="tab-background">
           <hbox class="tab-context-line"/>
-          <spacer flex="1" class="tab-background-inner"/>
+          <hbox class="tab-loading-burst proton" flex="1"/>
         </vbox>
 `
         : `
@@ -101,7 +101,9 @@
         ".tab-background": "selected=visuallyselected,fadein,multiselected",
         ".tab-line":
           "selected=visuallyselected,multiselected,before-multiselected",
-        ".tab-loading-burst": "pinned,bursting,notselectedsinceload",
+        ".tab-loading-burst.proton": "pinned,bursting,notselectedsinceload",
+        ".tab-loading-burst:not(.proton)":
+          "pinned,bursting,notselectedsinceload",
         ".tab-content":
           "pinned,selected=visuallyselected,titlechanged,attention",
         ".tab-icon-stack":

browser/themes/shared/tabs.inc.css

@@ -137,11 +137,21 @@
 :root:not([uidensity=compact]) .tab-content[pinned] {
   padding: 0 12px;
 }
+
+.tab-loading-burst.proton {
+  display: none;
+}
 } /*** END !proton ***/
 
+@supports -moz-bool-pref("browser.proton.enabled") {
+.tab-loading-burst:not(.proton) {
+  display: none;
+}
+} /*** END proton ***/
 
 @media (prefers-reduced-motion: no-preference) {
   :root[sessionrestored] .tab-loading-burst {
+    border-radius: inherit;
     position: relative;
     overflow: hidden;
   }
@@ -731,10 +741,6 @@
 }
 } /*** END proton ***/
 
-.tab-background-inner {
-  border-radius: inherit;
-}
-
 @supports not -moz-bool-pref("browser.proton.enabled") {
 
 %ifdef MENUBAR_CAN_AUTOHIDE