Skip to content

Commit

Permalink
chore: improve compatibility with Floorp v11.19.1 (closes #342)
Browse files Browse the repository at this point in the history
  • Loading branch information
@onemen
onemen committed Oct 23, 2024
1 parent 8a5bcfe commit c8aad1d
Show file tree
Hide file tree
Showing 14 changed files with 215 additions and 78 deletions.
49 changes: 33 additions & 16 deletions addon/chrome/content/minit/minit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,17 @@ var TMP_tabDNDObserver = {
});
}

function tabmixHandleMoveString() {
const baseTest = 'this.getAttribute("orient") === "horizontal" && TabmixTabbar.widthFitTitle';
if (Tabmix.isVersion(1300)) {
return `!this.verticalMode && ${baseTest}`;
}
if (Tabmix.isVersion({fp: "128.0.0"})) {
return `!verticalTabbarEnabled() && ${baseTest}`;
}
return baseTest;
}

// Determine what tab we're dragging over.
// * In tabmix tabs can have different width
// * Point of reference is the start of the dragged tab/tabs when
Expand All @@ -71,8 +82,8 @@ var TMP_tabDNDObserver = {
// the middle of a background tab, the dragged tab would take that
// tab's position when dropped.
const _animateTabMove = Tabmix.changeCode(tabBar, "gBrowser.tabContainer._animateTabMove")._replace(
'let draggedTab',
`let tabmixHandleMove = this.getAttribute("orient") === "horizontal" && TabmixTabbar.widthFitTitle;
/(?:const|let) draggedTab/,
`let tabmixHandleMove = ${tabmixHandleMoveString()};
$&`
)._replace(
'this.selectedItem = draggedTab;',
Expand All @@ -85,7 +96,7 @@ var TMP_tabDNDObserver = {
)._replace(
`if (${Tabmix.isVersion(1300) ? "screen" : "screenX"} > ${Tabmix.isVersion(1330) ? "point" : "tabCenter"}) {`,
`let midWidth = tabs[mid].getBoundingClientRect().width;
if (!this.verticalMode && tabmixHandleMove && referenceTabWidth > midWidth) {
if (tabmixHandleMove && referenceTabWidth > midWidth) {
_screenX += midWidth / 2;
if (_screenX > tabCenter + referenceTabWidth / 2) {
high = mid - 1;
Expand Down Expand Up @@ -140,22 +151,28 @@ var TMP_tabDNDObserver = {
"this.#rtlMode", "this._rtlMode", {check: Tabmix.isVersion(1310), flags: "g"}
).toCode();
} else {
// helper function to get floorp strings for width in vertical mode
/** @param {string} vertical @param {string} horizontal */
const getWidthString = (vertical, horizontal) =>
(Tabmix.isVersion({fp: "128.0.0"}) ?
`(verticalTabbarEnabled() ? ${vertical} : ${horizontal})` :
horizontal);
_animateTabMove._replace(
'let shiftWidth = tabWidth * movingTabs.length;',
`let shiftWidth = Tabmix.getMovingTabsWidth(movingTabs);
/(?:const|let) shiftWidth = tabWidth \* movingTabs\.length;/,
`let shiftWidth = tabmixHandleMove ? Tabmix.getMovingTabsWidth(movingTabs) : tabWidth * movingTabs.length;
draggedTab._dragData.shiftWidth = shiftWidth;
let rightTabWidth = movingTabs[movingTabs.length - 1].getBoundingClientRect().width;
let leftTabWidth = movingTabs[0].getBoundingClientRect().width;
let referenceTabWidth = ltrMove ? rightTabWidth : leftTabWidth;`
)._replace(
'(rightMovingTabScreenX + tabWidth)',
`(rightMovingTabScreenX + rightTabWidth)`,
`(rightMovingTabScreenX + ${getWidthString("tabWidth", "rightTabWidth")})`,
)._replace(
/let leftTabCenter =.*;/,
`let leftTabCenter = leftMovingTabScreenX + translateX + leftTabWidth / 2;`
/(?:const|let) leftTabCenter =.*;/,
`let leftTabCenter = leftMovingTabScreenX + translateX + ${getWidthString("tabWidth / 2", "leftTabWidth / 2")};`
)._replace(
/let rightTabCenter =.*;/,
`let rightTabCenter = rightMovingTabScreenX + translateX + rightTabWidth / 2;`
/(?:const|let) rightTabCenter =.*;/,
`let rightTabCenter = rightMovingTabScreenX + translateX + ${getWidthString("tabWidth / 2", "rightTabWidth / 2")};`
).toCode();
}

Expand All @@ -172,12 +189,12 @@ var TMP_tabDNDObserver = {
'var newMargin;',
'var newMargin, newMarginY = 0;'
)._replace(
/let newIndex = this\._getDropIndex\(event.*\);/,
/(?:const|let) newIndex = this\._getDropIndex\(event.*\);/,
'let {newIndex, addWidth} = this._getDropIndex(event, {dragover: true, children: this.allTabs});'
)._replace(
/let tabRect = children[^;]*;/g,
/(?:const|let) tabRect = children[^;]*;/g,
`$&
newMarginY = TMP_tabDNDObserver.getDropIndicatorMarginY(ind, tabRect, rect);`
newMarginY = TMP_tabDNDObserver.getDropIndicatorMarginY(ind, tabRect, rect);`,
)._replace(
'newMargin = rect.right - tabRect.right',
'$& + (addWidth ? tabRect.width : 0)'
Expand Down Expand Up @@ -206,8 +223,8 @@ var TMP_tabDNDObserver = {
}
$&`
)._replace(
'let newTab = gBrowser.duplicateTab(tab);',
'let newTab = Tabmix.duplicateTab(tab);'
'newTab = gBrowser.duplicateTab(tab);',
'newTab = Tabmix.duplicateTab(tab);'
)._replace(
'} else if (draggedTab && draggedTab.container == this) {',
`gBrowser.ensureTabIsVisible(draggedTabCopy);
Expand Down Expand Up @@ -235,7 +252,7 @@ var TMP_tabDNDObserver = {
}
$&`.replace(/_newTranslateX/g, Tabmix.isVersion(1300) && !Tabmix.isVersion(1320) ? "newTranslate" : "newTranslateX"),
)._replace(
'let urls = links.map(link => link.url);',
/urls = links.map\(\(?link\)? => link.url\);/,
`$&
if (event.target.id === "tabmix-scrollbox") {
if (event.originalTarget.id === "scrollbutton-up") newIndex = 0;
Expand Down
11 changes: 8 additions & 3 deletions addon/chrome/content/minit/tablib.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -379,7 +379,12 @@ Tabmix.tablib = {

let $LF = '\n ';
const doPosition = Tabmix.isVersion(1300) ? "absPositionHorizontalTabs" : "doPosition";
const floorpVerticalTabbar = Tabmix.isVersion({fp: "128.0.0"}) ? " && !verticalTabbarEnabled()" : "";
Tabmix.changeCode(tabBar, "gBrowser.tabContainer._positionPinnedTabs")._replace(
'const doPosition =',
'let doPosition =',
{check: Tabmix.isVersion({fp: "128.0.0"})}
)._replace(
'let layoutData = this._pinnedTabsLayoutCache;',
'if (typeof this.arrowScrollbox.resetFirstTabInRow == "function")\
this.arrowScrollbox.resetFirstTabInRow();\
Expand All @@ -388,13 +393,13 @@ Tabmix.tablib = {
'scrollStartOffset:',
'$& TabmixTabbar.scrollButtonsMode != TabmixTabbar.SCROLL_BUTTONS_LEFT_RIGHT ? 0 :'
)._replace(
`if (${doPosition})`,
`if (${doPosition} && TabmixTabbar.isMultiRow &&
`if (${doPosition}${floorpVerticalTabbar})`,
`if (${doPosition}${floorpVerticalTabbar} && TabmixTabbar.isMultiRow &&
Tabmix.prefs.getBoolPref("pinnedTabScroll")) {
${doPosition} = false;
this.toggleAttribute("positionpinnedtabs", false);
}
if (${doPosition} && TabmixTabbar.isMultiRow) {` + $LF +
if (${doPosition}${floorpVerticalTabbar} && TabmixTabbar.isMultiRow) {` + $LF +
(Tabmix.isVersion(1190) ? ' this.toggleAttribute("positionpinnedtabs", true)' :
' this.setAttribute("positionpinnedtabs", "true");') + $LF +
' let layoutData = this._pinnedTabsLayoutCache;' + $LF +
Expand Down
2 changes: 1 addition & 1 deletion addon/chrome/content/overlay/autoReload.xhtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@

<div class="container">
<div class="combined-element">
<html:input list="sec" id="autoreload_seconds" type="number" required="required" min="0" max="59" size="3" maxlength="3"
<html:input list="sec" id="autoreload_seconds" type="number" required="required" min="0" max="59" size="4" maxlength="4"
oncommand="updateOkButtonDisabledState();"
oninput="onInput(this);"/>
<div class="select-button" onmousedown="openPopup(this);"></div>
Expand Down
2 changes: 1 addition & 1 deletion addon/chrome/content/overlay/multirow.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
:root {
--tab_min_width_mlt: 100px;
--tab_max_width_mlt: 200px;
--tab-min-height_mlt: calc(var(--tab-min-height) + 2 * (var(--proton-tab-block-margin, 0px) + var(--tab-block-margin, 0px)));
--tab-min-height_mlt: calc(var(--tabmix-tab-min-height) + 2 * var(--tab-block-margin, 0px)) !important;
--tabmix-scrollbutton-padding: calc(var(--toolbarbutton-inner-padding) + var(--toolbarbutton-outer-padding));
}

Expand Down
5 changes: 3 additions & 2 deletions addon/chrome/content/preferences/appearance.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@ var gAppearancePane = {
var browserWindow = Tabmix.getTopWin();
// disable options for position the tabbar and scroll mode if TreeStyleTab extension installed
if (browserWindow.Tabmix.tabsUtils.isVerticalTabBar) {
const floorpVerticalTabbar = Tabmix.isVersion({fp: "128.0.0"});
const description = document.getElementById("treeStyleTab.msg");
Tabmix.setItem(description, "hidden", null);
if (browserWindow.gBrowser.tabContainer.verticalMode) {
if (browserWindow.gBrowser.tabContainer.verticalMode || floorpVerticalTabbar) {
description.innerHTML = "These preferences are not in use for vertical tabs.";
description.style.width = "25em";
}
Expand All @@ -23,7 +24,7 @@ var gAppearancePane = {
Tabmix.setItem("scrollDelay", "disabled", true);
Tabmix.setItem("smoothScroll", "disabled", true);

if (Tabmix.isVersion(1330)) {
if (Tabmix.isVersion(1330) || floorpVerticalTabbar) {
const hideTabbar = $("hideTabbar");
Tabmix.setItem(hideTabbar, "disabled", true);
Tabmix.setItem(hideTabbar.previousElementSibling, "disabled", true);
Expand Down
58 changes: 36 additions & 22 deletions addon/chrome/content/tab/tab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -322,7 +322,6 @@ Tabmix.tabsUtils = {
_inUpdateVerticalTabStrip: false,
_keepLastTab: false,
_show_newtabbutton: "aftertabs",
_tabmixPositionalTabs: {},
checkNewtabButtonVisibility: false,
closeButtonsEnabled: false,
initialized: false,
Expand Down Expand Up @@ -403,14 +402,8 @@ Tabmix.tabsUtils = {
this.tabBar.mCloseButtons = Tabmix.prefs.getIntPref("tabs.closeButtons");
this._keepLastTab = Tabmix.prefs.getBoolPref("keepLastTab");
this.closeButtonsEnabled = Tabmix.prefs.getBoolPref("tabs.closeButtons.enable");
this._tabmixPositionalTabs = {
beforeSelectedTab: null,
afterSelectedTab: null,
beforeHoveredTab: null,
afterHoveredTab: null
};

Tabmix.afterTabsButtonsWidth = [35];
Tabmix.getAfterTabsButtonsWidth();
Tabmix.tabsNewtabButton = document.getElementById("tabs-newtab-button");
this._show_newtabbutton = "aftertabs";

Expand Down Expand Up @@ -463,7 +456,6 @@ Tabmix.tabsUtils = {
if (!this.initialized)
return;
TMP_eventListener.toggleEventListener(this.tabBar, this.events, false, this);
this._tabmixPositionalTabs = {};
},

handleEvent(aEvent) {
Expand Down Expand Up @@ -621,6 +613,11 @@ Tabmix.tabsUtils = {
/** @param {number} width */
const setNewMinWidth = width => {
if (width !== currentMinWidth) {
// since we prevent tab animation whe we change min/max width we need to remove closing tabs
// to avoid bug 608589
for (let tab of gBrowser._removingTabs) {
gBrowser._endRemoveTab(tab);
}
this.tabBar.setAttribute("no-animation", "");
gTMPprefObserver.dynamicRules.width.style.setProperty(
"min-width",
Expand Down Expand Up @@ -672,13 +669,13 @@ Tabmix.tabsUtils = {
if (this._widthCache.minWidth !== newMinWidth) {
this._widthCache.minWidth = newMinWidth;
this._widthCache.maxWidth = newMinWidth;
this._widthCache[pinnedTabCount] = newMinWidth;
this._widthCache[0] = newMinWidth;
}

if (isFirstRowWithPinnedTabs && firstNonPinnedTab) {
const stripWidthWithoutPinned = tabstripWidth - (firstNonPinnedTab.getBoundingClientRect().x - tsboX);
const testNewMinWidth = calcMinWidth(stripWidthWithoutPinned, tabsButtonWidth, newMinWidth);
if (testNewMinWidth > newMinWidth) {
if (testNewMinWidth < newMinWidth) {
const widthForeNonPinnedTabs = calcMinWidth(stripWidthWithoutPinned, tabsButtonWidth);
this._widthCache[pinnedTabCount] = widthForeNonPinnedTabs;
this._widthCache.maxWidth = Math.max(this._widthCache.maxWidth, widthForeNonPinnedTabs);
Expand All @@ -699,22 +696,23 @@ Tabmix.tabsUtils = {
return;
}

// TabmixTabbar.widthFitTitle is false when mTabMinWidth === mTabMaxWidth
if (this.checkNewtabButtonVisibility && !TabmixTabbar.widthFitTitle) {
this.updateMinWidth();
this.disAllowNewtabbutton = false;
return;
}

if (!this.checkNewtabButtonVisibility) {
this.showNewTabButtonOnSide(this.overflow, "right-side");
return;
}

// when Private-tab enabled/disabled we need to reset
// tabsNewtabButton and afterTabsButtonsWidth
if (!Tabmix.tabsNewtabButton)
if (!Tabmix.tabsNewtabButton || !Tabmix.afterTabsButtonsWidthReady) {
Tabmix.getAfterTabsButtonsWidth();
}

// TabmixTabbar.widthFitTitle is false when mTabMinWidth === mTabMaxWidth
if (this.checkNewtabButtonVisibility && !TabmixTabbar.widthFitTitle) {
this.updateMinWidth();
this.disAllowNewtabbutton = false;
return;
}

const lastTab = Tabmix.visibleTabs.last;
const tsboRect = this.tabBar.arrowScrollbox.scrollbox.getBoundingClientRect();
Expand Down Expand Up @@ -1007,7 +1005,7 @@ Tabmix.tabsUtils = {
gBrowser.tabContainer.getAttribute("orient") !== "vertical" &&
TabmixTabbar.visibleRows > 1;
const margin = reduceMargin ? "1px" : "";
document.documentElement.style.setProperty(this.protonValues.name, margin);
document.documentElement.style.setProperty(this.protonValues.name, margin, "important");
},
};

Expand Down Expand Up @@ -1879,6 +1877,14 @@ window.gTMPprefObserver = {
);
}

this.insertRule(`:root { --tabmix-tab-min-height: var(--tab-min-height);}`, "tabMinHeight");
if (Tabmix.isVersion({fp: "128.0.0"})) {
window.gFloorpObservePreference("floorp.browser.tabs.tabMinHeight", () => {
const height = Services.prefs.getIntPref("floorp.browser.tabs.tabMinHeight", 30);
this.dynamicRules.tabMinHeight.style.setProperty("--tabmix-tab-min-height", height + "px");
});
}

this.dynamicProtonRules();
this.toolbarbuttonTopMargin();
},
Expand All @@ -1896,6 +1902,14 @@ window.gTMPprefObserver = {
}`);
}

const padding = Tabmix.isVersion({fp: "128.0.0"}) ? {
block: "3.5px",
inline: "3.5px",
} : {
block: "calc(var(--toolbarbutton-inner-padding) - 3px)",
inline: "calc(var(--toolbarbutton-inner-padding) - 6px)",
};

this.insertRule(
`#tabmix-scrollbox::part(scrollbutton-up),
#tabmix-scrollbox::part(scrollbutton-down) {
Expand All @@ -1904,14 +1918,14 @@ window.gTMPprefObserver = {
border: 4px solid transparent;
border-radius: calc(var(--tab-border-radius) + 4px);
margin: ${buttonsMarginBlock};
padding: calc(var(--toolbarbutton-inner-padding) - 3px) calc(var(--toolbarbutton-inner-padding) - 6px);
padding: ${padding.block} ${padding.inline};
}`
);

this.insertRule(
`#tabmix-scrollbox[tabmix-flowing=multibar]::part(scrollbutton-up),
#tabmix-scrollbox[tabmix-flowing=multibar]::part(scrollbutton-down) {
padding-inline: calc(var(--toolbarbutton-inner-padding) - 5px);
padding: ${padding.block};
}`
);

Expand Down
29 changes: 18 additions & 11 deletions addon/chrome/content/tabmix.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,13 +73,15 @@ Tabmix.sessionInitialized = function() {
}
};

Tabmix.getAfterTabsButtonsWidth = function TMP_getAfterTabsButtonsWidth() {
if (!this.afterTabsButtonsWidth) {
this.afterTabsButtonsWidth = [];
}
/** @this {typeof TabmixNS} */ // @ts-ignore
Tabmix.getAfterTabsButtonsWidth = function() {
this.afterTabsButtonsWidthReady = false;
this.afterTabsButtonsWidth = this.isVersion({fp: "128.0.0"}) ? [40] : [35];
/** @type {number[]} */
const buttonWidths = [];
if (gBrowser.tabContainer.getAttribute("orient") == "horizontal") {
const {toolbar, tabBar, collapsed, tabBarCollapsed, toolbarCollapsed} =
Tabmix.tabsUtils.getCollapsedState;
this.tabsUtils.getCollapsedState;
let stripIsHidden = TabmixTabbar.hideMode !== 0 && collapsed;
if (stripIsHidden) {
toolbar.collapsed = false;
Expand All @@ -88,24 +90,26 @@ Tabmix.getAfterTabsButtonsWidth = function TMP_getAfterTabsButtonsWidth() {
// save tabsNewtabButton width
this.tabsNewtabButton = document.getElementById("tabs-newtab-button");
this.tabsNewtabButton.setAttribute("force-display", true);
let openNewTabRect = Tabmix.getBoundsWithoutFlushing(this.tabsNewtabButton);
// don't use getBoundsWithoutFlushing here, it will get width zero if the button is hidden
// since we get here after the browser was painted we can use getBoundingClientRect
let openNewTabRect = this.tabsNewtabButton.getBoundingClientRect();
let style = window.getComputedStyle(this.tabsNewtabButton);
let marginStart = style?.getPropertyValue("margin-left") ?? "0px";
// it doesn't work when marginEnd add to buttonWidth
// let marginEnd = style.getPropertyValue("margin-right");
// let buttonWidth = openNewTabRect.width + parseFloat(marginStart) + parseFloat(marginEnd);
let buttonWidth = openNewTabRect.width + parseFloat(marginStart);
if (buttonWidth > 0) {
this.afterTabsButtonsWidth.push(buttonWidth);
buttonWidths.push(buttonWidth);
}

// when privateTab extension installed add its new tab button width
// for the use of adjustNewtabButtonVisibility set tabsNewtabButton to be
// the right button
let openNewPrivateTab = document.getElementById("privateTab-afterTabs-openNewPrivateTab");
if (openNewPrivateTab) {
let openNewPrivateTabRect = Tabmix.getBoundsWithoutFlushing(openNewPrivateTab);
this.afterTabsButtonsWidth.push(openNewPrivateTabRect.width);
let openNewPrivateTabRect = openNewPrivateTab.getBoundingClientRect();
buttonWidths.push(openNewPrivateTabRect.width);
if (openNewPrivateTabRect.right > openNewTabRect.right)
this.tabsNewtabButton = openNewPrivateTab;
}
Expand All @@ -114,6 +118,11 @@ Tabmix.getAfterTabsButtonsWidth = function TMP_getAfterTabsButtonsWidth() {
toolbar.collapsed = toolbarCollapsed;
tabBar.collapsed = tabBarCollapsed;
}
if (buttonWidths.length) {
this.tabsUtils._widthCache = {minWidth: 0, maxWidth: 0};
this.afterTabsButtonsWidth = buttonWidths;
this.afterTabsButtonsWidthReady = true;
}
}
};

Expand Down Expand Up @@ -162,8 +171,6 @@ Tabmix.afterDelayedStartup = function() {

TMP_extensionsCompatibility.onDelayedStartup();

setTimeout(() => Tabmix.getAfterTabsButtonsWidth(), 100);

gTMPprefObserver.setMenuIcons();

TabmixTabbar.updateSettings(true);
Expand Down
Loading

0 comments on commit c8aad1d

Please sign in to comment.