Bug 1873766: Add fill for VPN icon in PXI toolbar r=teshaq,desktop-theme-reviewers,Itiel

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

browser/base/content/appmenu-viewcache.inc.xhtml

@@ -626,7 +626,7 @@
         <toolbarbutton id="PanelUI-fxa-menu-monitor-button" class="subviewbutton subviewbutton-iconic"
           oncommand="gSync.openMonitorLink(this)">
           <vbox flex="1">
-            <hbox>
+            <hbox align="center">
               <image class="PanelUI-fxa-menu-monitor-button ctaMenuLogo" role="presentation" />
               <label id="fxa-menu-header-title" crop="end" data-l10n-id="pxi-menu-monitor-title" />
             </hbox>
@@ -636,7 +636,7 @@
         <toolbarbutton id="PanelUI-fxa-menu-relay-button" class="subviewbutton subviewbutton-iconic"
           oncommand="gSync.openRelayLink(this)">
           <vbox flex="1">
-            <hbox>
+            <hbox align="center">
               <image class="PanelUI-fxa-menu-relay-button ctaMenuLogo" role="presentation" />
               <label id="fxa-menu-header-title" crop="end" data-l10n-id="pxi-menu-relay-title" />
             </hbox>
@@ -646,7 +646,7 @@
         <toolbarbutton id="PanelUI-fxa-menu-vpn-button" class="subviewbutton subviewbutton-iconic"
           oncommand="gSync.openVPNLink(this)">
           <vbox flex="1">
-            <hbox>
+            <hbox align="center">
               <image class="PanelUI-fxa-menu-vpn-button ctaMenuLogo" role="presentation" />
               <label id="fxa-menu-header-title" crop="end" data-l10n-id="pxi-menu-vpn-title" />
             </hbox>

browser/themes/shared/customizableui/panelUI-shared.css

@@ -807,6 +807,8 @@ toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badg
 
 #PanelUI-fxa-menu-vpn-button {
   list-style-image: url("chrome://browser/skin/preferences/vpn-logo.svg");
+  -moz-context-properties: fill;
+  fill: currentColor;
 }
 
 :root:not([fxastatus="signedin"]) #PanelUI-fxa-menu-connect-device-button {