Bug 1494046 - Improve how the folder icon is selected on the folder list in the bookmark popup window. r=mak

Change to using an event listener to follow when the selection changes more accurately. Also switch to using GUIDs as they are better defined than indexes.

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

--HG--
extra : moz-landing-system : lando

browser/components/places/content/editBookmark.js

@@ -405,19 +405,28 @@ var gEditItemOverlay = {
                                               this._recentFolders[i].title);
     }
 
+    this._folderMenuList.addEventListener("select", this);
+    this._folderMenuListListenerAdded = true;
+
     let title = (await PlacesUtils.bookmarks.fetch(aSelectedFolderGuid)).title;
     var defaultItem = this._getFolderMenuItem(aSelectedFolderGuid, title);
     this._folderMenuList.selectedItem = defaultItem;
 
-    // Set a selectedIndex attribute to show special icons
-    this._folderMenuList.setAttribute("selectedIndex",
-                                      this._folderMenuList.selectedIndex);
-
     // Hide the folders-separator if no folder is annotated as recently-used
     this._element("foldersSeparator").hidden = (menupopup.children.length <= 6);
     this._folderMenuList.disabled = this.readOnly;
   },
 
+  _onFolderListSelected() {
+    // Set a selectedGuid attribute to show special icons
+    let folderGuid = this.selectedFolderGuid;
+    if (folderGuid) {
+      this._folderMenuList.setAttribute("selectedGuid", folderGuid);
+    } else {
+      this._folderMenuList.removeAttribute("selectedGuid");
+    }
+  },
+
   QueryInterface:
   ChromeUtils.generateQI([Ci.nsINavBookmarkObserver]),
 
@@ -443,6 +452,11 @@ var gEditItemOverlay = {
       this._observersAdded = false;
     }
 
+    if (this._folderMenuListListenerAdded) {
+      this._folderMenuList.removeEventListener("select", this);
+      this._folderMenuListListenerAdded = false;
+    }
+
     this._setPaneInfo(null);
     this._firstEditedField = "";
   },
@@ -681,9 +695,6 @@ var gEditItemOverlay = {
     if (!this._paneInfo) {
       return;
     }
-    // Set a selectedIndex attribute to show special icons
-    this._folderMenuList.setAttribute("selectedIndex",
-                                      this._folderMenuList.selectedIndex);
 
     if (aEvent.target.id == "editBMPanel_chooseFolderMenuItem") {
       // reset the selection back to where it was and expand the tree
@@ -870,6 +881,9 @@ var gEditItemOverlay = {
     case "unload":
       this.uninitPanel(false);
       break;
+    case "select":
+      this._onFolderListSelected();
+      break;
     }
   },
 

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

@@ -39,6 +39,7 @@ skip-if = (verify && debug && (os == 'win' || os == 'mac'))
 [browser_bookmarkProperties_cancel.js]
 [browser_bookmarkProperties_editFolder.js]
 [browser_bookmarkProperties_editTagContainer.js]
+[browser_bookmarkProperties_folderSelection.js]
 [browser_bookmarkProperties_no_user_actions.js]
 [browser_bookmarkProperties_newFolder.js]
 [browser_bookmarkProperties_readOnlyRoot.js]

browser/components/places/tests/browser/browser_bookmarkProperties_folderSelection.js

@@ -0,0 +1,86 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/
+ */
+
+const TEST_URL = "about:robots";
+const bookmarkPanel = document.getElementById("editBookmarkPanel");
+let folders;
+
+add_task(async function setup() {
+  await PlacesUtils.bookmarks.eraseEverything();
+
+  bookmarkPanel.setAttribute("animate", false);
+
+  let oldTimeout = StarUI._autoCloseTimeout;
+  // Make the timeout something big, so it doesn't iteract badly with tests.
+  StarUI._autoCloseTimeout = 6000000;
+
+  let tab = await BrowserTestUtils.openNewForegroundTab({
+    gBrowser,
+    opening: TEST_URL,
+    waitForStateStop: true,
+  });
+
+  registerCleanupFunction(async () => {
+    StarUI._autoCloseTimeout = oldTimeout;
+    BrowserTestUtils.removeTab(tab);
+    bookmarkPanel.removeAttribute("animate");
+    await PlacesUtils.bookmarks.eraseEverything();
+  });
+});
+
+add_task(async function test_selectChoose() {
+  await clickBookmarkStar();
+
+  // Open folder selector.
+  let menuList = document.getElementById("editBMPanel_folderMenuList");
+  let folderTreeRow = document.getElementById("editBMPanel_folderTreeRow");
+
+  Assert.equal(menuList.label, PlacesUtils.getString("OtherBookmarksFolderTitle"),
+    "Should have the other bookmarks folder selected by default");
+  Assert.equal(menuList.getAttribute("selectedGuid"), PlacesUtils.bookmarks.unfiledGuid,
+    "Should have the correct default guid selected");
+  Assert.equal(folderTreeRow.collapsed, true,
+    "Should have the folder tree collapsed");
+
+  let promisePopup = BrowserTestUtils.waitForEvent(menuList.menupopup, "popupshown");
+  EventUtils.synthesizeMouseAtCenter(menuList, {}, window);
+  await promisePopup;
+
+  // Click the choose item.
+  EventUtils.synthesizeMouseAtCenter(document.getElementById("editBMPanel_chooseFolderMenuItem"), {}, window);
+
+  await TestUtils.waitForCondition(() => !folderTreeRow.collapsed,
+    "Should show the folder tree");
+
+  Assert.equal(menuList.getAttribute("selectedGuid"), PlacesUtils.bookmarks.unfiledGuid,
+    "Should still have the correct selected guid");
+  Assert.equal(menuList.label, PlacesUtils.getString("OtherBookmarksFolderTitle"),
+    "Should have kept the same menu label");
+
+  await hideBookmarksPanel();
+});
+
+
+add_task(async function test_selectBookmarksMenu() {
+  await clickBookmarkStar();
+
+  // Open folder selector.
+  let menuList = document.getElementById("editBMPanel_folderMenuList");
+
+  let promisePopup = BrowserTestUtils.waitForEvent(menuList.menupopup, "popupshown");
+  EventUtils.synthesizeMouseAtCenter(menuList, {}, window);
+  await promisePopup;
+
+  // Click the choose item.
+  EventUtils.synthesizeMouseAtCenter(document.getElementById("editBMPanel_bmRootItem"), {}, window);
+
+  await TestUtils.waitForCondition(
+    () => menuList.getAttribute("selectedGuid") == PlacesUtils.bookmarks.menuGuid,
+    "Should select the menu folder item");
+
+  Assert.equal(menuList.label, PlacesUtils.getString("BookmarksMenuFolderTitle"),
+    "Should have updated the menu label");
+
+  await hideBookmarksPanel();
+});

browser/themes/linux/places/editBookmark.css

@@ -64,17 +64,17 @@
 
 
 /* Bookmark panel dropdown menu items */
-#editBMPanel_folderMenuList[selectedIndex="0"],
+#editBMPanel_folderMenuList[selectedGuid="toolbar_____"],
 #editBMPanel_toolbarFolderItem {
   list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg") !important;
 }
 
-#editBMPanel_folderMenuList[selectedIndex="1"],
+#editBMPanel_folderMenuList[selectedGuid="menu________"],
 #editBMPanel_bmRootItem {
   list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg") !important;
 }
 
-#editBMPanel_folderMenuList[selectedIndex="2"],
+#editBMPanel_folderMenuList[selectedGuid="unfiled_____"],
 #editBMPanel_unfiledRootItem {
   list-style-image: url("chrome://browser/skin/places/unfiledBookmarks.svg") !important;
 }

browser/themes/osx/places/editBookmark.css

@@ -69,17 +69,17 @@
 
 /* ----- BOOKMARK PANEL DROPDOWN MENU ITEMS ----- */
 
-#editBMPanel_folderMenuList[selectedIndex="0"],
+#editBMPanel_folderMenuList[selectedGuid="toolbar_____"],
 #editBMPanel_toolbarFolderItem {
   list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg") !important;
 }
 
-#editBMPanel_folderMenuList[selectedIndex="1"],
+#editBMPanel_folderMenuList[selectedGuid="menu________"],
 #editBMPanel_bmRootItem {
   list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg") !important;
 }
 
-#editBMPanel_folderMenuList[selectedIndex="2"],
+#editBMPanel_folderMenuList[selectedGuid="unfiled_____"],
 #editBMPanel_unfiledRootItem {
   list-style-image: url("chrome://browser/skin/places/unfiledBookmarks.svg") !important;
 }

browser/themes/windows/places/editBookmark.css

@@ -72,17 +72,17 @@
 
 /* ::::: bookmark panel dropdown icons ::::: */
 
-#editBMPanel_folderMenuList[selectedIndex="0"],
+#editBMPanel_folderMenuList[selectedGuid="toolbar_____"],
 #editBMPanel_toolbarFolderItem {
   list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg") !important;
 }
 
-#editBMPanel_folderMenuList[selectedIndex="1"],
+#editBMPanel_folderMenuList[selectedGuid="menu________"],
 #editBMPanel_bmRootItem {
   list-style-image: url("chrome://browser/skin/places/bookmarksMenu.svg") !important;
 }
 
-#editBMPanel_folderMenuList[selectedIndex="2"],
+#editBMPanel_folderMenuList[selectedGuid="unfiled_____"],
 #editBMPanel_unfiledRootItem {
   list-style-image: url("chrome://browser/skin/places/unfiledBookmarks.svg") !important;
 }