Skip to content

Commit

Permalink
update the vertical tabs scripts.
Browse files Browse the repository at this point in the history 
avoid drag behavior if you try to drag a row by a secondary button.
at the same time, avoid activating secondary buttons
if they're clicked while shift/ctrl is pressed.
  • Loading branch information
@aminomancer
aminomancer committed Jul 3, 2022
1 parent a5e9350 commit bb67a43
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 27 deletions.
45 changes: 35 additions & 10 deletions JS/allTabsMenuExpansionPack.uc.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// ==UserScript==
// @name All Tabs Menu Expansion Pack
// @version 2.0.8
// @version 2.0.9
// @author aminomancer
// @homepage https://github.com/aminomancer
// @description Next to the "new tab" button in Firefox there's a V-shaped button that opens a
Expand Down Expand Up @@ -502,11 +502,13 @@
});
if (this.className) row.classList.add(this.className);
row.tab = tab;
row.mOverSecondaryButton = false;
row.addEventListener("command", this);
row.addEventListener("mousedown", this);
row.addEventListener("mouseup", this);
row.addEventListener("click", this);
row.addEventListener("mouseover", this);
row.addEventListener("mouseout", this);
this.tabToElement.set(tab, row);

let button = row.appendChild(
Expand Down Expand Up @@ -607,7 +609,10 @@
this._onCommand(e, tab);
break;
case "mouseover":
this._warmupRowTab(e, tab);
this._onMouseOver(e, tab);
break;
case "mouseout":
this._onMouseOut(e);
break;
case "TabPinned":
case "TabUnpinned":
Expand Down Expand Up @@ -674,14 +679,12 @@
this.gBrowser.clearMultiSelectedTabs();
}
this.gBrowser.addRangeToMultiSelectedTabs(lastSelectedTab, tab);
e.preventDefault();
} else if (accelKey) {
if (tab.multiselected) this.gBrowser.removeFromMultiSelectedTabs(tab);
else if (tab != this.gBrowser.selectedTab) {
this.gBrowser.addToMultiSelectedTabs(tab);
this.gBrowser.lastMultiSelectedTab = tab;
}
e.preventDefault();
} else {
if (!tab.selected && tab.multiselected) this.gBrowser.lockClearMultiSelectionOnce();
if (
Expand All @@ -696,6 +699,10 @@
else this.gBrowser.tabContainer._handleTabSelect();
}
}
if (e.target.closest(".all-tabs-item")?.mOverSecondaryButton) {
e.stopPropagation();
e.preventDefault();
}
};
tabsPanel._onMouseUp = function (e, tab) {
if (e.button === 2) return;
Expand All @@ -708,16 +715,24 @@
}
if (e.target.classList.contains("all-tabs-secondary-button")) return;
if (tab.hidden) return this._onCommand(e, tab);
let accelKey = AppConstants.platform == "macosx" ? e.metaKey : e.ctrlKey;
if (e.shiftKey || accelKey) return;
if (e.shiftKey || (AppConstants.platform == "macosx" ? e.metaKey : e.ctrlKey)) {
return;
}
delete tab.noCanvas;
this.gBrowser.unlockClearMultiSelection();
this.gBrowser.clearMultiSelectedTabs();
PanelMultiView.hidePopup(PanelMultiView.forNode(this.view.panelMultiView)._panel);
};
tabsPanel._onClick = function (e, tab) {
if (e.button !== 0 || e.target.classList.contains("all-tabs-secondary-button")) return;
e.preventDefault();
if (e.button === 0) {
if (
e.target.classList.contains("all-tabs-secondary-button") &&
!e.shiftKey &&
!(AppConstants.platform == "macosx" ? e.metaKey : e.ctrlKey)
)
return;
e.preventDefault();
}
};
tabsPanel._onCommand = function (e, tab) {
if (e.target.hasAttribute("toggle-mute")) {
Expand Down Expand Up @@ -885,13 +900,23 @@
tabsPanel._onTabMultiSelect = function () {
for (let item of this.rows) item.toggleAttribute("multiselected", !!item.tab.multiselected);
};
tabsPanel._warmupRowTab = function (e, tab) {
tabsPanel._onMouseOver = function (e, tab) {
let row = e.target.closest(".all-tabs-item");
SessionStore.speculativeConnectOnTabHover(tab);
if (row.querySelector("[close-button]").matches(":hover"))
if (e.target.classList.contains("all-tabs-secondary-button")) {
row.mOverSecondaryButton = true;
}
if (e.target.hasAttribute("close-button")) {
tab = gBrowser._findTabToBlurTo(tab);
}
gBrowser.warmupTab(tab);
};
tabsPanel._onMouseOut = function (e) {
let row = e.target.closest(".all-tabs-item");
if (e.target.classList.contains("all-tabs-secondary-button")) {
row.mOverSecondaryButton = false;
}
};
tabsPanel.view.addEventListener("ViewShowing", l10nIfNeeded, { once: true });
["dragstart", "dragleave", "dragover", "drop", "dragend"].forEach(ev =>
tabsPanel.containerNode.addEventListener(ev, tabsPanel)
Expand Down
65 changes: 48 additions & 17 deletions JS/verticalTabsPane.uc.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// ==UserScript==
// @name Vertical Tabs Pane
// @version 1.6.3
// @version 1.6.4
// @author aminomancer
// @homepage https://github.com/aminomancer/uc.css.js
// @description Create a vertical pane across from the sidebar that functions
Expand Down Expand Up @@ -567,7 +567,10 @@
this._onCommand(e, tab);
break;
case "mouseover":
this._warmupRowTab(e, tab);
this._onMouseOver(e, tab);
break;
case "mouseout":
this._onMouseOut(e);
break;
case "mouseenter":
this._onMouseEnter(e);
Expand Down Expand Up @@ -898,11 +901,13 @@
});
if (this.className) row.classList.add(this.className);
row.tab = tab;
row.mOverSecondaryButton = false;
row.addEventListener("command", this);
row.addEventListener("mousedown", this);
row.addEventListener("mouseup", this);
row.addEventListener("click", this);
row.addEventListener("mouseover", this);
row.addEventListener("mouseout", this);
this.tabToElement.set(tab, row);

// main button
Expand Down Expand Up @@ -1189,14 +1194,12 @@
gBrowser.clearMultiSelectedTabs();
}
gBrowser.addRangeToMultiSelectedTabs(lastSelectedTab, tab);
e.preventDefault();
} else if (accelKey) {
if (tab.multiselected) gBrowser.removeFromMultiSelectedTabs(tab);
else if (tab != gBrowser.selectedTab) {
gBrowser.addToMultiSelectedTabs(tab);
gBrowser.lastMultiSelectedTab = tab;
}
e.preventDefault();
} else {
if (!tab.selected && tab.multiselected) gBrowser.lockClearMultiSelectionOnce();
if (
Expand All @@ -1211,6 +1214,10 @@
else gBrowser.tabContainer._handleTabSelect();
}
}
if (e.target.closest(".all-tabs-item")?.mOverSecondaryButton) {
e.stopPropagation();
e.preventDefault();
}
}
// when the mouse is released, clear the multiselection and perform some
// drag/drop cleanup. if middle mouse button was clicked, then close the
Expand All @@ -1225,9 +1232,13 @@
});
return;
}
let accelKey = AppConstants.platform == "macosx" ? e.metaKey : e.ctrlKey;
if (e.shiftKey || accelKey || e.target.classList.contains("all-tabs-secondary-button"))
if (
e.shiftKey ||
(AppConstants.platform == "macosx" ? e.metaKey : e.ctrlKey) ||
e.target.classList.contains("all-tabs-secondary-button")
) {
return;
}
delete tab.noCanvas;
gBrowser.unlockClearMultiSelection();
gBrowser.clearMultiSelectedTabs();
Expand Down Expand Up @@ -1294,8 +1305,15 @@
// "click" events work kind of like "mouseup" events, but in this case we're
// only using this to prevent the click event yielding a command event.
_onClick(e) {
if (e.button !== 0 || e.target.classList.contains("all-tabs-secondary-button")) return;
e.preventDefault();
if (e.button === 0) {
if (
e.target.classList.contains("all-tabs-secondary-button") &&
!e.shiftKey &&
!(AppConstants.platform == "macosx" ? e.metaKey : e.ctrlKey)
)
return;
e.preventDefault();
}
}
// "command" events happen on click or on spacebar/enter. we want the
// buttons to be keyboard accessible too. so this is how the mute button and
Expand Down Expand Up @@ -1492,19 +1510,32 @@
? item.setAttribute("multiselected", true)
: item.removeAttribute("multiselected");
}
// invoked when mousing over a row. we want to speculatively warm up a tab
// when the user hovers it since it's possible they will click it. there's a
// cache for this with a maximum limit, so if the user mouses over 3 tabs
// without clicking them, then a 4th, it will clear the 1st to make room.
// this is the same thing the built-in tab bar does so we're just mimicking
// vanilla behavior here. this can be disabled with
// browser.tabs.remote.warmup.enabled
_warmupRowTab(e, tab) {
// invoked when mousing over a row. we use this to set a flag
// mOverSecondaryButton on the row, which our drag handlers reference. we
// want to speculatively warm up a tab when the user hovers it since it's
// possible they will click it. there's a cache for this with a maximum
// limit, so if the user mouses over 3 tabs without clicking them, then a
// 4th, it will clear the 1st to make room. this is the same thing the
// built-in tab bar does so we're just mimicking vanilla behavior here. this
// can be disabled with browser.tabs.remote.warmup.enabled
_onMouseOver(e, tab) {
let row = this._findRow(e.target);
SessionStore.speculativeConnectOnTabHover(tab);
if (row.closeButton.matches(":hover")) tab = gBrowser._findTabToBlurTo(tab);
if (e.target.classList.contains("all-tabs-secondary-button")) {
row.mOverSecondaryButton = true;
}
if (e.target.hasAttribute("close-button")) {
tab = gBrowser._findTabToBlurTo(tab);
}
gBrowser.warmupTab(tab);
}
// invoked when mousing out of an element.
_onMouseOut (e) {
let row = e.target.closest(".all-tabs-item");
if (e.target.classList.contains("all-tabs-secondary-button")) {
row.mOverSecondaryButton = false;
}
}
// generate tooltip labels and decide where to anchor the tooltip. invoked
// when the vertical-tabs-tooltip is about to be shown.
createTabTooltip(e) {
Expand Down

0 comments on commit bb67a43

Please sign in to comment.