Bug 1569620 - Update Fxa toolbar menu to latest skyline ux designs r=markh

Differential Revision: https://phabricator.services.mozilla.com/D40103 --HG-- extra : moz-landing-system : lando
2019-08-07 18:07:23 +00:00 · 2019-08-07 18:07:23 +00:00 · 8ea39bd830
--- a/browser/components/customizableui/content/panelUI.inc.xul
+++ b/browser/components/customizableui/content/panelUI.inc.xul
@ -742,22 +742,6 @@
                        label="&fxa.menu.syncSettings.label;"
                        oncommand="gSync.openPrefsFromFxaMenu('sync_settings', this);"/>
        <toolbarseparator/>
-        <toolbarbutton id="PanelUI-fxa-menu-logins-button"
-                        class="subviewbutton subviewbutton-iconic"
-                        label="&logins.label;"
-                        oncommand="LoginHelper.openPasswordManager(window, { entryPoint: 'fxamenu' })"/>
-        <toolbarseparator id="fxa-menu-service-separator"/>
-        <toolbarbutton id="PanelUI-fxa-menu-monitor-button"
-                        class="subviewbutton subviewbutton-iconic subviewbutton-nav"
-                        label="&monitorFullName;"
-                        closemenu="none"
-                        oncommand="PanelUI.showSubView('PanelUI-fxa-menu-monitor', this, event)"/>
-        <toolbarbutton id="PanelUI-fxa-menu-send-button"
-                        class="subviewbutton subviewbutton-iconic subviewbutton-nav"
-                        label="&sendFullName;"
-                        closemenu="none"
-                        oncommand="PanelUI.showSubView('PanelUI-fxa-menu-send', this, event)"/>
-        <toolbarseparator/>
        <!-- The `Sync Now` button is disabled by default until the user logs into Sync. -->
        <toolbarbutton id="PanelUI-fxa-menu-syncnow-button"
                        label="&syncSyncNowItem.label;"
@ -766,6 +750,24 @@
                        class="subviewbutton subviewbutton-iconic"
                        oncommand="gSync.doSyncFromFxaMenu(this);"
                        closemenu="none"/>
+        <toolbarseparator/>
+        <toolbarbutton id="PanelUI-fxa-menu-logins-button"
+                        class="subviewbutton subviewbutton-iconic"
+                        label="&logins.label;"
+                        oncommand="LoginHelper.openPasswordManager(window, { entryPoint: 'fxamenu' })"/>
+        <toolbarseparator id="fxa-menu-service-separator"/>
+        <label value="&fxa.menu.firefoxServices.label;"
+               class="subview-subheader"/>
+        <toolbarbutton id="PanelUI-fxa-menu-monitor-button"
+                       class="subviewbutton subviewbutton-iconic"
+                       label="&monitorFullName;"
+                       type="open-to-new"
+                       oncommand="gSync.openMonitorFromFxaMenu(this);"/>
+        <toolbarbutton id="PanelUI-fxa-menu-send-button"
+                       class="subviewbutton subviewbutton-iconic"
+                       label="&sendFullName;"
+                       type="open-to-new"
+                       oncommand="gSync.openSendFromFxaMenu(this);"/>
      </vbox>
    </panelview>
    <!-- This panelview is used to contain the dynamically created buttons for send tab to devices -->
@ -776,24 +778,6 @@
                       disabled="true"/>
      </vbox>
    </panelview>
-    <panelview id="PanelUI-fxa-menu-monitor" flex="1" class="PanelUI-subView">
-      <vbox id="PanelUI-fxa-monitor" align="center" class="panel-subview-body">
-        <image class="fxaMonitorLogo" role="presentation"/>
-        <label class="PanelUI-fxa-service-description-label">&fxa.service.monitor.description;</label>
-        <toolbarbutton class="PanelUI-fxa-signin-button"
-                       label="&fxa.service.monitor.launch;"
-                       oncommand="gSync.openMonitorFromFxaMenu(this);"/>
-      </vbox>
-    </panelview>
-    <panelview id="PanelUI-fxa-menu-send" flex="1" class="PanelUI-subView">
-      <vbox id="PanelUI-fxa-send" align="center" class="panel-subview-body">
-        <image class="fxaSendLogo" role="presentation"/>
-        <label class="PanelUI-fxa-service-description-label">&fxa.service.send.description;</label>
-        <toolbarbutton class="PanelUI-fxa-signin-button"
-                       label="&fxa.service.send.launch;"
-                       oncommand="gSync.openSendFromFxaMenu(this);"/>
-      </vbox>
-    </panelview>
    <panelview id="PanelUI-fxa-menu-sendtab-not-configured" flex="1" class="PanelUI-subView">
      <vbox id="PanelUI-fxa-sendtab-not-configured" align="center" class="panel-subview-body">
        <image class="fxaSendToDeviceLogo" role="presentation"/>
--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@ -105,6 +105,7 @@ convenience of Safari and Chrome users on macOS. See bug 1398988. -->
 <!ENTITY fxa.menu.signin.label "Sign in to &brandProductName;">
 <!ENTITY fxa.menu.turnOnSync.label "Turn on &syncBrand.shortName.label;">
 <!ENTITY fxa.menu.account.label "Account">
+<!ENTITY fxa.menu.firefoxServices.label "&brandProductName; Services">

 <!-- LOCALIZATION NOTE (fxa.service) Used to define the different FxA services
     for the Firefox Account toolbar menu screen.  -->
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@ -1161,6 +1161,16 @@ panelview .toolbarbutton-1,
  color: inherit;
 }

+.subviewbutton[type="open-to-new"]::after {
+  content: url(chrome://browser/skin/open-in-new.svg);
+  -moz-context-properties: fill, fill-opacity;
+  fill: currentColor;
+  fill-opacity: 0.6;
+  float: right;
+  height: 12px;
+  width: 12px;
+}
+
 #appMenu-popup .toolbaritem-combined-buttons {
  -moz-box-align: center;
  -moz-box-orient: horizontal;
--- a/browser/themes/shared/fxa/monitor.svg
+++ b/browser/themes/shared/fxa/monitor.svg
@ -1,4 +1,4 @@
 <!-- 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" viewBox="0 0 16 16"><path fill="context-fill" fill-opacity="context-fill-opacity" d="M14 3.43L9.11.64 9 .58a2 2 0 0 0-2 0L2.11 3.37 2 3.43a2 2 0 0 0-1 1.74v5.7a2 2 0 0 0 1 1.74l4.89 2.79a1 1 0 0 0 1.32-.35 1 1 0 0 0-.36-1.32L3.08 11a.29.29 0 0 1-.14-.25V5.29A.27.27 0 0 1 3.08 5l4.77-2.69a.29.29 0 0 1 .3 0L12.92 5a.29.29 0 0 1 .14.25v5.46a.29.29 0 0 1-.14.25l-1.44.82-.6-.9A4.11 4.11 0 1 0 8 12.1a3.84 3.84 0 0 0 1.22-.19l1.15 1.73a.48.48 0 0 0 .1.12.46.46 0 0 0 .1.1l.15.08.16.06h.37a.57.57 0 0 0 .15 0h.18L14 12.61a2 2 0 0 0 1-1.74v-5.7a2 2 0 0 0-1-1.74zM8 5.86A2.16 2.16 0 1 1 5.83 8 2.17 2.17 0 0 1 8 5.86z"/></svg>
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="11.048" x2="3.442" y1="1.867" y2="15.04"><stop offset="0" stop-color="#ff9640"/><stop offset=".6" stop-color="#fc4055"/><stop offset="1" stop-color="#e31587"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="11.048" x2="3.442" y1="1.867" y2="15.04"><stop offset="0" stop-color="#fff36e" stop-opacity=".8"/><stop offset=".094" stop-color="#fff36e" stop-opacity=".699"/><stop offset=".752" stop-color="#fff36e" stop-opacity="0"/></linearGradient><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="7.47" x2="13.655" y1="10.491" y2="4.306"><stop offset="0" stop-color="#0090ed"/><stop offset=".325" stop-color="#5b6df8"/><stop offset=".529" stop-color="#9059ff"/><stop offset="1" stop-color="#b833e1"/></linearGradient><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="12.222" x2="14.968" y1="13.939" y2="6.773"><stop offset="0" stop-color="#054096" stop-opacity=".5"/><stop offset=".054" stop-color="#0f3d9c" stop-opacity=".441"/><stop offset=".261" stop-color="#2f35b1" stop-opacity=".249"/><stop offset=".466" stop-color="#462fbf" stop-opacity=".111"/><stop offset=".669" stop-color="#542bc8" stop-opacity=".028"/><stop offset=".864" stop-color="#592acb" stop-opacity="0"/></linearGradient><linearGradient id="e" gradientUnits="userSpaceOnUse" x1="8.46" x2="14.98" y1="1.312" y2="6.859"><stop offset="0" stop-color="#722291" stop-opacity=".5"/><stop offset=".5" stop-color="#722291" stop-opacity="0"/></linearGradient><linearGradient id="f" gradientUnits="userSpaceOnUse" x1="9.229" x2="10.299" y1="11.053" y2="12.327"><stop offset="0" stop-color="#960e18" stop-opacity=".6"/><stop offset=".192" stop-color="#ac1624" stop-opacity=".476"/><stop offset=".579" stop-color="#e42c41" stop-opacity=".156"/><stop offset=".75" stop-color="#ff3750" stop-opacity="0"/></linearGradient><symbol id="g" viewBox="0 0 15 15.929"><path d="m13.7 3.049-5-2.741a2.5 2.5 0 0 0 -2.4 0l-5 2.741a2.5 2.5 0 0 0 -1.3 2.192v5.566a2.5 2.5 0 0 0 1.264 2.173l4.954 2.82a.99.99 0 0 0 .493.131 1 1 0 0 0 .5-1.869l-4.453-2.532a1.5 1.5 0 0 1 -.758-1.304v-4.393a1.5 1.5 0 0 1 .779-1.315l4-2.193a1.5 1.5 0 0 1 1.442 0l4 2.193a1.5 1.5 0 0 1 .779 1.315v4.351a1.5 1.5 0 0 1 -.791 1.322l-1.007.54-.834-1.34a3.992 3.992 0 1 0 -2.868 1.223 3.953 3.953 0 0 0 1.156-.19l1.344 2.161a1 1 0 0 0 1.321.353l2.361-1.267a2.5 2.5 0 0 0 1.318-2.204v-5.541a2.5 2.5 0 0 0 -1.3-2.192zm-8.2 4.88a2 2 0 1 1 2 2 2 2 0 0 1 -2-2z" fill="url(#a)"/><path d="m13.7 3.049-5-2.741a2.5 2.5 0 0 0 -2.4 0l-5 2.741a2.5 2.5 0 0 0 -1.3 2.192v5.566a2.5 2.5 0 0 0 1.264 2.173l4.954 2.82a.99.99 0 0 0 .493.131 1 1 0 0 0 .5-1.869l-4.453-2.532a1.5 1.5 0 0 1 -.758-1.304v-4.393a1.5 1.5 0 0 1 .779-1.315l4-2.193a1.5 1.5 0 0 1 1.442 0l4 2.193a1.5 1.5 0 0 1 .779 1.315v4.351a1.5 1.5 0 0 1 -.791 1.322l-1.007.54-.834-1.34a3.992 3.992 0 1 0 -2.868 1.223 3.953 3.953 0 0 0 1.156-.19l1.344 2.161a1 1 0 0 0 1.321.353l2.361-1.267a2.5 2.5 0 0 0 1.318-2.204v-5.541a2.5 2.5 0 0 0 -1.3-2.192zm-8.2 4.88a2 2 0 1 1 2 2 2 2 0 0 1 -2-2z" fill="url(#b)"/><use height="-32766" transform="translate(16390.518 16390.929)" width="-32766" xlink:href="#c"/><path d="m13.288 13.2.394-.211a2.5 2.5 0 0 0 1.318-2.207v-5.541a2.5 2.5 0 0 0 -1.3-2.192l-2.47-1.355a3.434 3.434 0 0 0 -3.305 0l-1.146.63a1.5 1.5 0 0 1 1.442 0l4 2.193a1.5 1.5 0 0 1 .779 1.316v4.351a1.5 1.5 0 0 1 -.791 1.322l-1.007.54.429.7a1.249 1.249 0 0 0 1.657.454z" fill="url(#c)"/><path d="m13 10.184a1.5 1.5 0 0 1 -.791 1.322l-1.007.54.429.7a1.25 1.25 0 0 0 1.658.449l.393-.211a2.5 2.5 0 0 0 1.318-2.203v-2.817h-2z" fill="url(#d)" opacity=".9"/><path d="m13.7 3.049-2.47-1.355a3.434 3.434 0 0 0 -3.305 0l-1.146.63a1.5 1.5 0 0 1 1.442 0l4 2.193a1.5 1.5 0 0 1 .779 1.316v2.131h2v-2.723a2.5 2.5 0 0 0 -1.3-2.192z" fill="url(#e)"/><path d="m11.2 12.046-.834-1.34a3.991 3.991 0 0 1 -1.713 1.033l.808 1.3z" fill="url(#f)" opacity=".9"/></symbol><use height="15.929" transform="translate(.5 .071)" width="15" xlink:href="#g"/></svg>
--- a/browser/themes/shared/fxa/send.svg
+++ b/browser/themes/shared/fxa/send.svg
@ -1,4 +1,4 @@
 <!-- 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" viewBox="0 0 16 16"><path fill="context-fill" fill-opacity="context-fill-opacity" d="M8 0a8.06 8.06 0 0 0-8 7.37 1.54 1.54 0 0 0 .4 1.15A1.48 1.48 0 0 0 1.5 9H7v3.59l-1.3-1.3a1 1 0 0 0-1.41 0 1 1 0 0 0 0 1.42l3 3a1.15 1.15 0 0 0 .33.21A1 1 0 0 0 8 16a1.09 1.09 0 0 0 .39-.08 1 1 0 0 0 .32-.21l3-3a1 1 0 0 0-1.42-1.42L9 12.59V9h5.51A1.49 1.49 0 0 0 16 7.37 8 8 0 0 0 8 0zm0 7H2.07a6 6 0 0 1 11.86 0z"/><path fill="context-fill" fill-opacity="context-fill-opacity" d="M8 0a8.06 8.06 0 0 0-8 7.37 1.54 1.54 0 0 0 .4 1.15A1.48 1.48 0 0 0 1.5 9H7v3.59l-1.3-1.3a1 1 0 0 0-1.41 0 1 1 0 0 0 0 1.42l3 3a1.15 1.15 0 0 0 .33.21A1 1 0 0 0 8 16a1.09 1.09 0 0 0 .39-.08 1 1 0 0 0 .32-.21l3-3a1 1 0 0 0-1.42-1.42L9 12.59V9h5.51A1.49 1.49 0 0 0 16 7.37 8 8 0 0 0 8 0zm0 7H2.07a6 6 0 0 1 11.86 0z"/></svg>
+<svg height="16" width="16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="11.369" x2="3.641" y1="1.065" y2="14.451"><stop offset="0" stop-color="#ff9640"/><stop offset=".6" stop-color="#fc4055"/><stop offset="1" stop-color="#e31587"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="11.369" x2="3.641" y1="1.065" y2="14.451"><stop offset="0" stop-color="#fff36e" stop-opacity=".8"/><stop offset=".094" stop-color="#fff36e" stop-opacity=".699"/><stop offset=".752" stop-color="#fff36e" stop-opacity="0"/></linearGradient><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="8.984" x2="12.975" y1="10.186" y2="3.273"><stop offset="0" stop-color="#0090ed"/><stop offset=".386" stop-color="#5b6df8"/><stop offset=".629" stop-color="#9059ff"/><stop offset="1" stop-color="#b833e1"/></linearGradient><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="8.119" x2="14.738" y1="7.437" y2="9.03"><stop offset="0" stop-color="#054096" stop-opacity=".5"/><stop offset=".054" stop-color="#0f3d9c" stop-opacity=".441"/><stop offset=".261" stop-color="#2f35b1" stop-opacity=".249"/><stop offset=".466" stop-color="#462fbf" stop-opacity=".111"/><stop offset=".669" stop-color="#542bc8" stop-opacity=".028"/><stop offset=".864" stop-color="#592acb" stop-opacity="0"/></linearGradient><linearGradient id="e" gradientUnits="userSpaceOnUse" x1="12.93" x2="9.059" y1="3.351" y2="10.055"><stop offset="0" stop-color="#722291" stop-opacity=".5"/><stop offset=".295" stop-color="#722291" stop-opacity="0"/></linearGradient><path d="m8.017 0a8.036 8.036 0 0 0 -7.978 7.374 1.522 1.522 0 0 0 .4 1.151 1.5 1.5 0 0 0 1.096.475h5.465v3.584l-1.293-1.291a1 1 0 0 0 -1.414 1.414l3 3a1 1 0 0 0 .325.216.986.986 0 0 0 .764 0 1 1 0 0 0 .325-.216l3-3a1 1 0 0 0 -1.414-1.414l-1.293 1.293v-3.586h5.5a1.5 1.5 0 0 0 1.1-.478 1.523 1.523 0 0 0 .4-1.148 8.037 8.037 0 0 0 -7.983-7.374zm0 7h-5.917a6 6 0 0 1 11.84 0z" fill="url(#a)"/><path d="m8.017 0a8.036 8.036 0 0 0 -7.978 7.374 1.522 1.522 0 0 0 .4 1.151 1.5 1.5 0 0 0 1.096.475h5.465v3.584l-1.293-1.291a1 1 0 0 0 -1.414 1.414l3 3a1 1 0 0 0 .325.216.986.986 0 0 0 .764 0 1 1 0 0 0 .325-.216l3-3a1 1 0 0 0 -1.414-1.414l-1.293 1.293v-3.586h5.5a1.5 1.5 0 0 0 1.1-.478 1.523 1.523 0 0 0 .4-1.148 8.037 8.037 0 0 0 -7.983-7.374zm0 7h-5.917a6 6 0 0 1 11.84 0z" fill="url(#b)"/><path d="m7 9 1.009-7a6.042 6.042 0 0 1 5.928 5h-2.937a2 2 0 0 0 -2 2h5.5a1.5 1.5 0 0 0 1.5-1.626c-.327-3.574-4.549-5.517-7.991-5.374z" fill="url(#c)"/><path d="m13.937 7h-2.937a2 2 0 0 0 -2 2h5.5a1.5 1.5 0 0 0 1.1-.478z" fill="url(#d)" opacity=".9"/><path d="m15.6 8.522a1.5 1.5 0 0 0 .4-1.148c-.327-3.574-4.549-5.517-7.991-5.374a6.042 6.042 0 0 1 5.928 5z" fill="url(#e)"/></svg>
--- a/browser/themes/shared/icons/open-in-new.svg
+++ b/browser/themes/shared/icons/open-in-new.svg
@ -0,0 +1,4 @@
+<!-- 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 viewBox="0 0 12 12" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg"><path d="M4 0c.6 0 1 .4 1 1s-.5 1-1 1H3c-.6 0-1 .4-1 1v6c0 .6.4 1 1 1h6c.6 0 1-.4 1-1V8c0-.6.4-1 1-1s1 .4 1 1v1c0 1.7-1.3 3-3 3H3c-1.7 0-3-1.3-3-3V3c0-1.7 1.3-3 3-3zm7 0c.4 0 .8.2.9.6.1.1.1.3.1.4v3c0 .6-.4 1-1 1s-1-.4-1-1v-.6L8.7 4.7c-.2.3-.6.4-1 .3-.3-.1-.6-.4-.7-.7s0-.7.3-1L8.6 2H8c-.5 0-1-.4-1-1s.4-1 1-1z"/></svg>
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@ -190,6 +190,7 @@
  skin/classic/browser/new-tab.svg                    (../shared/icons/new-tab.svg)
  skin/classic/browser/new-window.svg                 (../shared/icons/new-window.svg)
  skin/classic/browser/open.svg                       (../shared/icons/open.svg)
+  skin/classic/browser/open-in-new.svg                (../shared/icons/open-in-new.svg)
  skin/classic/browser/pin-tab.svg                    (../shared/icons/pin-tab.svg)
  skin/classic/browser/pocket.svg                     (../shared/icons/pocket.svg)
  skin/classic/browser/pocket-animation.svg           (../shared/icons/pocket-animation.svg)