Bug 2028684 - Hide the synced tabs search box in Firefox View until a secondary device is connected. r?jsudiaman

browser/components/firefoxview/syncedtabs.mjs

@@ -400,11 +400,16 @@ class SyncedTabsInView extends ViewPage {
           ></h2>
           <div class="syncedtabs-header">
             <div>
+              ${when(
+                TabsSetupFlowManager.secondaryDeviceConnected,
+                () => html`
                   <moz-input-search
                     data-l10n-id="firefoxview-search-text-box-tabs"
                     data-l10n-attrs="placeholder"
                     @MozInputSearch:search=${this.onSearchQuery}
                   ></moz-input-search>
+                `
+              )}
             </div>
             ${when(
               this.controller.currentSetupStateIndex === 4,

browser/components/firefoxview/tests/browser/browser_firefoxview_search_telemetry.js

@@ -97,12 +97,21 @@ add_task(async function test_search_initiated_telemetry() {
     Assert.equal(1, searchEvents.length, "Expected one search event.");
     Assert.deepEqual({ page: "recentlyclosed" }, searchEvents[0].extra);
 
+    info("Connect a second device so that synced tabs can be searched");
+    const sandbox = setupRecentDeviceListMocks();
+    sandbox.stub(SyncedTabs, "getRecentTabs").resolves([]);
+    sandbox.stub(SyncedTabs, "getTabClients").resolves([]);
+    Services.obs.notifyObservers(null, UIState.ON_UPDATE);
     await navigateToViewAndWait(document, "syncedtabs");
     Services.fog.testResetFOG();
     is(document.location.hash, "#syncedtabs", "Searching within synced tabs.");
     const syncedTabs = document.querySelector("named-deck > view-syncedtabs");
+    const syncedTabsSearchTextbox = await TestUtils.waitForCondition(
+      () => syncedTabs.searchTextbox,
+      "Waiting for the synced tabs search box to be shown"
+    );
     info("Input a search query");
-    EventUtils.synthesizeMouseAtCenter(syncedTabs.searchTextbox, {}, content);
+    EventUtils.synthesizeMouseAtCenter(syncedTabsSearchTextbox, {}, content);
     EventUtils.sendString("example.com", content);
     await TestUtils.waitForCondition(
       () => Glean.firefoxviewNext.searchInitiatedSearch.testGetValue(),
@@ -111,6 +120,7 @@ add_task(async function test_search_initiated_telemetry() {
     searchEvents = Glean.firefoxviewNext.searchInitiatedSearch.testGetValue();
     Assert.equal(1, searchEvents.length, "Expected one search event.");
     Assert.deepEqual({ page: "syncedtabs" }, searchEvents[0].extra);
+    await tearDown(sandbox);
 
     await navigateToViewAndWait(document, "history");
     Services.fog.testResetFOG();

browser/components/firefoxview/tests/browser/browser_syncedtabs_firefoxview.js

@@ -298,6 +298,68 @@ add_task(async function test_no_error_for_two_desktop() {
   await tearDown(sandbox);
 });
 
+add_task(async function test_search_hidden_without_secondary_device() {
+  const fxaDevices = [
+    {
+      id: 1,
+      name: "This Device",
+      isCurrentDevice: true,
+      type: "desktop",
+      tabs: [],
+    },
+  ];
+  const sandbox = setupMocks({
+    state: UIState.STATUS_SIGNED_IN,
+    fxaDevices,
+  });
+
+  await withFirefoxView({}, async browser => {
+    const { document } = browser.contentWindow;
+    await navigateToViewAndWait(document, "syncedtabs");
+    Services.obs.notifyObservers(null, UIState.ON_UPDATE);
+
+    let syncedTabsComponent = document.querySelector(
+      "view-syncedtabs:not([slot=syncedtabs])"
+    );
+    await TestUtils.waitForCondition(
+      () => syncedTabsComponent.fullyUpdated,
+      "Waiting for the synced tabs component to be fully updated"
+    );
+    await syncedTabsComponent.updateComplete;
+    ok(
+      !TabsSetupFlowManager.secondaryDeviceConnected,
+      "No secondary device is connected"
+    );
+    is(
+      syncedTabsComponent.searchTextbox,
+      null,
+      "Search box is not shown without a secondary device"
+    );
+
+    info("Connect a second device");
+    fxaDevices.push({
+      id: 2,
+      name: "Other Device",
+      type: "desktop",
+      tabs: [],
+    });
+    Services.obs.notifyObservers(null, "fxaccounts:devicelist_updated");
+    await TestUtils.waitForCondition(
+      () => syncedTabsComponent.searchTextbox,
+      "Waiting for the search box to be shown"
+    );
+    ok(
+      TabsSetupFlowManager.secondaryDeviceConnected,
+      "A secondary device is connected"
+    );
+    ok(
+      BrowserTestUtils.isVisible(syncedTabsComponent.searchTextbox),
+      "Search box is shown once a secondary device is connected"
+    );
+  });
+  await tearDown(sandbox);
+});
+
 add_task(async function test_empty_state() {
   const sandbox = setupMocks({
     state: UIState.STATUS_SIGNED_IN,