Bug 1852229 - Fix spacing between synced devices on Recent Browsing r=sclements,fxview-reviewers

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

browser/components/firefoxview/fxview-tab-list.mjs

@@ -6,7 +6,6 @@ import {
   html,
   ifDefined,
   styleMap,
-  classMap,
   when,
 } from "chrome://global/content/vendor/lit.all.mjs";
 import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
@@ -464,10 +463,7 @@ export class FxviewTabRow extends MozLitElement {
       />
       <a
         .href=${ifDefined(this.url)}
-        class=${classMap({
-          "fxview-tab-row-main": true,
-          "fxview-tab-row-header": !this.url,
-        })}
+        class="fxview-tab-row-main"
         id="fxview-tab-row-main"
         tabindex=${this.active &&
         this.currentActiveElementId === "fxview-tab-row-main"

browser/components/firefoxview/fxview-tab-row.css

@@ -51,20 +51,6 @@
   background-color: var(--fxviewtabrow-element-background-active);
 }
 
-.fxview-tab-row-header {
-  margin-top: 8px;
-  cursor: inherit;
-  font-weight: 600;
-  grid-template-columns: min-content 1fr;
-  gap: 0 16px;
-}
-
-.fxview-tab-row-header:hover,
-.fxview-tab-row-header:hover:active {
-  color: inherit;
-  background-color: inherit;
-}
-
 @media (prefers-contrast) {
   .fxview-tab-row-main,
   .fxview-tab-row-main:hover,
@@ -95,10 +81,6 @@
   white-space: nowrap;
 }
 
-.fxview-tab-row-main:hover:not(.fxview-tab-row-header) .fxview-tab-row-title {
-  text-decoration-line: underline;
-}
-
 .fxview-tab-row-url {
   color: var(--text-color-deemphasized);
   word-break: break-word;

browser/components/firefoxview/syncedtabs.mjs

@@ -15,11 +15,7 @@ const { TabsSetupFlowManager } = ChromeUtils.importESModule(
   "resource:///modules/firefox-view-tabs-setup-manager.sys.mjs"
 );
 
-import {
-  html,
-  ifDefined,
-  when,
-} from "chrome://global/content/vendor/lit.all.mjs";
+import { html, ifDefined } from "chrome://global/content/vendor/lit.all.mjs";
 import { ViewPage } from "./viewpage.mjs";
 
 const SYNCED_TABS_CHANGED = "services.sync.tabs.changed";
@@ -301,7 +297,7 @@ class SyncedTabsInView extends ViewPage {
     return html`<card-container
       shortPageName=${this.recentBrowsing ? "syncedtabs" : null}
     >
-      <h3 slot="header">
+      <h3 slot="header" class="device-header">
         <span class="icon ${deviceType}" role="presentation"></span>
         ${deviceName}
       </h3>
@@ -315,32 +311,13 @@ class SyncedTabsInView extends ViewPage {
 
   deviceTemplate(deviceName, deviceType, tabs) {
     let tabItems = this.getTabItems(tabs);
-    if (this.recentBrowsing) {
-      /* Insert device at the beginning of the tabs array */
-      let icon;
-      switch (deviceType) {
-        case "phone":
-          icon = "chrome://browser/skin/device-phone.svg";
-          break;
-        case "desktop":
-          icon = "chrome://browser/skin/device-desktop.svg";
-          break;
-        case "tablet":
-          icon = "chrome://browser/skin/device-tablet.svg";
-          break;
-      }
-      tabItems.unshift({
-        icon,
-        title: deviceName,
-      });
-    }
-    return html`${when(
-        !this.recentBrowsing,
-        () => html`<h3 slot="header">
-          <span class="icon ${deviceType}" role="presentation"></span>
-          ${deviceName}
-        </h3>`
-      )}
+    return html`<h3
+        slot=${!this.recentBrowsing ? "header" : null}
+        class="device-header"
+      >
+        <span class="icon ${deviceType}" role="presentation"></span>
+        ${deviceName}
+      </h3>
       <fxview-tab-list
         slot="main"
         class="with-context-menu"
@@ -350,13 +327,6 @@ class SyncedTabsInView extends ViewPage {
         @fxview-tab-list-primary-action=${this.onOpenLink}
         @fxview-tab-list-secondary-action=${this.onContextMenu}
       >
-        ${when(
-          this.recentBrowsing,
-          () => html`<h3 slot="header">
-            <span class="icon ${deviceType}" role="presentation"></span>
-            ${deviceName}
-          </h3>`
-        )}
         ${this.panelListTemplate()}
       </fxview-tab-list>`;
   }

browser/components/firefoxview/view-syncedtabs.css

@@ -5,8 +5,6 @@
  @import url("chrome://global/skin/in-content/common.css");
 
 .icon {
-  vertical-align: bottom;
-  margin-inline-end: 5px;
   display: inline-block;
   width: 16px;
   height: 16px;
@@ -33,8 +31,28 @@ h2 {
   align-items: center;
 }
 
+h3.device-header {
+  display: grid;
+  align-items: center;
+  cursor: inherit;
+  font-weight: 600;
+  grid-template-columns: min-content 1fr;
+  gap: 0 16px;
+  margin: 0;
+}
+
+h3.device-header:not([slot=header]) {
+  margin-block: 0.7em;
+  margin-inline: 0.5em 0;
+  font-size: 1em;
+}
+
+h3.device-header:not([slot=header]):not(:first-child) {
+  margin-block-start: 1.6em;
+}
+
 .notabs {
-  margin-top: 15px;
+  margin-block-start: 1em;
   color: var(--fxview-text-secondary-color);
 }