Bug 1999368 - Adjust Send Tab position and add visual dividers in menus. r=skhamis,fluent-reviewers,fxview-reviewers,tabbrowser-reviewers,bolsson,nsharpley

mhammond · mhammond · commit aaf8cb5f4223 · 2025-11-17T18:48:23.000Z
Differential Revision: https://phabricator.services.mozilla.com/D272076
diff --git a/browser/base/content/appmenu-viewcache.inc.xhtml b/browser/base/content/appmenu-viewcache.inc.xhtml
@@ -630,17 +630,18 @@
                       data-l10n-id="fxa-menu-connect-another-device"
                       disabled="true"
                       />
-      <toolbarbutton id="PanelUI-fxa-menu-sendtab-button"
-                      class="subviewbutton subviewbutton-nav"
-                      data-l10n-id="fxa-menu-send-tab-to-device"
-                      data-l10n-args='{"tabCount":1}'
-                      closemenu="none"
-                      />
       <toolbarbutton id="PanelUI-fxa-menu-sync-prefs-button"
                       class="subviewbutton"
                       data-l10n-id="fxa-menu-sync-settings"
                       hidden="true"
                       />
+      <toolbarseparator id="PanelUI-fxa-menu-sendtab-separator" />
+      <toolbarbutton id="PanelUI-fxa-menu-sendtab-button"
+                      class="subviewbutton subviewbutton-nav"
+                      data-l10n-id="fxa-menu-send-to-device"
+                      data-l10n-args='{"tabCount":1}'
+                      closemenu="none"
+                      />
       <toolbarseparator id="PanelUI-sign-out-separator" />
       <toolbarbutton id="PanelUI-fxa-menu-account-signout-button"
               class="subviewbutton"
diff --git a/browser/base/content/browser-context.inc b/browser/base/content/browser-context.inc
@@ -122,6 +122,7 @@
                 data-l10n-id="main-context-menu-copy-clean-link"
                 hidden="true"
                 />
+      <menuseparator id="context-sep-copylink"/>
       <menu id="context-sendlinktodevice"
             class="sync-ui-item"
             data-l10n-id="main-context-menu-link-send-to-device"
@@ -130,7 +131,6 @@
       </menu>
       <menuseparator id="context-sep-sendlinktodevice" class="sync-ui-item"
                 hidden="true"/>
-      <menuseparator id="context-sep-copylink"/>
       <menuitem id="context-media-play"
                 data-l10n-id="main-context-menu-media-play"
                 />
@@ -263,12 +263,6 @@
       <menuitem id="context-savepage"
                 data-l10n-id="main-context-menu-page-save"
                 />
-      <menu id="context-sendpagetodevice"
-            class="sync-ui-item"
-            data-l10n-id="main-context-menu-send-to-device"
-            hidden="true">
-        <menupopup id="context-sendpagetodevice-popup"/>
-      </menu>
       <menu id="fill-login" hidden="true">
         <menupopup id="fill-login-popup" />
       </menu>
@@ -439,6 +433,15 @@
                 hidden="true"
                 data-l10n-id="main-context-menu-inspect"
                 />
+      <menuseparator id="context-sep-sendpagetodevice"
+            class="sync-ui-item"
+            hidden="true"/>
+      <menu id="context-sendpagetodevice"
+            class="sync-ui-item"
+            data-l10n-id="main-context-menu-send-to-device-2"
+            hidden="true">
+        <menupopup id="context-sendpagetodevice-popup"/>
+      </menu>
       <menuseparator id="context-media-eme-separator" hidden="true"/>
       <menuitem id="context-media-eme-learnmore"
                 class="menuitem-iconic"
diff --git a/browser/base/content/browser-sync.js b/browser/base/content/browser-sync.js
@@ -1111,10 +1111,12 @@ var gSync = {
     this.enableSendTabIfValidTab();
 
     if (!this.getSendTabTargets().length) {
-      PanelMultiView.getViewNode(
-        document,
-        "PanelUI-fxa-menu-sendtab-button"
-      ).hidden = true;
+      for (const id of [
+        "PanelUI-fxa-menu-sendtab-button",
+        "PanelUI-fxa-menu-sendtab-separator",
+      ]) {
+        PanelMultiView.getViewNode(document, id).hidden = true;
+      }
     }
 
     if (anchor.getAttribute("open") == "true") {
@@ -1368,10 +1370,12 @@ var gSync = {
       t => !!BrowserUtils.getShareableURL(t.linkedBrowser.currentURI)
     );
 
-    PanelMultiView.getViewNode(
-      document,
-      "PanelUI-fxa-menu-sendtab-button"
-    ).hidden = !canSendAllURIs;
+    for (const id of [
+      "PanelUI-fxa-menu-sendtab-button",
+      "PanelUI-fxa-menu-sendtab-separator",
+    ]) {
+      PanelMultiView.getViewNode(document, id).hidden = !canSendAllURIs;
+    }
   },
 
   // This is mis-named - it can be used to record any FxA UI telemetry, whether from
@@ -1997,6 +2001,10 @@ var gSync = {
 
     let sendTabsToDevice = document.getElementById("context_sendTabToDevice");
     sendTabsToDevice.disabled = !enabled;
+    let sendTabToDeviceSeparator = document.getElementById(
+      "context_sendTabToDeviceSeparator"
+    );
+    sendTabToDeviceSeparator.disabled = !enabled;
 
     if (hideItems || !hasASendableURI) {
       sendTabsToDevice.hidden = true;
@@ -2045,10 +2053,12 @@ var gSync = {
       "context-sendpagetodevice",
       !hideItems && showSendPage
     );
-    contextMenu.showItem(
+    for (const id of [
       "context-sendlinktodevice",
-      !hideItems && showSendLink
-    );
+      "context-sep-sendlinktodevice",
+    ]) {
+      contextMenu.showItem(id, !hideItems && showSendLink);
+    }
 
     if (!showSendLink && !showSendPage) {
       return false;
diff --git a/browser/base/content/main-popupset.inc.xhtml b/browser/base/content/main-popupset.inc.xhtml
@@ -78,19 +78,20 @@
         <menuseparator id="moveTabSeparator" hidden="true"/>
       </menupopup>
     </menu>
-    <menu id="context_sendTabToDevice"
-          class="sync-ui-item"
-          data-lazy-l10n-id="tab-context-send-tabs-to-device"
-          data-l10n-args='{"tabCount": 1}'>
-      <menupopup id="context_sendTabToDevicePopupMenu"/>
-    </menu>
     <menu id="context_reopenInContainer"
           data-lazy-l10n-id="tab-context-open-in-new-container-tab"
           hidden="true">
       <menupopup id="context_reopenInContainerPopupMenu"/>
     </menu>
     <menuitem id="context_selectAllTabs" data-lazy-l10n-id="select-all-tabs"/>
     <menuseparator/>
+    <menu id="context_sendTabToDevice"
+          class="sync-ui-item"
+          data-lazy-l10n-id="tab-context-send-to-device"
+          data-l10n-args='{"tabCount": 1}'>
+      <menupopup id="context_sendTabToDevicePopupMenu" class="sync-ui-item"/>
+    </menu>
+    <menuseparator id="context_sendTabToDeviceSeparator"/>
     <menuitem id="context_closeTab"
               data-lazy-l10n-id="tab-context-close-n-tabs"
               data-l10n-args='{"tabCount": 1}'/>
diff --git a/browser/base/content/nsContextMenu.sys.mjs b/browser/base/content/nsContextMenu.sys.mjs
@@ -1087,19 +1087,10 @@ export class nsContextMenu {
     let disabledAttr = this.#canStripParams() ? null : true;
     this.setItemAttr("context-stripOnShareLink", "disabled", disabledAttr);
 
-    let copyLinkSeparator = this.document.getElementById(
-      "context-sep-copylink"
-    );
-    // Show "Copy Link", "Copy" and "Copy Clean Link" with no divider, and "copy link" and "Send link to Device" with no divider between.
-    // Other cases will show a divider.
-    copyLinkSeparator.toggleAttribute(
-      "ensureHidden",
-      this.onLink &&
-        !this.onMailtoLink &&
-        !this.onTelLink &&
-        !this.onImage &&
-        this.syncItemsShown
+    let sendLinkSeparator = this.document.getElementById(
+      "context-sep-sendlinktodevice"
     );
+    sendLinkSeparator.toggleAttribute("ensureHidden", !this.syncItemsShown);
 
     this.showItem("context-copyvideourl", this.onVideo);
     this.showItem("context-copyaudiourl", this.onAudio);
diff --git a/browser/base/content/test/sync/browser_contextmenu_sendpage.js b/browser/base/content/test/sync/browser_contextmenu_sendpage.js
@@ -126,6 +126,7 @@ add_task(async function test_link_contextmenu() {
     "context-savelink",
     "context-copylink",
     ...(expectStripOnShareLink ? ["context-stripOnShareLink"] : []),
+    "context-sep-copylink",
     "context-sendlinktodevice",
     "context-sep-sendlinktodevice",
     "context-searchselect",
diff --git a/browser/components/firefoxview/opentabs.mjs b/browser/components/firefoxview/opentabs.mjs
@@ -872,7 +872,7 @@ class OpenTabsContextMenu extends MozLitElement {
         ></panel-item>
         ${this.devices.length >= 1
           ? html`<panel-item
-              data-l10n-id="fxviewtabrow-send-tab"
+              data-l10n-id="fxviewtabrow-send-to-device"
               data-l10n-attrs="accesskey"
               submenu="send-tab-menu"
               >${this.sendTabTemplate()}</panel-item
diff --git a/browser/components/firefoxview/tests/browser/browser_opentabs_firefoxview.js b/browser/components/firefoxview/tests/browser/browser_opentabs_firefoxview.js
@@ -348,7 +348,7 @@ add_task(async function test_send_device_submenu() {
     let panelList = await openContextMenuForItem(firstTab, cards[0]);
 
     let sendTabPanelItem = panelList.querySelector(
-      "panel-item[data-l10n-id=fxviewtabrow-send-tab]"
+      "panel-item[data-l10n-id=fxviewtabrow-send-to-device]"
     );
 
     ok(sendTabPanelItem, "Send tabs to device submenu panel item exists");
diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
@@ -9821,7 +9821,7 @@ var TabContextMenu = {
 
     SharingUtils.updateShareURLMenuItem(
       this.contextTab.linkedBrowser,
-      document.getElementById("context_sendTabToDevice")
+      document.getElementById("context_moveTabOptions")
     );
   },
 
diff --git a/browser/locales/en-US/browser/browserContext.ftl b/browser/locales/en-US/browser/browserContext.ftl
@@ -342,8 +342,8 @@ main-context-menu-audio-email =
     .label = Email Audio…
     .accesskey = a
 
-main-context-menu-send-to-device =
-    .label = Send Page to Device
+main-context-menu-send-to-device-2 =
+    .label = Send to Device
     .accesskey = n
 
 # Displayed when there are saved passwords and the user clicks inside a username or password field
diff --git a/browser/locales/en-US/browser/fxviewTabList.ftl b/browser/locales/en-US/browser/fxviewTabList.ftl
@@ -56,7 +56,7 @@ fxviewtabrow-move-tab-end = Move to End
     .accesskey = E
 fxviewtabrow-move-tab-window = Move to New Window
     .accesskey = W
-fxviewtabrow-send-tab = Send Tab to Device
+fxviewtabrow-send-to-device = Send to Device
     .accesskey = n
 fxviewtabrow-pin-tab = Pin Tab
     .accesskey = P
diff --git a/browser/locales/en-US/browser/sync.ftl b/browser/locales/en-US/browser/sync.ftl
@@ -23,10 +23,11 @@ fxa-menu-connect-another-device =
     .label = Connect another device…
 # Variables:
 #   $tabCount (Number): The number of tabs sent to the device.
-fxa-menu-send-tab-to-device =
+# The following string intentionally omits the word "tab" from the singular and includes it in the plural.
+fxa-menu-send-to-device =
     .label =
         { $tabCount ->
-            [1] Send tab to device
+            [1] Send to device
            *[other] Send { $tabCount } tabs to device
         }
 
diff --git a/browser/locales/en-US/browser/tabContextMenu.ftl b/browser/locales/en-US/browser/tabContextMenu.ftl
@@ -132,10 +132,11 @@ tab-context-move-tabs =
         }
     .accesskey = v
 
-tab-context-send-tabs-to-device =
+# The following string intentionally omits the word "Tab" from the singular and includes it in the plural.
+tab-context-send-to-device =
     .label =
         { $tabCount ->
-            [1] Send Tab to Device
+            [1] Send to Device
            *[other] Send { $tabCount } Tabs to Device
         }
     .accesskey = n
