Sidebar interface bug and toolbar icon bug

[Myst1cX]

I'm using the latest 2.0.1 sidebar (i also tried the src commit 89ad7d3) and the latest firefox version. I've reproduced the same bug on both FF regular and developer ed. The bug seems to have come with one of the recent browser updates because I didn't update your second sidebar for a bit till now in attempt to see if it's fixed yet.
Issue: Now, when opening a sidebar configured website, it basically opens a blank new tab together with the new tab of the site. Previously that area was completely hidden and now it makes the sidebar interface even smaller. Secondly, i have my sidebar enabler icon in the toolbar. Previously it was perfectly aligned and now its completely to the right of the screen.

Screenshots:

This vertical tab that now appears in an opened second sidebar website seems independent from the main browser's vertical tabs (otherwise it would show me other open tabs).

The current toolbar icon misalignment:

[phase3dev]

Windows 11 64-bit
Firefox Second Sidebar v2.0.1
Firefox Release 152.0.2 (main)
Firefox Nightly 154.0a

I have the same issue as @Myst1cX: an independent vertical tab strip appears inside the Second Sidebar web panel itself.

One caveat: As noted above, I have both Firefox Release 152.0.2 and Firefox Nightly 154.0a1 installed. In Firefox Release 152.0.2, I do not see this issue. In Firefox Nightly 154.0a1, the symptom appears to match @Myst1cX’s report: opening a web panel creates an internal vertical tab strip inside the Second Sidebar panel, and those tabs are independent from the main browser window tabs.

After debugging, I believe the cause is a Firefox chrome markup change, not the web panel page itself.

WebPanelsBrowser creates an embedded Firefox browser window by loading AppConstants.BROWSER_CHROME_URL (browser.xhtml) into the sb2-web-panels-browser_* browser element. During initWindow(), this project already hides normal Firefox chrome inside that embedded browser document with the selectors array and an injected <style>:

const selectors = [
  "#PersonalToolbar",
  "#navigator-toolbox",
  "#sidebar-main",
  "#sidebar-launcher-splitter",
  "#sidebar-wrapper",
  "#sidebar-box",
  "#context-bookmarkpage",
  "#context-viewsource",
];

In newer Firefox builds with the sidebar revamp / vertical tabs work, browser.xhtml now also includes a newer sidebar launcher/tabstrip surface inside the browser area, including:

<box id="sidebar-container" ...>
  <sidebar-main>
    <box id="vertical-tabs" slot="tabstrip" ...></box>
  </sidebar-main>
</box>

So the embedded browser window used by Firefox Second Sidebar inherits the main browser’s vertical-tabs setting and renders its own internal vertical tab strip. That is why the tabs shown there are independent from the main browser tabs: they belong to the embedded gBrowser used for web panels.

I tested a local patch against Nightly and confirmed it fixes the inner vertical tab strip while keeping main-window vertical tabs enabled. The fix is to hide the new Firefox sidebar revamp elements in the same embedded-document hide list, not to change global prefs like sidebar.revamp or sidebar.verticalTabs.

For upstream, the minimal patch should be in:

src/second_sidebar/xul/web_panels_browser.mjs

Add the new selectors to the existing selectors array in initWindow():

 const selectors = [
   "#PersonalToolbar",
   "#navigator-toolbox",
   "#sidebar-main",
   "#sidebar-launcher-splitter",
+  "#sidebar-container",
+  "sidebar-main",
+  "#vertical-tabs",
+  "#vertical-tabs-newtab-button",
+  "#pinned-tabs-container",
+  "#vertical-pinned-tabs-splitter",
   "#sidebar-wrapper",
   "#sidebar-box",
   "#context-bookmarkpage",
   "#context-viewsource",
 ];

The key selector is #sidebar-container; the others are defensive coverage for the new sidebar / vertical-tabs pieces. This should be safe on older Firefox builds because missing selectors simply do not match anything, and the stylesheet is injected into the embedded web-panel browser document, not the main browser window document.

This does not require disabling main-window vertical tabs and should not set sidebar.revamp=false.

Note: I haven't investigated the toolbar icon alignment issue from this report. That may be a separate Firefox toolbar/customizable UI layout change.

The screenshot below shows the issue prior to the fix (the left icons are the web panel’s internal tabs, the center is the sidebar content, and the right side is the main Second Sidebar web-panel icon strip):

[Myst1cX]

Thank you for the extensive research, @phase3dev ! The patch seems to fix the issue of the vertical tab strip appearing inside the sidebar. However, I noticed a strange behavior, not sure if a bug or not..
Current release behavior: A single separator that divides between main screen and sidebar (so 1 separator line that you can hover your mouse over to then resize the sidebar window). It appears the current release with the vertical tab strip inside the sidebar also produces another separator line which doesn't seem to do anything. Trying to resize with it simply either ends up with me expanding the vertical tabs trip once the mouse has moved enough in attempt to resize the sidebar view. Possible bug?
With the patch applied: Now the two separators are very close together- the line that's closer to the main window (outside the sidebar properties) is the one that allows resizing while the line that's closer to the sidebar does not allow resizing the sidebar window - same behavior as the Case 2 of 'Current release' ?
Images are attached below.

Current release:

Case 1

Case 2

With patch applied:

Case 1

Case 2