Source code
Revision control
Copy as Markdown
Other Tools
/* 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
"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) {
var 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.
var 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.
var popup = this._self;
// if we are no more dragging we can leave the menu open to allow
// for better D&D bookmark organization
var hidePopup =
PlacesControllerDragHelper.getSession() &&
!PlacesControllerDragHelper.draggingOverChildNode(
popup.parentNode
);
if (hidePopup) {
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() {
var popup = this._self;
var 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) {
var 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.nodeIsFolderOrShortcut(resultNode) ||
this._rootView.controller.disallowInsertion(resultNode)
) {
return null;
}
var 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.nodeIsFolderOrShortcut(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;
var 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(console.error);
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() {
this._cleanupDragDetails();
}
uninit() {
this.__rootView = null;
}
}
customElements.define("places-popup", MozPlacesPopup, {
extends: "menupopup",
});
/**
* Custom element for the places popup arrow.
*/
class MozPlacesPopupArrow extends MozPlacesPopup {
constructor() {
super();
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("flip", "both");
this.setAttribute("side", "top");
this.setAttribute("position", "bottomright topright");
}
_setSideAttribute(event) {
if (!this.anchorNode) {
return;
}
var position = event.alignmentPosition;
if (position.indexOf("start_") == 0 || position.indexOf("end_") == 0) {
// The assigned side stays the same regardless of direction.
let isRTL = this.matches(":-moz-locale-dir(rtl)");
if (position.indexOf("start_") == 0) {
this.setAttribute("side", isRTL ? "left" : "right");
} else {
this.setAttribute("side", isRTL ? "right" : "left");
}
} else if (
position.indexOf("before_") == 0 ||
position.indexOf("after_") == 0
) {
if (position.indexOf("before_") == 0) {
this.setAttribute("side", "bottom");
} else {
this.setAttribute("side", "top");
}
}
}
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",
});
}