places-menupopup.js

// ==UserScript==
// @name           Restore Places Menupopup Arrows
// @version        1.3.3
// @author         aminomancer
// @homepageURL    https://github.com/aminomancer/uc.css.js
// @description    Necessary for use with restorePreProtonArrowpanels.uc.js.
// See the script's readme section for info.
// @license        This Source Code Form is subject to the terms of the Creative Commons Attribution-NonCommercial-ShareAlike International License, v. 4.0. If a copy of the CC BY-NC-SA 4.0 was not distributed with this file, You can obtain one at http://creativecommons.org/licenses/by-nc-sa/4.0/ or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.
// ==/UserScript==

"use strict";

/* eslint-env mozilla/browser-window */
/* import-globals-from controller.js */

// On Wayland when D&D source popup is closed,
// D&D operation is canceled by window manager.
function closingPopupEndsDrag(popup) {
  if (!popup.isWaylandPopup) {
    return false;
  }
  if (popup.isWaylandDragSource) {
    return true;
  }
  for (let childPopup of popup.querySelectorAll("menu > menupopup")) {
    if (childPopup.isWaylandDragSource) {
      return true;
    }
  }
  return false;
}

// This is loaded into all XUL windows. Wrap in a block to prevent
// leaking to window scope.
{
  /**
   * This class handles the custom element for the places popup menu.
   */
  class MozPlacesPopup extends MozElements.MozMenuPopup {
    constructor() {
      super();

      const event_names = [
        "DOMMenuItemActive",
        "DOMMenuItemInactive",
        "dragstart",
        "drop",
        "dragover",
        "dragleave",
        "dragend",
      ];
      for (let event_name of event_names) {
        this.addEventListener(event_name, this);
      }
    }

    get markup() {
      return `
      <html:link rel="stylesheet" href="chrome://global/skin/global.css" />
      <hbox part="drop-indicator-container">
        <vbox part="drop-indicator-bar" hidden="true">
          <image part="drop-indicator"/>
        </vbox>
        <arrowscrollbox class="menupopup-arrowscrollbox" flex="1" orient="vertical"
                        exportparts="scrollbox: arrowscrollbox-scrollbox"
                        smoothscroll="false" part="arrowscrollbox content">
          <html:slot/>
        </arrowscrollbox>
      </hbox>
    `;
    }

    connectedCallback() {
      if (this.delayConnectedCallback()) {
        return;
      }

      /**
       * Sub-menus should be opened when the mouse drags over them, and closed
       * when the mouse drags off.  The overFolder object manages opening and
       * closing of folders when the mouse hovers.
       */
      this._overFolder = {
        _self: this,
        _folder: {
          elt: null,
          openTimer: null,
          hoverTime: 350,
          closeTimer: null,
        },
        _closeMenuTimer: null,

        get elt() {
          return this._folder.elt;
        },
        set elt(val) {
          this._folder.elt = val;
        },

        get openTimer() {
          return this._folder.openTimer;
        },
        set openTimer(val) {
          this._folder.openTimer = val;
        },

        get hoverTime() {
          return this._folder.hoverTime;
        },
        set hoverTime(val) {
          this._folder.hoverTime = val;
        },

        get closeTimer() {
          return this._folder.closeTimer;
        },
        set closeTimer(val) {
          this._folder.closeTimer = val;
        },

        get closeMenuTimer() {
          return this._closeMenuTimer;
        },
        set closeMenuTimer(val) {
          this._closeMenuTimer = val;
        },

        setTimer: function OF__setTimer(aTime) {
          let timer = Cc["@mozilla.org/timer;1"].createInstance(Ci.nsITimer);
          timer.initWithCallback(this, aTime, timer.TYPE_ONE_SHOT);
          return timer;
        },

        notify: function OF__notify(aTimer) {
          // Function to process all timer notifications.

          if (aTimer == this._folder.openTimer) {
            // Timer to open a submenu that's being dragged over.
            this._folder.elt.lastElementChild.setAttribute(
              "autoopened",
              "true"
            );
            this._folder.elt.lastElementChild.openPopup();
            this._folder.openTimer = null;
          } else if (aTimer == this._folder.closeTimer) {
            // Timer to close a submenu that's been dragged off of.
            // Only close the submenu if the mouse isn't being dragged over any
            // of its child menus.
            let draggingOverChild =
              PlacesControllerDragHelper.draggingOverChildNode(
                this._folder.elt
              );
            if (draggingOverChild) {
              this._folder.elt = null;
            }
            this.clear();

            // Close any parent folders which aren't being dragged over.
            // (This is necessary because of the above code that keeps a folder
            // open while its children are being dragged over.)
            if (!draggingOverChild && !closingPopupEndsDrag(this._self)) {
              this.closeParentMenus();
            }
          } else if (aTimer == this.closeMenuTimer) {
            // Timer to close this menu after the drag exit.
            let popup = this._self;
            // if we are no more dragging we can leave the menu open to allow
            // for better D&D bookmark organization
            if (
              PlacesControllerDragHelper.getSession() &&
              !PlacesControllerDragHelper.draggingOverChildNode(
                popup.parentNode
              )
            ) {
              if (!closingPopupEndsDrag(popup)) {
                popup.hidePopup();
                // Close any parent menus that aren't being dragged over;
                // otherwise they'll stay open because they couldn't close
                // while this menu was being dragged over.
                this.closeParentMenus();
              } else if (popup.isWaylandDragSource) {
                // Postpone popup hide until drag end on Wayland.
                this._closeMenuTimer = this.setTimer(this.hoverTime);
              }
            }
          }
        },

        //  Helper function to close all parent menus of this menu,
        //  as long as none of the parent's children are currently being
        //  dragged over.
        closeParentMenus: function OF__closeParentMenus() {
          let popup = this._self;
          let parent = popup.parentNode;
          while (parent) {
            if (parent.localName == "menupopup" && parent._placesNode) {
              if (
                PlacesControllerDragHelper.draggingOverChildNode(
                  parent.parentNode
                )
              ) {
                break;
              }
              parent.hidePopup();
            }
            parent = parent.parentNode;
          }
        },

        //  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.
        clear: function OF__clear() {
          if (this._folder.elt && this._folder.elt.lastElementChild) {
            let popup = this._folder.elt.lastElementChild;
            if (
              !popup.hasAttribute("dragover") &&
              !closingPopupEndsDrag(popup)
            ) {
              popup.hidePopup();
            }
            // remove menuactive style
            this._folder.elt.removeAttribute("_moz-menuactive");
            this._folder.elt = null;
          }
          if (this._folder.openTimer) {
            this._folder.openTimer.cancel();
            this._folder.openTimer = null;
          }
          if (this._folder.closeTimer) {
            this._folder.closeTimer.cancel();
            this._folder.closeTimer = null;
          }
        },
      };
    }

    get _indicatorBar() {
      if (!this.__indicatorBar) {
        this.__indicatorBar = this.shadowRoot.querySelector(
          "[part=drop-indicator-bar]"
        );
      }
      return this.__indicatorBar;
    }

    /**
     * This is the view that manages the popup.
     *
     * @see {@link PlacesUIUtils.getViewForNode}
     * @returns {DOMNode}
     */
    get _rootView() {
      if (!this.__rootView) {
        this.__rootView = PlacesUIUtils.getViewForNode(this);
      }
      return this.__rootView;
    }

    /**
     * Check if we should hide the drop indicator for the target
     *
     * @param {object} aEvent
     *   The event associated with the drop.
     * @returns {boolean}
     */
    _hideDropIndicator(aEvent) {
      let target = aEvent.target;

      // Don't draw the drop indicator outside of markers or if current
      // node is not a Places node.
      let betweenMarkers =
        this._startMarker.compareDocumentPosition(target) &
          Node.DOCUMENT_POSITION_FOLLOWING &&
        this._endMarker.compareDocumentPosition(target) &
          Node.DOCUMENT_POSITION_PRECEDING;

      // Hide the dropmarker if current node is not a Places node.
      return !(target && target._placesNode && betweenMarkers);
    }

    /**
     * This function returns information about where to drop when
     * dragging over this popup insertion point
     *
     * @param {object} aEvent
     *   The event associated with the drop.
     * @returns {object|null}
     *   The associated drop point information.
     */
    _getDropPoint(aEvent) {
      // Can't drop if the menu isn't a folder
      let resultNode = this._placesNode;

      if (
        !PlacesUtils.nodeIsFolder(resultNode) ||
        this._rootView.controller.disallowInsertion(resultNode)
      ) {
        return null;
      }

      let dropPoint = { ip: null, folderElt: null };

      // The element we are dragging over
      let elt = aEvent.target;
      if (elt.localName == "menupopup") {
        elt = elt.parentNode;
      }

      let eventY = aEvent.clientY;
      let { y: eltY, height: eltHeight } = elt.getBoundingClientRect();

      if (!elt._placesNode) {
        // If we are dragging over a non places node drop at the end.
        dropPoint.ip = new PlacesInsertionPoint({
          parentGuid: PlacesUtils.getConcreteItemGuid(resultNode),
        });
        // We can set folderElt if we are dropping over a static menu that
        // has an internal placespopup.
        let isMenu =
          elt.localName == "menu" ||
          (elt.localName == "toolbarbutton" &&
            elt.getAttribute("type") == "menu");
        if (
          isMenu &&
          elt.lastElementChild &&
          elt.lastElementChild.hasAttribute("placespopup")
        ) {
          dropPoint.folderElt = elt;
        }
        return dropPoint;
      }

      let tagName = PlacesUtils.nodeIsTagQuery(elt._placesNode)
        ? elt._placesNode.title
        : null;
      if (
        (PlacesUtils.nodeIsFolder(elt._placesNode) &&
          !PlacesUIUtils.isFolderReadOnly(elt._placesNode)) ||
        PlacesUtils.nodeIsTagQuery(elt._placesNode)
      ) {
        // This is a folder or a tag container.
        if (eventY - eltY < eltHeight * 0.2) {
          // If mouse is in the top part of the element, drop above folder.
          dropPoint.ip = new PlacesInsertionPoint({
            parentGuid: PlacesUtils.getConcreteItemGuid(resultNode),
            orientation: Ci.nsITreeView.DROP_BEFORE,
            tagName,
            dropNearNode: elt._placesNode,
          });
          return dropPoint;
        } else if (eventY - eltY < eltHeight * 0.8) {
          // If mouse is in the middle of the element, drop inside folder.
          dropPoint.ip = new PlacesInsertionPoint({
            parentGuid: PlacesUtils.getConcreteItemGuid(elt._placesNode),
            tagName,
          });
          dropPoint.folderElt = elt;
          return dropPoint;
        }
      } else if (eventY - eltY <= eltHeight / 2) {
        // This is a non-folder node or a readonly folder.
        // If the mouse is above the middle, drop above this item.
        dropPoint.ip = new PlacesInsertionPoint({
          parentGuid: PlacesUtils.getConcreteItemGuid(resultNode),
          orientation: Ci.nsITreeView.DROP_BEFORE,
          tagName,
          dropNearNode: elt._placesNode,
        });
        return dropPoint;
      }

      // Drop below the item.
      dropPoint.ip = new PlacesInsertionPoint({
        parentGuid: PlacesUtils.getConcreteItemGuid(resultNode),
        orientation: Ci.nsITreeView.DROP_AFTER,
        tagName,
        dropNearNode: elt._placesNode,
      });
      return dropPoint;
    }

    _cleanupDragDetails() {
      // Called on dragend and drop.
      PlacesControllerDragHelper.currentDropTarget = null;
      this._rootView._draggedElt = null;
      this.removeAttribute("dragover");
      this.removeAttribute("dragstart");
      this._indicatorBar.hidden = true;
    }

    on_DOMMenuItemActive(event) {
      if (super.on_DOMMenuItemActive) {
        super.on_DOMMenuItemActive(event);
      }

      let elt = event.target;
      if (elt.parentNode != this) {
        return;
      }

      if (window.XULBrowserWindow) {
        let placesNode = elt._placesNode;

        let linkURI;
        if (placesNode && PlacesUtils.nodeIsURI(placesNode)) {
          linkURI = placesNode.uri;
        } else if (elt.hasAttribute("targetURI")) {
          linkURI = elt.getAttribute("targetURI");
        }

        if (linkURI) {
          window.XULBrowserWindow.setOverLink(linkURI);
        }
      }
    }

    on_DOMMenuItemInactive(event) {
      let elt = event.target;
      if (elt.parentNode != this) {
        return;
      }

      if (window.XULBrowserWindow) {
        window.XULBrowserWindow.setOverLink("");
      }
    }

    on_dragstart(event) {
      let elt = event.target;
      if (!elt._placesNode) {
        return;
      }

      let draggedElt = elt._placesNode;

      // Force a copy action if parent node is a query or we are dragging a
      // not-removable node.
      if (!this._rootView.controller.canMoveNode(draggedElt)) {
        event.dataTransfer.effectAllowed = "copyLink";
      }

      // Activate the view and cache the dragged element.
      this._rootView._draggedElt = draggedElt;
      this._rootView.controller.setDataTransfer(event);
      this.setAttribute("dragstart", "true");
      event.stopPropagation();
    }

    on_drop(event) {
      PlacesControllerDragHelper.currentDropTarget = event.target;

      let dropPoint = this._getDropPoint(event);
      if (dropPoint && dropPoint.ip) {
        PlacesControllerDragHelper.onDrop(
          dropPoint.ip,
          event.dataTransfer
        ).catch(() => {});
        event.preventDefault();
      }

      this._cleanupDragDetails();
      event.stopPropagation();
    }

    on_dragover(event) {
      PlacesControllerDragHelper.currentDropTarget = event.target;
      let dt = event.dataTransfer;

      let dropPoint = this._getDropPoint(event);
      if (
        !dropPoint ||
        !dropPoint.ip ||
        !PlacesControllerDragHelper.canDrop(dropPoint.ip, dt)
      ) {
        this._indicatorBar.hidden = true;
        event.stopPropagation();
        return;
      }

      // Mark this popup as being dragged over.
      this.setAttribute("dragover", "true");

      if (dropPoint.folderElt) {
        // We are dragging over a folder.
        // _overFolder should take the care of opening it on a timer.
        if (
          this._overFolder.elt &&
          this._overFolder.elt != dropPoint.folderElt
        ) {
          // We are dragging over a new folder, let's clear old values
          this._overFolder.clear();
        }
        if (!this._overFolder.elt) {
          this._overFolder.elt = dropPoint.folderElt;
          // Create the timer to open this folder.
          this._overFolder.openTimer = this._overFolder.setTimer(
            this._overFolder.hoverTime
          );
        }
        // Since we are dropping into a folder set the corresponding style.
        dropPoint.folderElt.setAttribute("_moz-menuactive", true);
      } else {
        // We are not dragging over a folder.
        // Clear out old _overFolder information.
        this._overFolder.clear();
      }

      // Autoscroll the popup strip if we drag over the scroll buttons.
      let scrollDir = 0;
      if (event.originalTarget == this.scrollBox._scrollButtonUp) {
        scrollDir = -1;
      } else if (event.originalTarget == this.scrollBox._scrollButtonDown) {
        scrollDir = 1;
      }
      if (scrollDir != 0) {
        this.scrollBox.scrollByIndex(scrollDir, true);
      }

      // Check if we should hide the drop indicator for this target.
      if (dropPoint.folderElt || this._hideDropIndicator(event)) {
        this._indicatorBar.hidden = true;
        event.preventDefault();
        event.stopPropagation();
        return;
      }

      // We should display the drop indicator relative to the arrowscrollbox.
      let scrollRect = this.scrollBox.getBoundingClientRect();
      let newMarginTop = 0;
      if (scrollDir == 0) {
        let elt = this.firstElementChild;
        for (; elt; elt = elt.nextElementSibling) {
          let height = elt.getBoundingClientRect().height;
          if (height == 0) {
            continue;
          }
          if (event.screenY <= elt.screenY + height / 2) {
            break;
          }
        }
        newMarginTop = elt
          ? elt.screenY - this.scrollBox.screenY
          : scrollRect.height;
      } else if (scrollDir == 1) {
        newMarginTop = scrollRect.height;
      }

      // Set the new marginTop based on arrowscrollbox.
      newMarginTop +=
        scrollRect.y - this._indicatorBar.parentNode.getBoundingClientRect().y;
      this._indicatorBar.firstElementChild.style.marginTop = `${newMarginTop}px`;
      this._indicatorBar.hidden = false;

      event.preventDefault();
      event.stopPropagation();
    }

    on_dragleave(event) {
      PlacesControllerDragHelper.currentDropTarget = null;
      this.removeAttribute("dragover");

      // If we have not moved to a valid new target clear the drop indicator
      // this happens when moving out of the popup.
      let target = event.relatedTarget;
      if (!target || !this.contains(target)) {
        this._indicatorBar.hidden = true;
      }

      // Close any folder being hovered over
      if (this._overFolder.elt) {
        this._overFolder.closeTimer = this._overFolder.setTimer(
          this._overFolder.hoverTime
        );
      }

      // The autoopened attribute is set when this folder was automatically
      // opened after the user dragged over it.  If this attribute is set,
      // auto-close the folder on drag exit.
      // We should also try to close this popup if the drag has started
      // from here, the timer will check if we are dragging over a child.
      if (this.hasAttribute("autoopened") || this.hasAttribute("dragstart")) {
        this._overFolder.closeMenuTimer = this._overFolder.setTimer(
          this._overFolder.hoverTime
        );
      }

      event.stopPropagation();
    }

    on_dragend(event) {
      this._cleanupDragDetails();
    }
  }

  customElements.define("places-popup", MozPlacesPopup, {
    extends: "menupopup",
  });

  /**
   * Custom element for the places popup arrow.
   */
  class MozPlacesPopupArrow extends MozPlacesPopup {
    get markup() {
      return `<html:link rel="stylesheet" href="chrome://global/skin/global.css" />
              <vbox class="panel-arrowcontainer" part="arrowcontainer" flex="1">
                <box class="panel-arrowbox" part="arrowbox">
                  <image class="panel-arrow" part="arrow" />
                </box>
                <box class="panel-arrowcontent" part="arrowcontent" flex="1">
                  <vbox part="drop-indicator-bar" hidden="true">
                    <image part="drop-indicator" />
                  </vbox>
                  <arrowscrollbox
                    class="menupopup-arrowscrollbox"
                    flex="1"
                    orient="vertical"
                    smoothscroll="false"
                    part="arrowscrollbox content"
                  >
                    <html:slot />
                  </arrowscrollbox>
                </box>
              </vbox>`;
    }

    constructor() {
      super();

      this._originalOpenPopup = this.openPopup;
      this.openPopup = function (aAnchorElement, aOptions, ...args) {
        let options = aOptions;
        if (options && this.getAttribute("type") == "arrow") {
          if (typeof options === "string") {
            options = { position: options };
          }
          if (typeof options === "object" && options.position) {
            options.position = options.position?.replace(
              /^(bottom|top)(right|left)/,
              "$1center"
            );
          }
        }
        this._originalOpenPopup(aAnchorElement, options, ...args);
      };

      const event_names = [
        "popupshowing",
        "popuppositioned",
        "popupshown",
        "popuphiding",
        "popuphidden",
      ];
      for (let event_name of event_names) {
        this.addEventListener(event_name, this);
      }
    }

    connectedCallback() {
      if (this.delayConnectedCallback()) {
        return;
      }

      super.connectedCallback();
      this.initializeAttributeInheritance();

      this.setAttribute("type", "arrow");
      this.setAttribute("flip", "both");
      this.setAttribute("side", "top");
      this.setAttribute("position", "bottomcenter topright");
    }

    _setSideAttribute(event) {
      let container = this.shadowRoot.querySelector(".panel-arrowcontainer");
      let arrow = this.shadowRoot.querySelector(".panel-arrow");
      if (arrow) {
        this.shadowRoot
          .querySelector(".panel-arrowbox")
          ?.style.removeProperty("transform");
        if (!this.anchorNode) {
          arrow.hidden = true;
          return;
        }
        arrow.hidden = false;
      } else if (!this.anchorNode) {
        return;
      }

      let arrowbox = this.shadowRoot.querySelector(".panel-arrowbox");

      let position = event.alignmentPosition;
      let offset = event.alignmentOffset;

      // if this panel has a "sliding" arrow, we may have previously set margins...
      arrowbox.style.removeProperty("transform");
      if (position.indexOf("start_") == 0 || position.indexOf("end_") == 0) {
        container.setAttribute("orient", "horizontal");
        arrowbox.setAttribute("orient", "vertical");
        if (position.indexOf("_after") > 0) {
          arrowbox.setAttribute("pack", "end");
        } else {
          arrowbox.setAttribute("pack", "start");
        }
        arrowbox.style.transform = `translate(0, ${-offset}px)`;

        // The assigned side stays the same regardless of direction.
        let isRTL = this.matches(":-moz-locale-dir(rtl)");

        if (position.indexOf("start_") == 0) {
          container.style.MozBoxDirection = "reverse";
          this.setAttribute("side", isRTL ? "left" : "right");
        } else {
          container.style.removeProperty("-moz-box-direction");
          this.setAttribute("side", isRTL ? "right" : "left");
        }
      } else if (
        position.indexOf("before_") == 0 ||
        position.indexOf("after_") == 0
      ) {
        container.removeAttribute("orient");
        arrowbox.removeAttribute("orient");
        if (position.indexOf("_end") > 0) {
          arrowbox.setAttribute("pack", "end");
        } else {
          arrowbox.setAttribute("pack", "start");
        }
        arrowbox.style.transform = `translate(${-offset}px, 0)`;

        if (position.indexOf("before_") == 0) {
          container.style.MozBoxDirection = "reverse";
          this.setAttribute("side", "bottom");
        } else {
          container.style.removeProperty("-moz-box-direction");
          this.setAttribute("side", "top");
        }
      }

      arrow.hidden = false;
    }

    on_popupshowing(event) {
      if (event.target == this) {
        this.setAttribute("animate", "open");
        this.style.pointerEvents = "none";
      }
    }

    on_popuppositioned(event) {
      if (event.target == this) {
        this._setSideAttribute(event);
      }
    }

    on_popupshown(event) {
      if (event.target != this) {
        return;
      }

      this.setAttribute("panelopen", "true");
      this.style.removeProperty("pointer-events");
    }

    on_popuphiding(event) {
      if (event.target == this) {
        this.setAttribute("animate", "cancel");
      }
    }

    on_popuphidden(event) {
      if (event.target == this) {
        this.removeAttribute("panelopen");
        this.removeAttribute("animate");
      }
    }
  }

  customElements.define("places-popup-arrow", MozPlacesPopupArrow, {
    extends: "menupopup",
  });
}