Bug 1665442 - show an import button on the bookmarks toolbar for new profiles without bookmarks, r=jaws,fluent-reviewers,flod,dao

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

browser/base/content/browser.xhtml

@@ -2092,6 +2092,10 @@
     </toolbar>
 
     <html:template id="BrowserToolbarPalette">
+      <toolbarbutton id="import-button"
+                     class="toolbarbutton-1 chromeclass-toolbar-additional"
+                     oncommand="MigrationUtils.showMigrationWizard(window, [MigrationUtils.MIGRATION_ENTRYPOINT_BOOKMARKS_TOOLBAR]);"
+                     data-l10n-id="browser-import-button"/>
 
       <toolbarbutton id="print-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
 #ifdef XP_MACOSX

browser/components/BrowserGlue.jsm

@@ -2426,6 +2426,7 @@ BrowserGlue.prototype = {
    * to the other ones scheduled together.
    */
   _scheduleStartupIdleTasks() {
+    let isNewProfile = this._isNewProfile;
     const idleTasks = [
       // It's important that SafeBrowsing is initialized reasonably
       // early, so we use a maximum timeout for it.
@@ -2636,6 +2637,23 @@ BrowserGlue.prototype = {
         },
       },
 
+      // Add the import button if this is the first startup.
+      {
+        task: () => {
+          if (
+            isNewProfile &&
+            Services.prefs.getBoolPref(
+              "browser.toolbars.bookmarks.2h2020",
+              false
+            ) &&
+            // Not in automation: the button changes CUI state, breaking tests
+            !Cu.isInAutomation
+          ) {
+            PlacesUIUtils.maybeAddImportButton();
+          }
+        },
+      },
+
       // Marionette needs to be initialized as very last step
       {
         task: () => {

browser/components/migration/MigrationUtils.jsm

@@ -1287,6 +1287,7 @@ var MigrationUtils = Object.seal({
   MIGRATION_ENTRYPOINT_NEWTAB: 5,
   MIGRATION_ENTRYPOINT_FILE_MENU: 6,
   MIGRATION_ENTRYPOINT_HELP_MENU: 7,
+  MIGRATION_ENTRYPOINT_BOOKMARKS_TOOLBAR: 8,
 
   _sourceNameToIdMapping: {
     nothing: 1,

browser/components/places/PlacesUIUtils.jsm

@@ -1400,6 +1400,32 @@ var PlacesUIUtils = {
       }
     },
   },
+
+  async maybeAddImportButton() {
+    let numberOfBookmarks = await PlacesUtils.withConnectionWrapper(
+      "PlacesUIUtils: maybeAddImportButton",
+      async db => {
+        let rows = await db.execute(
+          `SELECT COUNT(*) as n FROM moz_bookmarks b
+           WHERE b.parent = :parentId`,
+          { parentId: PlacesUtils.toolbarFolderId }
+        );
+        return rows[0].getResultByName("n");
+      }
+    ).catch(e => {
+      // We want to report errors, but we still want to add the button then:
+      Cu.reportError(e);
+      return 0;
+    });
+
+    if (numberOfBookmarks < 3) {
+      CustomizableUI.addWidgetToArea(
+        "import-button",
+        CustomizableUI.AREA_BOOKMARKS,
+        0
+      );
+    }
+  },
 };
 
 // These are lazy getters to avoid importing PlacesUtils immediately.

browser/components/places/tests/browser/browser.ini

@@ -62,6 +62,7 @@ skip-if = (verify && debug && (os == 'win' || os == 'mac'))
 skip-if = (verify && debug && (os == 'mac' || os == 'linux'))
 [browser_forgetthissite_single.js]
 [browser_history_sidebar_search.js]
+[browser_import_button.js]
 [browser_library_bookmark_pages.js]
 [browser_library_commands.js]
 [browser_library_delete_bookmarks_in_tags.js]

browser/components/places/tests/browser/browser_import_button.js

@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Verify that we add the import button only if there aren't enough bookmarks
+ * in the toolbar.
+ */
+add_task(async function test_bookmark_import_button() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["browser.toolbars.bookmarks.2h2020", true]],
+  });
+  let bookmarkCount = PlacesUtils.getChildCountForFolder(
+    PlacesUtils.bookmarks.toolbarGuid
+  );
+  Assert.less(bookmarkCount, 3, "we should start with less than 3 bookmarks");
+
+  ok(
+    !document.getElementById("import-button"),
+    "Shouldn't have button to start with."
+  );
+  await PlacesUIUtils.maybeAddImportButton();
+  ok(document.getElementById("import-button"), "Button should be added.");
+
+  CustomizableUI.reset();
+
+  // Add some bookmarks. This should stop the import button from being inserted.
+  let parentGuid = PlacesUtils.bookmarks.toolbarGuid;
+  let bookmarks = await Promise.all(
+    ["firefox", "rules", "yo"].map(n =>
+      PlacesUtils.bookmarks.insert({
+        parentGuid,
+        url: `https://example.com/${n}`,
+        title: n.toString(),
+      })
+    )
+  );
+  registerCleanupFunction(async () =>
+    Promise.all(bookmarks.map(b => PlacesUtils.bookmarks.remove(b.guid)))
+  );
+
+  await PlacesUIUtils.maybeAddImportButton();
+  ok(
+    !document.getElementById("import-button"),
+    "Button should not be added if we have bookmarks."
+  );
+
+  // Just in case, for future tests we run:
+  CustomizableUI.reset();
+});

browser/locales/en-US/browser/browser.ftl

@@ -352,6 +352,12 @@ browser-window-restore-down-button =
 browser-window-close-button =
     .tooltiptext = Close
 
+## Bookmarks toolbar items
+
+browser-import-button =
+    .label = Import bookmarks…
+    .tooltiptext = Copy bookmarks from another browser to { -brand-short-name }.
+
 ## WebRTC Pop-up notifications
 
 popup-select-camera =

browser/themes/shared/toolbarbutton-icons.inc.css

@@ -633,6 +633,11 @@ toolbarbutton.bookmark-item {
 #whats-new-menu-button {
   list-style-image: url("chrome://browser/skin/whatsnew.svg");
 }
+
 #ion-button {
   list-style-image: url("chrome://browser/skin/ion.svg");
 }
+
+#import-button {
+  list-style-image: url("chrome://browser/skin/import.svg");
+}

browser/themes/shared/toolbarbuttons.inc.css

@@ -21,6 +21,8 @@
   --backbutton-active-background: var(--toolbarbutton-active-background);
   --backbutton-border-color: hsla(240,5%,5%,.3);
 
+  --toolbarseparator-color: var(--lwt-toolbar-vertical-separator, rgba(0,0,0,.3));
+
   /* This default value of --toolbarbutton-height is defined to prevent
      CSS errors for an invalid variable. The value should not get used,
      as a more specific value should be set when the value will be used. */
@@ -51,6 +53,8 @@ toolbar[brighttext] {
   --backbutton-background: var(--toolbarbutton-hover-background);
   --backbutton-hover-background: var(--toolbarbutton-active-background);
   --backbutton-active-background: hsla(0,0%,100%,.4);
+
+  --toolbarseparator-color: var(--lwt-toolbar-vertical-separator, rgba(255,255,255,.3));
 }
 
 /* ::::: primary toolbar buttons ::::: */
@@ -327,7 +331,8 @@ toolbarbutton.bookmark-item:not(.subviewbutton) {
   height: 16px;
 }
 
-/* Force the display of the label for bookmarks */
+/* Force the display of the label for bookmarks and the import button */
+#PersonalToolbar #import-button > .toolbarbutton-text,
 .bookmark-item > .toolbarbutton-text {
   display: -moz-box !important;
 }
@@ -342,6 +347,41 @@ toolbarbutton.bookmark-item:not(.subviewbutton) {
   margin-inline-end: 4px;
 }
 
+/* Import button styling in the bookmarks toolbar */
+
+#PersonalToolbar #import-button {
+  padding: 4px !important; /* overrides the styling for other toolbar buttons in the bookmarks toolbar. */
+  margin: 0 2px;
+}
+
+#PersonalToolbar #import-button > .toolbarbutton-text {
+  min-height: unset; /* override the .toolbarbutton-1 .toolbarbutton-text rule */
+}
+
+#PersonalToolbar #import-button > .toolbarbutton-icon {
+  margin-inline-end: 4px !important; /* Overrides the styling for .toolbarbutton-1 */
+}
+
+/* When adjacent to the bookmarks items, give the bookmarks items a leading separator. */
+#PersonalToolbar > #wrapper-import-button + #wrapper-personal-bookmarks,
+#PersonalToolbar > #import-button + #personal-bookmarks {
+  border-inline-start: 1px solid;
+  border-image-source: linear-gradient(
+    transparent 3.75px,
+    var(--toolbarseparator-color) 3.75px,
+    var(--toolbarseparator-color) calc(100% - 3.75px),
+    transparent calc(100% - 3.75px) );
+  border-image-slice: 1;
+}
+
+@media (min-resolution: 2dppx) {
+  #PersonalToolbar > #wrapper-import-button + #wrapper-personal-bookmarks,
+  #PersonalToolbar > #import-button + #personal-bookmarks {
+    border-inline-start-width: 0.5px;
+  }
+}
+
+
 /* The bookmarks toolbar is smaller than the other toolbars, so we
  * need to override the badge position to not be cut off. */
 #PersonalToolbar .toolbarbutton-badge {