summaryrefslogtreecommitdiffstats
path: root/browser/components/places/content/browserPlacesViews.js
diff options
context:
space:
mode:
Diffstat (limited to 'browser/components/places/content/browserPlacesViews.js')
-rw-r--r--browser/components/places/content/browserPlacesViews.js2263
1 files changed, 2263 insertions, 0 deletions
diff --git a/browser/components/places/content/browserPlacesViews.js b/browser/components/places/content/browserPlacesViews.js
new file mode 100644
index 0000000000..35cdd2b9d5
--- /dev/null
+++ b/browser/components/places/content/browserPlacesViews.js
@@ -0,0 +1,2263 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* eslint-env mozilla/browser-window */
+
+/**
+ * The base view implements everything that's common to all the views.
+ * It should not be instanced directly, use a derived class instead.
+ */
+class PlacesViewBase {
+ /**
+ * @param {string} placesUrl
+ * The query string associated with the view.
+ * @param {DOMElement} rootElt
+ * The root element for the view.
+ * @param {DOMElement} viewElt
+ * The view element.
+ */
+ constructor(placesUrl, rootElt, viewElt) {
+ this._rootElt = rootElt;
+ this._viewElt = viewElt;
+ // Do initialization in subclass now that `this` exists.
+ this._init?.();
+ this._controller = new PlacesController(this);
+ this.place = placesUrl;
+ this._viewElt.controllers.appendController(this._controller);
+ }
+
+ // The xul element that holds the entire view.
+ _viewElt = null;
+
+ get associatedElement() {
+ return this._viewElt;
+ }
+
+ get controllers() {
+ return this._viewElt.controllers;
+ }
+
+ // The xul element that represents the root container.
+ _rootElt = null;
+
+ // Set to true for views that are represented by native widgets (i.e.
+ // the native mac menu).
+ _nativeView = false;
+
+ static interfaces = [
+ Ci.nsINavHistoryResultObserver,
+ Ci.nsISupportsWeakReference,
+ ];
+
+ QueryInterface = ChromeUtils.generateQI(PlacesViewBase.interfaces);
+
+ _place = "";
+ get place() {
+ return this._place;
+ }
+ set place(val) {
+ this._place = val;
+
+ let history = PlacesUtils.history;
+ let query = {},
+ options = {};
+ history.queryStringToQuery(val, query, options);
+ let result = history.executeQuery(query.value, options.value);
+ result.addObserver(this);
+ }
+
+ _result = null;
+ get result() {
+ return this._result;
+ }
+ set result(val) {
+ if (this._result == val) {
+ return;
+ }
+
+ if (this._result) {
+ this._result.removeObserver(this);
+ this._resultNode.containerOpen = false;
+ }
+
+ if (this._rootElt.localName == "menupopup") {
+ this._rootElt._built = false;
+ }
+
+ this._result = val;
+ if (val) {
+ this._resultNode = val.root;
+ this._rootElt._placesNode = this._resultNode;
+ this._domNodes = new Map();
+ this._domNodes.set(this._resultNode, this._rootElt);
+
+ // This calls _rebuild through invalidateContainer.
+ this._resultNode.containerOpen = true;
+ } else {
+ this._resultNode = null;
+ delete this._domNodes;
+ }
+ }
+
+ /**
+ * Gets the DOM node used for the given places node.
+ *
+ * @param {object} aPlacesNode
+ * a places result node.
+ * @param {boolean} aAllowMissing
+ * whether the node may be missing
+ * @returns {object|null} The associated DOM node.
+ * @throws if there is no DOM node set for aPlacesNode.
+ */
+ _getDOMNodeForPlacesNode(aPlacesNode, aAllowMissing = false) {
+ let node = this._domNodes.get(aPlacesNode, null);
+ if (!node && !aAllowMissing) {
+ throw new Error(
+ "No DOM node set for aPlacesNode.\nnode.type: " +
+ aPlacesNode.type +
+ ". node.parent: " +
+ aPlacesNode
+ );
+ }
+ return node;
+ }
+
+ get controller() {
+ return this._controller;
+ }
+
+ get selType() {
+ return "single";
+ }
+ selectItems() {}
+ selectAll() {}
+
+ get selectedNode() {
+ if (this._contextMenuShown) {
+ let anchor = this._contextMenuShown.triggerNode;
+ if (!anchor) {
+ return null;
+ }
+
+ if (anchor._placesNode) {
+ return this._rootElt == anchor ? null : anchor._placesNode;
+ }
+
+ anchor = anchor.parentNode;
+ return this._rootElt == anchor ? null : anchor._placesNode || null;
+ }
+ return null;
+ }
+
+ get hasSelection() {
+ return this.selectedNode != null;
+ }
+
+ get selectedNodes() {
+ let selectedNode = this.selectedNode;
+ return selectedNode ? [selectedNode] : [];
+ }
+
+ get singleClickOpens() {
+ return true;
+ }
+
+ get removableSelectionRanges() {
+ // On static content the current selectedNode would be the selection's
+ // parent node. We don't want to allow removing a node when the
+ // selection is not explicit.
+ let popupNode = PlacesUIUtils.lastContextMenuTriggerNode;
+ if (popupNode && (popupNode == "menupopup" || !popupNode._placesNode)) {
+ return [];
+ }
+
+ return [this.selectedNodes];
+ }
+
+ get draggableSelection() {
+ return [this._draggedElt];
+ }
+
+ get insertionPoint() {
+ // There is no insertion point for history queries, so bail out now and
+ // save a lot of work when updating commands.
+ let resultNode = this._resultNode;
+ if (
+ PlacesUtils.nodeIsQuery(resultNode) &&
+ PlacesUtils.asQuery(resultNode).queryOptions.queryType ==
+ Ci.nsINavHistoryQueryOptions.QUERY_TYPE_HISTORY
+ ) {
+ return null;
+ }
+
+ // By default, the insertion point is at the top level, at the end.
+ let index = PlacesUtils.bookmarks.DEFAULT_INDEX;
+ let container = this._resultNode;
+ let orientation = Ci.nsITreeView.DROP_BEFORE;
+ let tagName = null;
+
+ let selectedNode = this.selectedNode;
+ if (selectedNode) {
+ let popupNode = PlacesUIUtils.lastContextMenuTriggerNode;
+ if (
+ !popupNode._placesNode ||
+ popupNode._placesNode == this._resultNode ||
+ popupNode._placesNode.itemId == -1 ||
+ !selectedNode.parent
+ ) {
+ // If a static menuitem is selected, or if the root node is selected,
+ // the insertion point is inside the folder, at the end.
+ container = selectedNode;
+ orientation = Ci.nsITreeView.DROP_ON;
+ } else {
+ // In all other cases the insertion point is before that node.
+ container = selectedNode.parent;
+ index = container.getChildIndex(selectedNode);
+ if (PlacesUtils.nodeIsTagQuery(container)) {
+ tagName = PlacesUtils.asQuery(container).query.tags[0];
+ }
+ }
+ }
+
+ if (this.controller.disallowInsertion(container)) {
+ return null;
+ }
+
+ return new PlacesInsertionPoint({
+ parentGuid: PlacesUtils.getConcreteItemGuid(container),
+ index,
+ orientation,
+ tagName,
+ });
+ }
+
+ buildContextMenu(aPopup) {
+ this._contextMenuShown = aPopup;
+ window.updateCommands("places");
+
+ // Ensure that an existing "Show Other Bookmarks" item is removed before adding it
+ // again.
+ let existingOtherBookmarksItem = aPopup.querySelector(
+ "#show-other-bookmarks_PersonalToolbar"
+ );
+ existingOtherBookmarksItem?.remove();
+
+ let manageBookmarksMenu = aPopup.querySelector(
+ "#placesContext_showAllBookmarks"
+ );
+ // Add the View menu for the Bookmarks Toolbar and "Show Other Bookmarks" menu item
+ // if the click originated from the Bookmarks Toolbar.
+ let existingSubmenu = aPopup.querySelector("#toggle_PersonalToolbar");
+ existingSubmenu?.remove();
+ let bookmarksToolbar = document.getElementById("PersonalToolbar");
+ if (bookmarksToolbar?.contains(aPopup.triggerNode)) {
+ manageBookmarksMenu.removeAttribute("hidden");
+
+ let menu = BookmarkingUI.buildBookmarksToolbarSubmenu(bookmarksToolbar);
+ aPopup.insertBefore(menu, manageBookmarksMenu);
+
+ if (
+ aPopup.triggerNode.id === "OtherBookmarks" ||
+ aPopup.triggerNode.id === "PlacesChevron" ||
+ aPopup.triggerNode.id === "PlacesToolbarItems" ||
+ aPopup.triggerNode.parentNode.id === "PlacesToolbarItems"
+ ) {
+ let otherBookmarksMenuItem =
+ BookmarkingUI.buildShowOtherBookmarksMenuItem();
+
+ if (otherBookmarksMenuItem) {
+ aPopup.insertBefore(otherBookmarksMenuItem, menu.nextElementSibling);
+ }
+ }
+ } else {
+ manageBookmarksMenu.setAttribute("hidden", "true");
+ }
+
+ return this.controller.buildContextMenu(aPopup);
+ }
+
+ destroyContextMenu(aPopup) {
+ this._contextMenuShown = null;
+ }
+
+ clearAllContents(aPopup) {
+ let kid = aPopup.firstElementChild;
+ while (kid) {
+ let next = kid.nextElementSibling;
+ if (!kid.classList.contains("panel-header")) {
+ kid.remove();
+ }
+ kid = next;
+ }
+ aPopup._emptyMenuitem = aPopup._startMarker = aPopup._endMarker = null;
+ }
+
+ _cleanPopup(aPopup, aDelay) {
+ // Ensure markers are here when `invalidateContainer` is called before the
+ // popup is shown, which may the case for panelviews, for example.
+ this._ensureMarkers(aPopup);
+ // Remove Places nodes from the popup.
+ let child = aPopup._startMarker;
+ while (child.nextElementSibling != aPopup._endMarker) {
+ let sibling = child.nextElementSibling;
+ if (sibling._placesNode && !aDelay) {
+ aPopup.removeChild(sibling);
+ } else if (sibling._placesNode && aDelay) {
+ // HACK (bug 733419): the popups originating from the OS X native
+ // menubar don't live-update while open, thus we don't clean it
+ // until the next popupshowing, to avoid zombie menuitems.
+ if (!aPopup._delayedRemovals) {
+ aPopup._delayedRemovals = [];
+ }
+ aPopup._delayedRemovals.push(sibling);
+ child = child.nextElementSibling;
+ } else {
+ child = child.nextElementSibling;
+ }
+ }
+ }
+
+ _rebuildPopup(aPopup) {
+ let resultNode = aPopup._placesNode;
+ if (!resultNode.containerOpen) {
+ return;
+ }
+
+ this._cleanPopup(aPopup);
+
+ let cc = resultNode.childCount;
+ if (cc > 0) {
+ this._setEmptyPopupStatus(aPopup, false);
+ let fragment = document.createDocumentFragment();
+ for (let i = 0; i < cc; ++i) {
+ let child = resultNode.getChild(i);
+ this._insertNewItemToPopup(child, fragment);
+ }
+ aPopup.insertBefore(fragment, aPopup._endMarker);
+ } else {
+ this._setEmptyPopupStatus(aPopup, true);
+ }
+ aPopup._built = true;
+ }
+
+ _removeChild(aChild) {
+ aChild.remove();
+ }
+
+ _setEmptyPopupStatus(aPopup, aEmpty) {
+ if (!aPopup._emptyMenuitem) {
+ aPopup._emptyMenuitem = document.createXULElement("menuitem");
+ aPopup._emptyMenuitem.setAttribute("disabled", true);
+ aPopup._emptyMenuitem.className = "bookmark-item";
+ document.l10n.setAttributes(
+ aPopup._emptyMenuitem,
+ "places-empty-bookmarks-folder"
+ );
+ }
+
+ if (aEmpty) {
+ aPopup.setAttribute("emptyplacesresult", "true");
+ // Don't add the menuitem if there is static content.
+ if (
+ !aPopup._startMarker.previousElementSibling &&
+ !aPopup._endMarker.nextElementSibling
+ ) {
+ aPopup.insertBefore(aPopup._emptyMenuitem, aPopup._endMarker);
+ }
+ } else {
+ aPopup.removeAttribute("emptyplacesresult");
+ try {
+ aPopup.removeChild(aPopup._emptyMenuitem);
+ } catch (ex) {}
+ }
+ }
+
+ _createDOMNodeForPlacesNode(aPlacesNode) {
+ this._domNodes.delete(aPlacesNode);
+
+ let element;
+ let type = aPlacesNode.type;
+ if (type == Ci.nsINavHistoryResultNode.RESULT_TYPE_SEPARATOR) {
+ element = document.createXULElement("menuseparator");
+ } else {
+ if (type == Ci.nsINavHistoryResultNode.RESULT_TYPE_URI) {
+ element = document.createXULElement("menuitem");
+ element.className =
+ "menuitem-iconic bookmark-item menuitem-with-favicon";
+ element.setAttribute(
+ "scheme",
+ PlacesUIUtils.guessUrlSchemeForUI(aPlacesNode.uri)
+ );
+ } else if (PlacesUtils.containerTypes.includes(type)) {
+ element = document.createXULElement("menu");
+ element.setAttribute("container", "true");
+
+ if (aPlacesNode.type == Ci.nsINavHistoryResultNode.RESULT_TYPE_QUERY) {
+ element.setAttribute("query", "true");
+ if (PlacesUtils.nodeIsTagQuery(aPlacesNode)) {
+ element.setAttribute("tagContainer", "true");
+ } else if (PlacesUtils.nodeIsDay(aPlacesNode)) {
+ element.setAttribute("dayContainer", "true");
+ } else if (PlacesUtils.nodeIsHost(aPlacesNode)) {
+ element.setAttribute("hostContainer", "true");
+ }
+ }
+
+ let popup = document.createXULElement("menupopup", {
+ is: "places-popup",
+ });
+ popup._placesNode = PlacesUtils.asContainer(aPlacesNode);
+
+ if (!this._nativeView) {
+ popup.setAttribute("placespopup", "true");
+ }
+
+ element.appendChild(popup);
+ element.className = "menu-iconic bookmark-item";
+
+ this._domNodes.set(aPlacesNode, popup);
+ } else {
+ throw new Error("Unexpected node");
+ }
+
+ element.setAttribute("label", PlacesUIUtils.getBestTitle(aPlacesNode));
+
+ let icon = aPlacesNode.icon;
+ if (icon) {
+ element.setAttribute("image", icon);
+ }
+ }
+
+ element._placesNode = aPlacesNode;
+ if (!this._domNodes.has(aPlacesNode)) {
+ this._domNodes.set(aPlacesNode, element);
+ }
+
+ return element;
+ }
+
+ _insertNewItemToPopup(aNewChild, aInsertionNode, aBefore = null) {
+ let element = this._createDOMNodeForPlacesNode(aNewChild);
+
+ aInsertionNode.insertBefore(element, aBefore);
+ return element;
+ }
+
+ toggleCutNode(aPlacesNode, aValue) {
+ let elt = this._getDOMNodeForPlacesNode(aPlacesNode);
+
+ // We may get the popup for menus, but we need the menu itself.
+ if (elt.localName == "menupopup") {
+ elt = elt.parentNode;
+ }
+ if (aValue) {
+ elt.setAttribute("cutting", "true");
+ } else {
+ elt.removeAttribute("cutting");
+ }
+ }
+
+ nodeURIChanged(aPlacesNode, aURIString) {
+ let elt = this._getDOMNodeForPlacesNode(aPlacesNode, true);
+
+ // There's no DOM node, thus there's nothing to be done when the URI changes.
+ if (!elt) {
+ return;
+ }
+
+ // Here we need the <menu>.
+ if (elt.localName == "menupopup") {
+ elt = elt.parentNode;
+ }
+
+ elt.setAttribute(
+ "scheme",
+ PlacesUIUtils.guessUrlSchemeForUI(aPlacesNode.uri)
+ );
+ }
+
+ nodeIconChanged(aPlacesNode) {
+ let elt = this._getDOMNodeForPlacesNode(aPlacesNode, true);
+
+ // There's no UI representation for the root node, or there's no DOM node,
+ // thus there's nothing to be done when the icon changes.
+ if (!elt || elt == this._rootElt) {
+ return;
+ }
+
+ // Here we need the <menu>.
+ if (elt.localName == "menupopup") {
+ elt = elt.parentNode;
+ }
+ // We must remove and reset the attribute to force an update.
+ elt.removeAttribute("image");
+ elt.setAttribute("image", aPlacesNode.icon);
+ }
+
+ nodeTitleChanged(aPlacesNode, aNewTitle) {
+ let elt = this._getDOMNodeForPlacesNode(aPlacesNode);
+
+ // There's no UI representation for the root node, thus there's
+ // nothing to be done when the title changes.
+ if (elt == this._rootElt) {
+ return;
+ }
+
+ // Here we need the <menu>.
+ if (elt.localName == "menupopup") {
+ elt = elt.parentNode;
+ }
+
+ if (!aNewTitle && elt.localName != "toolbarbutton") {
+ // Many users consider toolbars as shortcuts containers, so explicitly
+ // allow empty labels on toolbarbuttons. For any other element try to be
+ // smarter, guessing a title from the uri.
+ elt.setAttribute("label", PlacesUIUtils.getBestTitle(aPlacesNode));
+ } else {
+ elt.setAttribute("label", aNewTitle);
+ }
+ }
+
+ nodeRemoved(aParentPlacesNode, aPlacesNode, aIndex) {
+ let parentElt = this._getDOMNodeForPlacesNode(aParentPlacesNode);
+ let elt = this._getDOMNodeForPlacesNode(aPlacesNode);
+
+ // Here we need the <menu>.
+ if (elt.localName == "menupopup") {
+ elt = elt.parentNode;
+ }
+
+ if (parentElt._built) {
+ parentElt.removeChild(elt);
+
+ // Figure out if we need to show the "<Empty>" menu-item.
+ // TODO Bug 517701: This doesn't seem to handle the case of an empty
+ // root.
+ if (parentElt._startMarker.nextElementSibling == parentElt._endMarker) {
+ this._setEmptyPopupStatus(parentElt, true);
+ }
+ }
+ }
+
+ // Opt-out of history details updates, since all the views derived from this
+ // are not showing them.
+ skipHistoryDetailsNotifications = true;
+ nodeHistoryDetailsChanged() {}
+ nodeTagsChanged() {}
+ nodeDateAddedChanged() {}
+ nodeLastModifiedChanged() {}
+ nodeKeywordChanged() {}
+ sortingChanged() {}
+ batching() {}
+
+ nodeInserted(aParentPlacesNode, aPlacesNode, aIndex) {
+ let parentElt = this._getDOMNodeForPlacesNode(aParentPlacesNode);
+ if (!parentElt._built) {
+ return;
+ }
+
+ let index =
+ Array.prototype.indexOf.call(parentElt.children, parentElt._startMarker) +
+ aIndex +
+ 1;
+ this._insertNewItemToPopup(
+ aPlacesNode,
+ parentElt,
+ parentElt.children[index] || parentElt._endMarker
+ );
+ this._setEmptyPopupStatus(parentElt, false);
+ }
+
+ nodeMoved(
+ aPlacesNode,
+ aOldParentPlacesNode,
+ aOldIndex,
+ aNewParentPlacesNode,
+ aNewIndex
+ ) {
+ // Note: the current implementation of moveItem does not actually
+ // use this notification when the item in question is moved from one
+ // folder to another. Instead, it calls nodeRemoved and nodeInserted
+ // for the two folders. Thus, we can assume old-parent == new-parent.
+ let elt = this._getDOMNodeForPlacesNode(aPlacesNode);
+
+ // Here we need the <menu>.
+ if (elt.localName == "menupopup") {
+ elt = elt.parentNode;
+ }
+
+ // If our root node is a folder, it might be moved. There's nothing
+ // we need to do in that case.
+ if (elt == this._rootElt) {
+ return;
+ }
+
+ let parentElt = this._getDOMNodeForPlacesNode(aNewParentPlacesNode);
+ if (parentElt._built) {
+ // Move the node.
+ parentElt.removeChild(elt);
+ let index =
+ Array.prototype.indexOf.call(
+ parentElt.children,
+ parentElt._startMarker
+ ) +
+ aNewIndex +
+ 1;
+ parentElt.insertBefore(elt, parentElt.children[index]);
+ }
+ }
+
+ containerStateChanged(aPlacesNode, aOldState, aNewState) {
+ if (
+ aNewState == Ci.nsINavHistoryContainerResultNode.STATE_OPENED ||
+ aNewState == Ci.nsINavHistoryContainerResultNode.STATE_CLOSED
+ ) {
+ this.invalidateContainer(aPlacesNode);
+ }
+ }
+
+ /**
+ * Checks whether the popup associated with the provided element is open.
+ * This method may be overridden by classes that extend this base class.
+ *
+ * @param {Element} elt
+ * The element to check.
+ * @returns {boolean}
+ */
+ _isPopupOpen(elt) {
+ return !!elt.parentNode.open;
+ }
+
+ invalidateContainer(aPlacesNode) {
+ let elt = this._getDOMNodeForPlacesNode(aPlacesNode);
+ elt._built = false;
+
+ // If the menupopup is open we should live-update it.
+ if (this._isPopupOpen(elt)) {
+ this._rebuildPopup(elt);
+ }
+ }
+
+ uninit() {
+ if (this._result) {
+ this._result.removeObserver(this);
+ this._resultNode.containerOpen = false;
+ this._resultNode = null;
+ this._result = null;
+ }
+
+ if (this._controller) {
+ this._controller.terminate();
+ // Removing the controller will fail if it is already no longer there.
+ // This can happen if the view element was removed/reinserted without
+ // our knowledge. There is no way to check for that having happened
+ // without the possibility of an exception. :-(
+ try {
+ this._viewElt.controllers.removeController(this._controller);
+ } catch (ex) {
+ } finally {
+ this._controller = null;
+ }
+ }
+
+ delete this._viewElt._placesView;
+ }
+
+ get isRTL() {
+ if ("_isRTL" in this) {
+ return this._isRTL;
+ }
+
+ return (this._isRTL =
+ document.defaultView.getComputedStyle(this._viewElt).direction == "rtl");
+ }
+
+ get ownerWindow() {
+ return window;
+ }
+
+ /**
+ * Adds an "Open All in Tabs" menuitem to the bottom of the popup.
+ *
+ * @param {object} aPopup
+ * a Places popup.
+ */
+ _mayAddCommandsItems(aPopup) {
+ // The command items are never added to the root popup.
+ if (aPopup == this._rootElt) {
+ return;
+ }
+
+ let hasMultipleURIs = false;
+
+ // Check if the popup contains at least 2 menuitems with places nodes.
+ // We don't currently support opening multiple uri nodes when they are not
+ // populated by the result.
+ if (aPopup._placesNode.childCount > 0) {
+ let currentChild = aPopup.firstElementChild;
+ let numURINodes = 0;
+ while (currentChild) {
+ if (currentChild.localName == "menuitem" && currentChild._placesNode) {
+ if (++numURINodes == 2) {
+ break;
+ }
+ }
+ currentChild = currentChild.nextElementSibling;
+ }
+ hasMultipleURIs = numURINodes > 1;
+ }
+
+ if (!hasMultipleURIs) {
+ // We don't have to show any option.
+ if (aPopup._endOptOpenAllInTabs) {
+ aPopup.removeChild(aPopup._endOptOpenAllInTabs);
+ aPopup._endOptOpenAllInTabs = null;
+
+ aPopup.removeChild(aPopup._endOptSeparator);
+ aPopup._endOptSeparator = null;
+ }
+ } else if (!aPopup._endOptOpenAllInTabs) {
+ // Create a separator before options.
+ aPopup._endOptSeparator = document.createXULElement("menuseparator");
+ aPopup._endOptSeparator.className = "bookmarks-actions-menuseparator";
+ aPopup.appendChild(aPopup._endOptSeparator);
+
+ // Add the "Open All in Tabs" menuitem.
+ aPopup._endOptOpenAllInTabs = document.createXULElement("menuitem");
+ aPopup._endOptOpenAllInTabs.className = "openintabs-menuitem";
+
+ aPopup._endOptOpenAllInTabs.setAttribute(
+ "oncommand",
+ "PlacesUIUtils.openMultipleLinksInTabs(this.parentNode._placesNode, event, " +
+ "PlacesUIUtils.getViewForNode(this));"
+ );
+ aPopup._endOptOpenAllInTabs.setAttribute(
+ "label",
+ gNavigatorBundle.getString("menuOpenAllInTabs.label")
+ );
+ aPopup.appendChild(aPopup._endOptOpenAllInTabs);
+ }
+ }
+
+ _ensureMarkers(aPopup) {
+ if (aPopup._startMarker) {
+ return;
+ }
+
+ // Places nodes are appended between _startMarker and _endMarker, that
+ // are hidden menuseparators. By default they take the whole panel...
+ aPopup._startMarker = document.createXULElement("menuseparator");
+ aPopup._startMarker.hidden = true;
+ aPopup.insertBefore(aPopup._startMarker, aPopup.firstElementChild);
+ aPopup._endMarker = document.createXULElement("menuseparator");
+ aPopup._endMarker.hidden = true;
+ aPopup.appendChild(aPopup._endMarker);
+
+ // ...but there can be static content before or after the places nodes, thus
+ // we move the markers to the right position, by checking for static content
+ // at the beginning of the view, and for an element with "afterplacescontent"
+ // attribute.
+ // TODO: In the future we should just use a container element.
+ let firstNonStaticNodeFound = false;
+ for (let child of aPopup.children) {
+ if (child.hasAttribute("afterplacescontent")) {
+ aPopup.insertBefore(aPopup._endMarker, child);
+ break;
+ }
+
+ // Check for the first Places node that is not a view.
+ if (child._placesNode && !child._placesView && !firstNonStaticNodeFound) {
+ firstNonStaticNodeFound = true;
+ aPopup.insertBefore(aPopup._startMarker, child);
+ }
+ }
+ if (!firstNonStaticNodeFound) {
+ // Just put the start marker before the end marker.
+ aPopup.insertBefore(aPopup._startMarker, aPopup._endMarker);
+ }
+ }
+
+ _onPopupShowing(aEvent) {
+ // Avoid handling popupshowing of inner views.
+ let popup = aEvent.originalTarget;
+
+ this._ensureMarkers(popup);
+
+ // Remove any delayed element, see _cleanPopup for details.
+ if ("_delayedRemovals" in popup) {
+ while (popup._delayedRemovals.length) {
+ popup.removeChild(popup._delayedRemovals.shift());
+ }
+ }
+
+ if (popup._placesNode && PlacesUIUtils.getViewForNode(popup) == this) {
+ if (!popup._placesNode.containerOpen) {
+ popup._placesNode.containerOpen = true;
+ }
+ if (!popup._built) {
+ this._rebuildPopup(popup);
+ }
+
+ this._mayAddCommandsItems(popup);
+ }
+ }
+
+ _addEventListeners(aObject, aEventNames, aCapturing = false) {
+ for (let i = 0; i < aEventNames.length; i++) {
+ aObject.addEventListener(aEventNames[i], this, aCapturing);
+ }
+ }
+
+ _removeEventListeners(aObject, aEventNames, aCapturing = false) {
+ for (let i = 0; i < aEventNames.length; i++) {
+ aObject.removeEventListener(aEventNames[i], this, aCapturing);
+ }
+ }
+}
+
+/**
+ * Toolbar View implementation.
+ */
+class PlacesToolbar extends PlacesViewBase {
+ constructor(placesUrl, rootElt, viewElt) {
+ let startTime = Date.now();
+ super(placesUrl, rootElt, viewElt);
+ this._addEventListeners(this._dragRoot, this._cbEvents, false);
+ this._addEventListeners(
+ this._rootElt,
+ ["popupshowing", "popuphidden"],
+ true
+ );
+ this._addEventListeners(this._rootElt, ["overflow", "underflow"], true);
+ this._addEventListeners(window, ["resize", "unload"], false);
+
+ // If personal-bookmarks has been dragged to the tabs toolbar,
+ // we have to track addition and removals of tabs, to properly
+ // recalculate the available space for bookmarks.
+ // TODO (bug 734730): Use a performant mutation listener when available.
+ if (
+ this._viewElt.parentNode.parentNode ==
+ document.getElementById("TabsToolbar")
+ ) {
+ this._addEventListeners(
+ gBrowser.tabContainer,
+ ["TabOpen", "TabClose"],
+ false
+ );
+ }
+
+ Services.telemetry
+ .getHistogramById("FX_BOOKMARKS_TOOLBAR_INIT_MS")
+ .add(Date.now() - startTime);
+ }
+
+ // Called by PlacesViewBase so we can init properties that class
+ // initialization depends on. PlacesViewBase will assign this.place which
+ // calls which sets `this.result` through its places observer, which changes
+ // containerOpen, which calls invalidateContainer(), which calls rebuild(),
+ // which needs `_overFolder`, `_chevronPopup` and various other things to
+ // exist.
+ _init() {
+ this._overFolder = {
+ elt: null,
+ openTimer: null,
+ hoverTime: 350,
+ closeTimer: null,
+ };
+
+ // Add some smart getters for our elements.
+ let thisView = this;
+ [
+ ["_dropIndicator", "PlacesToolbarDropIndicator"],
+ ["_chevron", "PlacesChevron"],
+ ["_chevronPopup", "PlacesChevronPopup"],
+ ].forEach(function (elementGlobal) {
+ let [name, id] = elementGlobal;
+ thisView.__defineGetter__(name, function () {
+ let element = document.getElementById(id);
+ if (!element) {
+ return null;
+ }
+
+ delete thisView[name];
+ return (thisView[name] = element);
+ });
+ });
+
+ this._viewElt._placesView = this;
+
+ this._dragRoot = BookmarkingUI.toolbar.contains(this._viewElt)
+ ? BookmarkingUI.toolbar
+ : this._viewElt;
+
+ this._updatingNodesVisibility = false;
+ }
+
+ _cbEvents = [
+ "dragstart",
+ "dragover",
+ "dragleave",
+ "dragend",
+ "drop",
+ "mousemove",
+ "mouseover",
+ "mouseout",
+ "mousedown",
+ ];
+
+ QueryInterface = ChromeUtils.generateQI([
+ "nsINamed",
+ "nsITimerCallback",
+ ...PlacesViewBase.interfaces,
+ ]);
+
+ uninit() {
+ if (this._dragRoot) {
+ this._removeEventListeners(this._dragRoot, this._cbEvents, false);
+ }
+ this._removeEventListeners(
+ this._rootElt,
+ ["popupshowing", "popuphidden"],
+ true
+ );
+ this._removeEventListeners(this._rootElt, ["overflow", "underflow"], true);
+ this._removeEventListeners(window, ["resize", "unload"], false);
+ this._removeEventListeners(
+ gBrowser.tabContainer,
+ ["TabOpen", "TabClose"],
+ false
+ );
+
+ if (this._chevron._placesView) {
+ this._chevron._placesView.uninit();
+ }
+
+ if (this._otherBookmarks?._placesView) {
+ this._otherBookmarks._placesView.uninit();
+ }
+
+ super.uninit();
+ }
+
+ _openedMenuButton = null;
+ _allowPopupShowing = true;
+
+ promiseRebuilt() {
+ return this._rebuilding?.promise;
+ }
+
+ get _isAlive() {
+ return this._resultNode && this._rootElt;
+ }
+
+ _runBeforeFrameRender(callback) {
+ return new Promise((resolve, reject) => {
+ window.requestAnimationFrame(() => {
+ try {
+ resolve(callback());
+ } catch (err) {
+ reject(err);
+ }
+ });
+ });
+ }
+
+ async _rebuild() {
+ // Clear out references to existing nodes, since they will be removed
+ // and re-added.
+ if (this._overFolder.elt) {
+ this._clearOverFolder();
+ }
+
+ this._openedMenuButton = null;
+ while (this._rootElt.hasChildNodes()) {
+ this._rootElt.firstChild.remove();
+ }
+
+ let cc = this._resultNode.childCount;
+ if (cc > 0) {
+ // There could be a lot of nodes, but we only want to build the ones that
+ // are more likely to be shown, not all of them.
+ // We also don't want to wait for reflows at every node insertion, to
+ // calculate a precise number of visible items, thus we guess a size from
+ // the first non-separator node (because separators have flexible size).
+ let startIndex = 0;
+ let limit = await this._runBeforeFrameRender(() => {
+ if (!this._isAlive) {
+ return cc;
+ }
+
+ // Look for the first non-separator node.
+ let elt;
+ while (startIndex < cc) {
+ elt = this._insertNewItem(
+ this._resultNode.getChild(startIndex),
+ this._rootElt
+ );
+ ++startIndex;
+ if (elt.localName != "toolbarseparator") {
+ break;
+ }
+ }
+ if (!elt) {
+ return cc;
+ }
+
+ return window.promiseDocumentFlushed(() => {
+ // We assume a button with just the icon will be more or less a square,
+ // then compensate the measurement error by considering a larger screen
+ // width. Moreover the window could be bigger than the screen.
+ let size = elt.clientHeight || 1; // Sanity fallback.
+ return Math.min(cc, parseInt((window.screen.width * 1.5) / size));
+ });
+ });
+
+ if (!this._isAlive) {
+ return;
+ }
+
+ let fragment = document.createDocumentFragment();
+ for (let i = startIndex; i < limit; ++i) {
+ this._insertNewItem(this._resultNode.getChild(i), fragment);
+ }
+ await new Promise(resolve => window.requestAnimationFrame(resolve));
+ if (!this._isAlive) {
+ return;
+ }
+ this._rootElt.appendChild(fragment);
+ this.updateNodesVisibility();
+ }
+
+ if (this._chevronPopup.hasAttribute("type")) {
+ // Chevron has already been initialized, but since we are forcing
+ // a rebuild of the toolbar, it has to be rebuilt.
+ // Otherwise, it will be initialized when the toolbar overflows.
+ this._chevronPopup.place = this.place;
+ }
+
+ // Rebuild the "Other Bookmarks" folder if it already exists.
+ let otherBookmarks = document.getElementById("OtherBookmarks");
+ otherBookmarks?.remove();
+
+ BookmarkingUI.maybeShowOtherBookmarksFolder().catch(console.error);
+ }
+
+ _insertNewItem(aChild, aInsertionNode, aBefore = null) {
+ this._domNodes.delete(aChild);
+
+ let type = aChild.type;
+ let button;
+ if (type == Ci.nsINavHistoryResultNode.RESULT_TYPE_SEPARATOR) {
+ button = document.createXULElement("toolbarseparator");
+ } else {
+ button = document.createXULElement("toolbarbutton");
+ button.className = "bookmark-item";
+ button.setAttribute("label", aChild.title || "");
+
+ if (PlacesUtils.containerTypes.includes(type)) {
+ button.setAttribute("type", "menu");
+ button.setAttribute("container", "true");
+
+ if (PlacesUtils.nodeIsQuery(aChild)) {
+ button.setAttribute("query", "true");
+ if (PlacesUtils.nodeIsTagQuery(aChild)) {
+ button.setAttribute("tagContainer", "true");
+ }
+ }
+
+ let popup = document.createXULElement("menupopup", {
+ is: "places-popup",
+ });
+ popup.setAttribute("placespopup", "true");
+ popup.classList.add("toolbar-menupopup");
+ button.appendChild(popup);
+ popup._placesNode = PlacesUtils.asContainer(aChild);
+ popup.setAttribute("context", "placesContext");
+
+ this._domNodes.set(aChild, popup);
+ } else if (PlacesUtils.nodeIsURI(aChild)) {
+ button.setAttribute(
+ "scheme",
+ PlacesUIUtils.guessUrlSchemeForUI(aChild.uri)
+ );
+ }
+ }
+
+ button._placesNode = aChild;
+ let { icon } = button._placesNode;
+ if (icon) {
+ button.setAttribute("image", icon);
+ }
+ if (!this._domNodes.has(aChild)) {
+ this._domNodes.set(aChild, button);
+ }
+
+ if (aBefore) {
+ aInsertionNode.insertBefore(button, aBefore);
+ } else {
+ aInsertionNode.appendChild(button);
+ }
+ return button;
+ }
+
+ _updateChevronPopupNodesVisibility() {
+ // Note the toolbar by default builds less nodes than the chevron popup.
+ for (
+ let toolbarNode = this._rootElt.firstElementChild,
+ node = this._chevronPopup._startMarker.nextElementSibling;
+ toolbarNode && node;
+ toolbarNode = toolbarNode.nextElementSibling,
+ node = node.nextElementSibling
+ ) {
+ node.hidden = toolbarNode.style.visibility != "hidden";
+ }
+ }
+
+ _onChevronPopupShowing(aEvent) {
+ // Handle popupshowing only for the chevron popup, not for nested ones.
+ if (aEvent.target != this._chevronPopup) {
+ return;
+ }
+
+ if (!this._chevron._placesView) {
+ this._chevron._placesView = new PlacesMenu(aEvent, this.place);
+ }
+
+ this._updateChevronPopupNodesVisibility();
+ }
+
+ _onOtherBookmarksPopupShowing(aEvent) {
+ if (aEvent.target != this._otherBookmarksPopup) {
+ return;
+ }
+
+ if (!this._otherBookmarks._placesView) {
+ this._otherBookmarks._placesView = new PlacesMenu(
+ aEvent,
+ "place:parent=" + PlacesUtils.bookmarks.unfiledGuid
+ );
+ }
+ }
+
+ handleEvent(aEvent) {
+ switch (aEvent.type) {
+ case "unload":
+ this.uninit();
+ break;
+ case "resize":
+ // This handler updates nodes visibility in both the toolbar
+ // and the chevron popup when a window resize does not change
+ // the overflow status of the toolbar.
+ if (aEvent.target == aEvent.currentTarget) {
+ this.updateNodesVisibility();
+ }
+ break;
+ case "overflow":
+ if (!this._isOverflowStateEventRelevant(aEvent)) {
+ return;
+ }
+ // Avoid triggering overflow in containers if possible
+ aEvent.stopPropagation();
+ this._onOverflow();
+ break;
+ case "underflow":
+ if (!this._isOverflowStateEventRelevant(aEvent)) {
+ return;
+ }
+ // Avoid triggering underflow in containers if possible
+ aEvent.stopPropagation();
+ this._onUnderflow();
+ break;
+ case "TabOpen":
+ case "TabClose":
+ this.updateNodesVisibility();
+ break;
+ case "dragstart":
+ this._onDragStart(aEvent);
+ break;
+ case "dragover":
+ this._onDragOver(aEvent);
+ break;
+ case "dragleave":
+ this._onDragLeave(aEvent);
+ break;
+ case "dragend":
+ this._onDragEnd(aEvent);
+ break;
+ case "drop":
+ this._onDrop(aEvent);
+ break;
+ case "mouseover":
+ this._onMouseOver(aEvent);
+ break;
+ case "mousemove":
+ this._onMouseMove(aEvent);
+ break;
+ case "mouseout":
+ this._onMouseOut(aEvent);
+ break;
+ case "mousedown":
+ this._onMouseDown(aEvent);
+ break;
+ case "popupshowing":
+ this._onPopupShowing(aEvent);
+ break;
+ case "popuphidden":
+ this._onPopupHidden(aEvent);
+ break;
+ default:
+ throw new Error("Trying to handle unexpected event.");
+ }
+ }
+
+ _isOverflowStateEventRelevant(aEvent) {
+ // Ignore events not aimed at ourselves, as well as purely vertical ones:
+ return aEvent.target == aEvent.currentTarget && aEvent.detail > 0;
+ }
+
+ _onOverflow() {
+ // Attach the popup binding to the chevron popup if it has not yet
+ // been initialized.
+ if (!this._chevronPopup.hasAttribute("type")) {
+ this._chevronPopup.setAttribute("place", this.place);
+ this._chevronPopup.setAttribute("type", "places");
+ }
+ this._chevron.collapsed = false;
+ this.updateNodesVisibility();
+ }
+
+ _onUnderflow() {
+ this.updateNodesVisibility();
+ this._chevron.collapsed = true;
+ }
+
+ updateNodesVisibility() {
+ // Update the chevron on a timer. This will avoid repeated work when
+ // lot of changes happen in a small timeframe.
+ if (this._updateNodesVisibilityTimer) {
+ this._updateNodesVisibilityTimer.cancel();
+ }
+
+ this._updateNodesVisibilityTimer = this._setTimer(100);
+ }
+
+ async _updateNodesVisibilityTimerCallback() {
+ if (this._updatingNodesVisibility || window.closed) {
+ return;
+ }
+ this._updatingNodesVisibility = true;
+
+ let dwu = window.windowUtils;
+
+ let scrollRect = await window.promiseDocumentFlushed(() =>
+ dwu.getBoundsWithoutFlushing(this._rootElt)
+ );
+
+ let childOverflowed = false;
+
+ // We're about to potentially update a bunch of nodes, so we do it
+ // in a requestAnimationFrame so that other JS that's might execute
+ // in the same tick can avoid flushing styles and layout for these
+ // changes.
+ window.requestAnimationFrame(() => {
+ for (let child of this._rootElt.children) {
+ // Once a child overflows, all the next ones will.
+ if (!childOverflowed) {
+ let childRect = dwu.getBoundsWithoutFlushing(child);
+ childOverflowed = this.isRTL
+ ? childRect.left < scrollRect.left
+ : childRect.right > scrollRect.right;
+ }
+
+ if (childOverflowed) {
+ child.removeAttribute("image");
+ child.style.visibility = "hidden";
+ } else {
+ let icon = child._placesNode.icon;
+ if (icon) {
+ child.setAttribute("image", icon);
+ }
+ child.style.removeProperty("visibility");
+ }
+ }
+
+ // We rebuild the chevron on popupShowing, so if it is open
+ // we must update it.
+ if (!this._chevron.collapsed && this._chevron.open) {
+ this._updateChevronPopupNodesVisibility();
+ }
+
+ let event = new CustomEvent("BookmarksToolbarVisibilityUpdated", {
+ bubbles: true,
+ });
+ this._viewElt.dispatchEvent(event);
+ this._updatingNodesVisibility = false;
+ });
+ }
+
+ nodeInserted(aParentPlacesNode, aPlacesNode, aIndex) {
+ let parentElt = this._getDOMNodeForPlacesNode(aParentPlacesNode);
+ if (parentElt == this._rootElt) {
+ // Node is on the toolbar.
+ let children = this._rootElt.children;
+ // Nothing to do if it's a never-visible node, but note it's possible
+ // we are appending.
+ if (aIndex > children.length) {
+ return;
+ }
+
+ // Note that childCount is already accounting for the node being added,
+ // thus we must subtract one node from it.
+ if (this._resultNode.childCount - 1 > children.length) {
+ if (aIndex == children.length) {
+ // If we didn't build all the nodes and new node is being appended,
+ // we can skip it as well.
+ return;
+ }
+ // Keep the number of built nodes consistent.
+ this._rootElt.removeChild(this._rootElt.lastElementChild);
+ }
+
+ let button = this._insertNewItem(
+ aPlacesNode,
+ this._rootElt,
+ children[aIndex] || null
+ );
+ let prevSiblingOverflowed =
+ aIndex > 0 &&
+ aIndex <= children.length &&
+ children[aIndex - 1].style.visibility == "hidden";
+ if (prevSiblingOverflowed) {
+ button.style.visibility = "hidden";
+ } else {
+ let icon = aPlacesNode.icon;
+ if (icon) {
+ button.setAttribute("image", icon);
+ }
+ this.updateNodesVisibility();
+ }
+ return;
+ }
+
+ super.nodeInserted(aParentPlacesNode, aPlacesNode, aIndex);
+ }
+
+ nodeRemoved(aParentPlacesNode, aPlacesNode, aIndex) {
+ let parentElt = this._getDOMNodeForPlacesNode(aParentPlacesNode);
+ if (parentElt == this._rootElt) {
+ // Node is on the toolbar.
+ let elt = this._getDOMNodeForPlacesNode(aPlacesNode, true);
+ // Nothing to do if it's a never-visible node.
+ if (!elt) {
+ return;
+ }
+
+ // Here we need the <menu>.
+ if (elt.localName == "menupopup") {
+ elt = elt.parentNode;
+ }
+
+ let overflowed = elt.style.visibility == "hidden";
+ this._removeChild(elt);
+ if (this._resultNode.childCount > this._rootElt.children.length) {
+ // A new node should be built to keep a coherent number of children.
+ this._insertNewItem(
+ this._resultNode.getChild(this._rootElt.children.length),
+ this._rootElt
+ );
+ }
+ if (!overflowed) {
+ this.updateNodesVisibility();
+ }
+ return;
+ }
+
+ super.nodeRemoved(aParentPlacesNode, aPlacesNode, aIndex);
+ }
+
+ nodeMoved(
+ aPlacesNode,
+ aOldParentPlacesNode,
+ aOldIndex,
+ aNewParentPlacesNode,
+ aNewIndex
+ ) {
+ let parentElt = this._getDOMNodeForPlacesNode(aNewParentPlacesNode);
+ if (parentElt == this._rootElt) {
+ // Node is on the toolbar.
+ // Do nothing if the node will never be visible.
+ let lastBuiltIndex = this._rootElt.children.length - 1;
+ if (aOldIndex > lastBuiltIndex && aNewIndex > lastBuiltIndex + 1) {
+ return;
+ }
+
+ let elt = this._getDOMNodeForPlacesNode(aPlacesNode, true);
+ if (elt) {
+ // Here we need the <menu>.
+ if (elt.localName == "menupopup") {
+ elt = elt.parentNode;
+ }
+ this._removeChild(elt);
+ }
+
+ if (aNewIndex > lastBuiltIndex + 1) {
+ if (this._resultNode.childCount > this._rootElt.children.length) {
+ // If the element was built and becomes non built, another node should
+ // be built to keep a coherent number of children.
+ this._insertNewItem(
+ this._resultNode.getChild(this._rootElt.children.length),
+ this._rootElt
+ );
+ }
+ return;
+ }
+
+ if (!elt) {
+ // The node has not been inserted yet, so we must create it.
+ elt = this._insertNewItem(
+ aPlacesNode,
+ this._rootElt,
+ this._rootElt.children[aNewIndex]
+ );
+ let icon = aPlacesNode.icon;
+ if (icon) {
+ elt.setAttribute("image", icon);
+ }
+ } else {
+ this._rootElt.insertBefore(elt, this._rootElt.children[aNewIndex]);
+ }
+
+ // The chevron view may get nodeMoved after the toolbar. In such a case,
+ // we should ensure (by manually swapping menuitems) that the actual nodes
+ // are in the final position before updateNodesVisibility tries to update
+ // their visibility, or the chevron may go out of sync.
+ // Luckily updateNodesVisibility runs on a timer, so, by the time it updates
+ // nodes, the menu has already handled the notification.
+
+ this.updateNodesVisibility();
+ return;
+ }
+
+ super.nodeMoved(
+ aPlacesNode,
+ aOldParentPlacesNode,
+ aOldIndex,
+ aNewParentPlacesNode,
+ aNewIndex
+ );
+ }
+
+ nodeTitleChanged(aPlacesNode, aNewTitle) {
+ let elt = this._getDOMNodeForPlacesNode(aPlacesNode, true);
+
+ // Nothing to do if it's a never-visible node.
+ if (!elt || elt == this._rootElt) {
+ return;
+ }
+
+ super.nodeTitleChanged(aPlacesNode, aNewTitle);
+
+ // Here we need the <menu>.
+ if (elt.localName == "menupopup") {
+ elt = elt.parentNode;
+ }
+
+ if (elt.parentNode == this._rootElt) {
+ // Node is on the toolbar.
+ if (elt.style.visibility != "hidden") {
+ this.updateNodesVisibility();
+ }
+ }
+ }
+
+ invalidateContainer(aPlacesNode) {
+ let elt = this._getDOMNodeForPlacesNode(aPlacesNode, true);
+ // Nothing to do if it's a never-visible node.
+ if (!elt) {
+ return;
+ }
+
+ if (elt == this._rootElt) {
+ // Container is the toolbar itself.
+ let instance = (this._rebuildingInstance = {});
+ if (!this._rebuilding) {
+ this._rebuilding = Promise.withResolvers();
+ }
+ this._rebuild()
+ .catch(console.error)
+ .finally(() => {
+ if (instance == this._rebuildingInstance) {
+ this._rebuilding.resolve();
+ this._rebuilding = null;
+ }
+ });
+ return;
+ }
+
+ super.invalidateContainer(aPlacesNode);
+ }
+
+ _clearOverFolder() {
+ // The mouse is no longer dragging over the stored menubutton.
+ // Close the menubutton, clear out drag styles, and clear all
+ // timers for opening/closing it.
+ if (this._overFolder.elt && this._overFolder.elt.menupopup) {
+ if (!this._overFolder.elt.menupopup.hasAttribute("dragover")) {
+ this._overFolder.elt.menupopup.hidePopup();
+ }
+ this._overFolder.elt.removeAttribute("dragover");
+ this._overFolder.elt = null;
+ }
+ if (this._overFolder.openTimer) {
+ this._overFolder.openTimer.cancel();
+ this._overFolder.openTimer = null;
+ }
+ if (this._overFolder.closeTimer) {
+ this._overFolder.closeTimer.cancel();
+ this._overFolder.closeTimer = null;
+ }
+ }
+
+ /**
+ * This function returns information about where to drop when dragging over
+ * the toolbar.
+ *
+ * @param {object} aEvent
+ * The associated event.
+ * @returns {object}
+ * - ip: the insertion point for the bookmarks service.
+ * - beforeIndex: child index to drop before, for the drop indicator.
+ * - folderElt: the folder to drop into, if applicable.
+ */
+ _getDropPoint(aEvent) {
+ if (!PlacesUtils.nodeIsFolder(this._resultNode)) {
+ return null;
+ }
+
+ let dropPoint = { ip: null, beforeIndex: null, folderElt: null };
+ let elt = aEvent.target;
+ if (
+ elt._placesNode &&
+ elt != this._rootElt &&
+ elt.localName != "menupopup"
+ ) {
+ let eltRect = elt.getBoundingClientRect();
+ let eltIndex = Array.prototype.indexOf.call(this._rootElt.children, elt);
+ if (
+ PlacesUtils.nodeIsFolder(elt._placesNode) &&
+ !PlacesUIUtils.isFolderReadOnly(elt._placesNode)
+ ) {
+ // This is a folder.
+ // If we are in the middle of it, drop inside it.
+ // Otherwise, drop before it, with regards to RTL mode.
+ let threshold = eltRect.width * 0.25;
+ if (
+ this.isRTL
+ ? aEvent.clientX > eltRect.right - threshold
+ : aEvent.clientX < eltRect.left + threshold
+ ) {
+ // Drop before this folder.
+ dropPoint.ip = new PlacesInsertionPoint({
+ parentGuid: PlacesUtils.getConcreteItemGuid(this._resultNode),
+ index: eltIndex,
+ orientation: Ci.nsITreeView.DROP_BEFORE,
+ });
+ dropPoint.beforeIndex = eltIndex;
+ } else if (
+ this.isRTL
+ ? aEvent.clientX > eltRect.left + threshold
+ : aEvent.clientX < eltRect.right - threshold
+ ) {
+ // Drop inside this folder.
+ let tagName = PlacesUtils.nodeIsTagQuery(elt._placesNode)
+ ? elt._placesNode.title
+ : null;
+ dropPoint.ip = new PlacesInsertionPoint({
+ parentGuid: PlacesUtils.getConcreteItemGuid(elt._placesNode),
+ tagName,
+ });
+ dropPoint.beforeIndex = eltIndex;
+ dropPoint.folderElt = elt;
+ } else {
+ // Drop after this folder.
+ let beforeIndex =
+ eltIndex == this._rootElt.children.length - 1 ? -1 : eltIndex + 1;
+
+ dropPoint.ip = new PlacesInsertionPoint({
+ parentGuid: PlacesUtils.getConcreteItemGuid(this._resultNode),
+ index: beforeIndex,
+ orientation: Ci.nsITreeView.DROP_BEFORE,
+ });
+ dropPoint.beforeIndex = beforeIndex;
+ }
+ } else {
+ // This is a non-folder node or a read-only folder.
+ // Drop before it with regards to RTL mode.
+ let threshold = eltRect.width * 0.5;
+ if (
+ this.isRTL
+ ? aEvent.clientX > eltRect.left + threshold
+ : aEvent.clientX < eltRect.left + threshold
+ ) {
+ // Drop before this bookmark.
+ dropPoint.ip = new PlacesInsertionPoint({
+ parentGuid: PlacesUtils.getConcreteItemGuid(this._resultNode),
+ index: eltIndex,
+ orientation: Ci.nsITreeView.DROP_BEFORE,
+ });
+ dropPoint.beforeIndex = eltIndex;
+ } else {
+ // Drop after this bookmark.
+ let beforeIndex =
+ eltIndex == this._rootElt.children.length - 1 ? -1 : eltIndex + 1;
+ dropPoint.ip = new PlacesInsertionPoint({
+ parentGuid: PlacesUtils.getConcreteItemGuid(this._resultNode),
+ index: beforeIndex,
+ orientation: Ci.nsITreeView.DROP_BEFORE,
+ });
+ dropPoint.beforeIndex = beforeIndex;
+ }
+ }
+ } else {
+ // We are most likely dragging on the empty area of the
+ // toolbar, we should drop after the last node.
+ dropPoint.ip = new PlacesInsertionPoint({
+ parentGuid: PlacesUtils.getConcreteItemGuid(this._resultNode),
+ orientation: Ci.nsITreeView.DROP_BEFORE,
+ });
+ dropPoint.beforeIndex = -1;
+ }
+
+ return dropPoint;
+ }
+
+ _setTimer(aTime) {
+ let timer = Cc["@mozilla.org/timer;1"].createInstance(Ci.nsITimer);
+ timer.initWithCallback(this, aTime, timer.TYPE_ONE_SHOT);
+ return timer;
+ }
+
+ get name() {
+ return "PlacesToolbar";
+ }
+
+ notify(aTimer) {
+ if (aTimer == this._updateNodesVisibilityTimer) {
+ this._updateNodesVisibilityTimer = null;
+ this._updateNodesVisibilityTimerCallback();
+ } else if (aTimer == this._overFolder.openTimer) {
+ // * Timer to open a menubutton that's being dragged over.
+ // Set the autoopen attribute on the folder's menupopup so that
+ // the menu will automatically close when the mouse drags off of it.
+ this._overFolder.elt.menupopup.setAttribute("autoopened", "true");
+ this._overFolder.elt.open = true;
+ this._overFolder.openTimer = null;
+ } else if (aTimer == this._overFolder.closeTimer) {
+ // * Timer to close a menubutton that's been dragged off of.
+ // Close the menubutton if we are not dragging over it or one of
+ // its children. The autoopened attribute will let the menu know to
+ // close later if the menu is still being dragged over.
+ let currentPlacesNode = PlacesControllerDragHelper.currentDropTarget;
+ let inHierarchy = false;
+ while (currentPlacesNode) {
+ if (currentPlacesNode == this._rootElt) {
+ inHierarchy = true;
+ break;
+ }
+ currentPlacesNode = currentPlacesNode.parentNode;
+ }
+ // The _clearOverFolder() function will close the menu for
+ // _overFolder.elt. So null it out if we don't want to close it.
+ if (inHierarchy) {
+ this._overFolder.elt = null;
+ }
+
+ // Clear out the folder and all associated timers.
+ this._clearOverFolder();
+ }
+ }
+
+ _onMouseOver(aEvent) {
+ let button = aEvent.target;
+ if (
+ button.parentNode == this._rootElt &&
+ button._placesNode &&
+ PlacesUtils.nodeIsURI(button._placesNode)
+ ) {
+ window.XULBrowserWindow.setOverLink(aEvent.target._placesNode.uri);
+ }
+ }
+
+ _onMouseOut(aEvent) {
+ window.XULBrowserWindow.setOverLink("");
+ }
+
+ _onMouseDown(aEvent) {
+ let target = aEvent.target;
+ if (
+ aEvent.button == 0 &&
+ target.localName == "toolbarbutton" &&
+ target.getAttribute("type") == "menu"
+ ) {
+ let modifKey = aEvent.shiftKey || aEvent.getModifierState("Accel");
+ if (modifKey) {
+ // Do not open the popup since BEH_onClick is about to
+ // open all child uri nodes in tabs.
+ this._allowPopupShowing = false;
+ }
+ }
+ if (target._placesNode?.uri) {
+ PlacesUIUtils.setupSpeculativeConnection(target._placesNode.uri, window);
+ }
+ }
+
+ _cleanupDragDetails() {
+ // Called on dragend and drop.
+ PlacesControllerDragHelper.currentDropTarget = null;
+ this._draggedElt = null;
+ this._dropIndicator.collapsed = true;
+ }
+
+ _onDragStart(aEvent) {
+ // Sub menus have their own d&d handlers.
+ let draggedElt = aEvent.target;
+ if (draggedElt.parentNode != this._rootElt || !draggedElt._placesNode) {
+ return;
+ }
+
+ if (
+ draggedElt.localName == "toolbarbutton" &&
+ draggedElt.getAttribute("type") == "menu"
+ ) {
+ // If the drag gesture on a container is toward down we open instead
+ // of dragging.
+ let translateY = this._cachedMouseMoveEvent.clientY - aEvent.clientY;
+ let translateX = this._cachedMouseMoveEvent.clientX - aEvent.clientX;
+ if (translateY >= Math.abs(translateX / 2)) {
+ // Don't start the drag.
+ aEvent.preventDefault();
+ // Open the menu.
+ draggedElt.open = true;
+ return;
+ }
+
+ // If the menu is open, close it.
+ if (draggedElt.open) {
+ draggedElt.menupopup.hidePopup();
+ draggedElt.open = false;
+ }
+ }
+
+ // Activate the view and cache the dragged element.
+ this._draggedElt = draggedElt._placesNode;
+ this._rootElt.focus();
+
+ this._controller.setDataTransfer(aEvent);
+ aEvent.stopPropagation();
+ }
+
+ _onDragOver(aEvent) {
+ // Cache the dataTransfer
+ PlacesControllerDragHelper.currentDropTarget = aEvent.target;
+ let dt = aEvent.dataTransfer;
+
+ let dropPoint = this._getDropPoint(aEvent);
+ if (
+ !dropPoint ||
+ !dropPoint.ip ||
+ !PlacesControllerDragHelper.canDrop(dropPoint.ip, dt)
+ ) {
+ this._dropIndicator.collapsed = true;
+ aEvent.stopPropagation();
+ return;
+ }
+
+ if (dropPoint.folderElt || aEvent.originalTarget == this._chevron) {
+ // Dropping over a menubutton or chevron button.
+ // Set styles and timer to open relative menupopup.
+ let overElt = dropPoint.folderElt || this._chevron;
+ if (this._overFolder.elt != overElt) {
+ this._clearOverFolder();
+ this._overFolder.elt = overElt;
+ this._overFolder.openTimer = this._setTimer(this._overFolder.hoverTime);
+ }
+ if (!this._overFolder.elt.hasAttribute("dragover")) {
+ this._overFolder.elt.setAttribute("dragover", "true");
+ }
+
+ this._dropIndicator.collapsed = true;
+ } else {
+ // Dragging over a normal toolbarbutton,
+ // show indicator bar and move it to the appropriate drop point.
+ let ind = this._dropIndicator;
+ ind.parentNode.collapsed = false;
+ let halfInd = ind.clientWidth / 2;
+ let translateX;
+ if (this.isRTL) {
+ halfInd = Math.ceil(halfInd);
+ translateX = 0 - this._rootElt.getBoundingClientRect().right - halfInd;
+ if (this._rootElt.firstElementChild) {
+ if (dropPoint.beforeIndex == -1) {
+ translateX +=
+ this._rootElt.lastElementChild.getBoundingClientRect().left;
+ } else {
+ translateX +=
+ this._rootElt.children[
+ dropPoint.beforeIndex
+ ].getBoundingClientRect().right;
+ }
+ }
+ } else {
+ halfInd = Math.floor(halfInd);
+ translateX = 0 - this._rootElt.getBoundingClientRect().left + halfInd;
+ if (this._rootElt.firstElementChild) {
+ if (dropPoint.beforeIndex == -1) {
+ translateX +=
+ this._rootElt.lastElementChild.getBoundingClientRect().right;
+ } else {
+ translateX +=
+ this._rootElt.children[
+ dropPoint.beforeIndex
+ ].getBoundingClientRect().left;
+ }
+ }
+ }
+
+ ind.style.transform = "translate(" + Math.round(translateX) + "px)";
+ ind.style.marginInlineStart = -ind.clientWidth + "px";
+ ind.collapsed = false;
+
+ // Clear out old folder information.
+ this._clearOverFolder();
+ }
+
+ aEvent.preventDefault();
+ aEvent.stopPropagation();
+ }
+
+ _onDrop(aEvent) {
+ PlacesControllerDragHelper.currentDropTarget = aEvent.target;
+
+ let dropPoint = this._getDropPoint(aEvent);
+ if (dropPoint && dropPoint.ip) {
+ PlacesControllerDragHelper.onDrop(
+ dropPoint.ip,
+ aEvent.dataTransfer
+ ).catch(console.error);
+ aEvent.preventDefault();
+ }
+
+ this._cleanupDragDetails();
+ aEvent.stopPropagation();
+ }
+
+ _onDragLeave(aEvent) {
+ PlacesControllerDragHelper.currentDropTarget = null;
+
+ this._dropIndicator.collapsed = true;
+
+ // If we hovered over a folder, close it now.
+ if (this._overFolder.elt) {
+ this._overFolder.closeTimer = this._setTimer(this._overFolder.hoverTime);
+ }
+ }
+
+ _onDragEnd(aEvent) {
+ this._cleanupDragDetails();
+ }
+
+ _onPopupShowing(aEvent) {
+ if (!this._allowPopupShowing) {
+ this._allowPopupShowing = true;
+ aEvent.preventDefault();
+ return;
+ }
+
+ let parent = aEvent.target.parentNode;
+ if (parent.localName == "toolbarbutton") {
+ this._openedMenuButton = parent;
+ }
+
+ super._onPopupShowing(aEvent);
+ }
+
+ _onPopupHidden(aEvent) {
+ let popup = aEvent.target;
+ let placesNode = popup._placesNode;
+ // Avoid handling popuphidden of inner views
+ if (
+ placesNode &&
+ PlacesUIUtils.getViewForNode(popup) == this &&
+ // UI performance: folder queries are cheap, keep the resultnode open
+ // so we don't rebuild its contents whenever the popup is reopened.
+ !PlacesUtils.nodeIsFolder(placesNode)
+ ) {
+ placesNode.containerOpen = false;
+ }
+
+ let parent = popup.parentNode;
+ if (parent.localName == "toolbarbutton") {
+ this._openedMenuButton = null;
+ // Clear the dragover attribute if present, if we are dragging into a
+ // folder in the hierachy of current opened popup we don't clear
+ // this attribute on clearOverFolder. See Notify for closeTimer.
+ if (parent.hasAttribute("dragover")) {
+ parent.removeAttribute("dragover");
+ }
+ }
+ }
+
+ _onMouseMove(aEvent) {
+ // Used in dragStart to prevent dragging folders when dragging down.
+ this._cachedMouseMoveEvent = aEvent;
+
+ if (
+ this._openedMenuButton == null ||
+ PlacesControllerDragHelper.getSession()
+ ) {
+ return;
+ }
+
+ let target = aEvent.originalTarget;
+ if (
+ this._openedMenuButton != target &&
+ target.localName == "toolbarbutton" &&
+ target.type == "menu"
+ ) {
+ this._openedMenuButton.open = false;
+ target.open = true;
+ }
+ }
+}
+
+/**
+ * View for Places menus. This object should be created during the first
+ * popupshowing that's dispatched on the menu.
+ *
+ */
+class PlacesMenu extends PlacesViewBase {
+ /**
+ *
+ * @param {Event} popupShowingEvent
+ * The event associated with opening the menu.
+ * @param {string} placesUrl
+ * The query associated with the view on the menu.
+ */
+ constructor(popupShowingEvent, placesUrl) {
+ super(
+ placesUrl,
+ popupShowingEvent.target, // <menupopup>
+ popupShowingEvent.target.parentNode // <menu>
+ );
+
+ this._addEventListeners(
+ this._rootElt,
+ ["popupshowing", "popuphidden"],
+ true
+ );
+ this._addEventListeners(window, ["unload"], false);
+ this._addEventListeners(this._rootElt, ["mousedown"], false);
+ if (AppConstants.platform === "macosx") {
+ // Must walk up to support views in sub-menus, like Bookmarks Toolbar menu.
+ for (let elt = this._viewElt.parentNode; elt; elt = elt.parentNode) {
+ if (elt.localName == "menubar") {
+ this._nativeView = true;
+ break;
+ }
+ }
+ }
+
+ this._onPopupShowing(popupShowingEvent);
+ }
+
+ _init() {
+ this._viewElt._placesView = this;
+ }
+
+ _removeChild(aChild) {
+ super._removeChild(aChild);
+ }
+
+ uninit() {
+ this._removeEventListeners(
+ this._rootElt,
+ ["popupshowing", "popuphidden"],
+ true
+ );
+ this._removeEventListeners(window, ["unload"], false);
+ this._removeEventListeners(this._rootElt, ["mousedown"], false);
+
+ super.uninit();
+ }
+
+ handleEvent(aEvent) {
+ switch (aEvent.type) {
+ case "unload":
+ this.uninit();
+ break;
+ case "popupshowing":
+ this._onPopupShowing(aEvent);
+ break;
+ case "popuphidden":
+ this._onPopupHidden(aEvent);
+ break;
+ case "mousedown":
+ this._onMouseDown(aEvent);
+ break;
+ }
+ }
+
+ _onPopupHidden(aEvent) {
+ // Avoid handling popuphidden of inner views.
+ let popup = aEvent.originalTarget;
+ let placesNode = popup._placesNode;
+ if (!placesNode || PlacesUIUtils.getViewForNode(popup) != this) {
+ return;
+ }
+
+ // UI performance: folder queries are cheap, keep the resultnode open
+ // so we don't rebuild its contents whenever the popup is reopened.
+ if (!PlacesUtils.nodeIsFolder(placesNode)) {
+ placesNode.containerOpen = false;
+ }
+
+ // The autoopened attribute is set for folders which have been
+ // automatically opened when dragged over. Turn off this attribute
+ // when the folder closes because it is no longer applicable.
+ popup.removeAttribute("autoopened");
+ popup.removeAttribute("dragstart");
+ }
+
+ // We don't have a facility for catch "mousedown" events on the native
+ // Mac menus because Mac doesn't expose it
+ _onMouseDown(aEvent) {
+ let target = aEvent.target;
+ if (target._placesNode?.uri) {
+ PlacesUIUtils.setupSpeculativeConnection(target._placesNode.uri, window);
+ }
+ }
+}
+
+// This is used from CustomizableWidgets.sys.mjs using a `window` reference,
+// so we have to expose this on the global.
+this.PlacesPanelview = class PlacesPanelview extends PlacesViewBase {
+ constructor(placeUrl, rootElt, viewElt) {
+ super(placeUrl, rootElt, viewElt);
+ this._viewElt._placesView = this;
+ // We're simulating a popup show, because a panelview may only be shown when
+ // its containing popup is already shown.
+ this._onPopupShowing({ originalTarget: this._rootElt });
+ this._addEventListeners(window, ["unload"]);
+ this._rootElt.setAttribute("context", "placesContext");
+ }
+
+ get events() {
+ if (this._events) {
+ return this._events;
+ }
+ return (this._events = [
+ "click",
+ "command",
+ "dragend",
+ "dragstart",
+ "ViewHiding",
+ "ViewShown",
+ ]);
+ }
+
+ handleEvent(event) {
+ switch (event.type) {
+ case "click":
+ // For middle clicks, fall through to the command handler.
+ if (event.button != 1) {
+ break;
+ }
+ // fall through
+ case "command":
+ this._onCommand(event);
+ break;
+ case "dragend":
+ this._onDragEnd(event);
+ break;
+ case "dragstart":
+ this._onDragStart(event);
+ break;
+ case "unload":
+ this.uninit(event);
+ break;
+ case "ViewHiding":
+ this._onPopupHidden(event);
+ break;
+ case "ViewShown":
+ this._onViewShown(event);
+ break;
+ }
+ }
+
+ _onCommand(event) {
+ event = getRootEvent(event);
+ let button = event.originalTarget;
+ if (!button._placesNode) {
+ return;
+ }
+
+ let modifKey =
+ AppConstants.platform === "macosx" ? event.metaKey : event.ctrlKey;
+ if (!PlacesUIUtils.openInTabClosesMenu && modifKey) {
+ // If 'Recent Bookmarks' in Bookmarks Panel.
+ if (button.parentNode.id == "panelMenu_bookmarksMenu") {
+ button.setAttribute("closemenu", "none");
+ }
+ } else {
+ button.removeAttribute("closemenu");
+ }
+ PlacesUIUtils.openNodeWithEvent(button._placesNode, event);
+ // Unlike left-click, middle-click requires manual menu closing.
+ if (
+ button.parentNode.id != "panelMenu_bookmarksMenu" ||
+ (event.type == "click" &&
+ event.button == 1 &&
+ PlacesUIUtils.openInTabClosesMenu)
+ ) {
+ this.panelMultiView.closest("panel").hidePopup();
+ }
+ }
+
+ _onDragEnd() {
+ this._draggedElt = null;
+ }
+
+ _onDragStart(event) {
+ let draggedElt = event.originalTarget;
+ if (draggedElt.parentNode != this._rootElt || !draggedElt._placesNode) {
+ return;
+ }
+
+ // Activate the view and cache the dragged element.
+ this._draggedElt = draggedElt._placesNode;
+ this._rootElt.focus();
+
+ this._controller.setDataTransfer(event);
+ event.stopPropagation();
+ }
+
+ uninit(event) {
+ this._removeEventListeners(this.panelMultiView, this.events);
+ this._removeEventListeners(window, ["unload"]);
+ delete this.panelMultiView;
+ super.uninit(event);
+ }
+
+ _createDOMNodeForPlacesNode(placesNode) {
+ this._domNodes.delete(placesNode);
+
+ let element;
+ let type = placesNode.type;
+ if (type == Ci.nsINavHistoryResultNode.RESULT_TYPE_SEPARATOR) {
+ element = document.createXULElement("toolbarseparator");
+ } else {
+ if (type != Ci.nsINavHistoryResultNode.RESULT_TYPE_URI) {
+ throw new Error("Unexpected node");
+ }
+
+ element = document.createXULElement("toolbarbutton");
+ element.classList.add(
+ "subviewbutton",
+ "subviewbutton-iconic",
+ "bookmark-item"
+ );
+ element.setAttribute(
+ "scheme",
+ PlacesUIUtils.guessUrlSchemeForUI(placesNode.uri)
+ );
+ element.setAttribute("label", PlacesUIUtils.getBestTitle(placesNode));
+
+ let icon = placesNode.icon;
+ if (icon) {
+ element.setAttribute("image", icon);
+ }
+ }
+
+ element._placesNode = placesNode;
+ if (!this._domNodes.has(placesNode)) {
+ this._domNodes.set(placesNode, element);
+ }
+
+ return element;
+ }
+
+ _setEmptyPopupStatus(panelview, empty = false) {
+ if (!panelview._emptyMenuitem) {
+ panelview._emptyMenuitem = document.createXULElement("toolbarbutton");
+ panelview._emptyMenuitem.setAttribute("disabled", true);
+ panelview._emptyMenuitem.className = "subviewbutton";
+ document.l10n.setAttributes(
+ panelview._emptyMenuitem,
+ "places-empty-bookmarks-folder"
+ );
+ }
+
+ if (empty) {
+ panelview.setAttribute("emptyplacesresult", "true");
+ // Don't add the menuitem if there is static content.
+ // We also support external usage for custom crafted panels - which'll have
+ // no markers present.
+ if (
+ !panelview._startMarker ||
+ (!panelview._startMarker.previousElementSibling &&
+ !panelview._endMarker.nextElementSibling)
+ ) {
+ panelview.insertBefore(panelview._emptyMenuitem, panelview._endMarker);
+ }
+ } else {
+ panelview.removeAttribute("emptyplacesresult");
+ try {
+ panelview.removeChild(panelview._emptyMenuitem);
+ } catch (ex) {}
+ }
+ }
+
+ _isPopupOpen() {
+ return PanelView.forNode(this._viewElt).active;
+ }
+
+ _onPopupHidden(event) {
+ let panelview = event.originalTarget;
+ let placesNode = panelview._placesNode;
+ // Avoid handling ViewHiding of inner views
+ if (
+ placesNode &&
+ PlacesUIUtils.getViewForNode(panelview) == this &&
+ // UI performance: folder queries are cheap, keep the resultnode open
+ // so we don't rebuild its contents whenever the popup is reopened.
+ !PlacesUtils.nodeIsFolder(placesNode)
+ ) {
+ placesNode.containerOpen = false;
+ }
+ }
+
+ _onPopupShowing(event) {
+ // If the event came from the root element, this is the first time
+ // we ever get here.
+ if (event.originalTarget == this._rootElt) {
+ // Start listening for events from all panels inside the panelmultiview.
+ this.panelMultiView = this._viewElt.panelMultiView;
+ this._addEventListeners(this.panelMultiView, this.events);
+ }
+ super._onPopupShowing(event);
+ }
+
+ _onViewShown(event) {
+ if (event.originalTarget != this._viewElt) {
+ return;
+ }
+
+ // Because PanelMultiView reparents the panelview internally, the controller
+ // may get lost. In that case we'll append it again, because we certainly
+ // need it later!
+ if (!this.controllers.getControllerCount() && this._controller) {
+ this.controllers.appendController(this._controller);
+ }
+ }
+};