(Help) Button to hide vertical tabbar?

[Hadden89]

I was considering to do a custom button for statusbar to show/hide the vertical tabbar on demand when I'm focused on a specific page to have more horizontal space. Probably a button which trigger a display:none is fine, but I've not idea on how this can be done. The code will probably applied to all UI instances, but I'm fine with that.

[luetage]

@Hadden89 You can use a keyboard shortcut (possibly one‐key shortcut to make it comfortable) or quick commands to trigger “Show Tab Bar”. I say this because I believe this mod isn’t trivial, if you try to stay fully compatible with all of Vivaldi’s inbuilt functionality. Do we already have a mod out there somewhere that triggers an inbuilt command when clicking a button? Would make this a lot cleaner. I just can’t recall.

[dude99]

Why not autohide it, my mod also support keyboard shortcut:
https://forum.vivaldi.net/post/365881

[nomadic]

@Hadden89 @luetage There is the option of using VivaldiHooks to trigger inbuilt Vivaldi commands.

I am far from an expert at writing a hook mod, but looking at panel-right-toggle-button.js and bookmarks-button.js as examples and setting a breakpoint to see the function that was called on toggling the tab bar, I made this:

//Toggle tab button before AddressBar
{
  function toggleTabsOnClick() {
    const WindowActions = vivaldi.jdhooks.require("WindowActions");
    WindowActions.toggleTabs(window.vivaldiWindowId);
  }

  vivaldi.jdhooks.hookClass("toolbars_Toolbar", (origClass) => {
    const React = vivaldi.jdhooks.require("React");
    const SettingsPaths = vivaldi.jdhooks.require("_PrefKeys");
    const ToolbarButton = vivaldi.jdhooks.require("toolbars_ToolbarButton");

    return class extends origClass {
      render() {
        let ret = super.render();
        if (this.props.name == SettingsPaths.kToolbarsNavigation) {
          ret.props.children.push(
            React.createElement(ToolbarButton, {
              tooltip: "Toggle Tab Bar",
              onClick: toggleTabsOnClick,
              image: vivaldi.jdhooks.require("_svg_tabs_large"),
            })
          );
        }
        return ret;
      }
    };
  });
}

There is probably a better way to do it, but if you want a button that toggles the tab bar, this works.

[Hadden89]

@luetage I think I'll go with the keyboard shortcut. I often forget about their existence ^^,
@dude99 Because I rarely hide the bar. But I saw it was updated so it worth another shot.

[luetage]

@nomadic That’s a nice find, didn’t know VivaldiHooks could do that.

[A Former User]

@nomadic Just a quick going through your code (I marked also my comments as insertion so that they’re easier to find). I haven’t tested the resulting code.

  //Toggle tab button before AddressBar
+ // why the braces? They're even wrong JS in this case AFAIK
- {
+   // you can just use anonymous function & also require() only once
-   function toggleTabsOnClick() {
-     const WindowActions = vivaldi.jdhooks.require("WindowActions");
-     WindowActions.toggleTabs(window.vivaldiWindowId);
-   }

+   // no need for () around `origClass`. It's your choice though
    vivaldi.jdhooks.hookClass("toolbars_Toolbar", (origClass) => {
      const React = vivaldi.jdhooks.require("React");
      const SettingsPaths = vivaldi.jdhooks.require("_PrefKeys");
      const ToolbarButton = vivaldi.jdhooks.require("toolbars_ToolbarButton");
+     const WindowActions = vivaldi.jdhooks.require("WindowActions");

      return class extends origClass {
        render() {
          let ret = super.render();
          if (this.props.name == SettingsPaths.kToolbarsNavigation) {
            ret.props.children.push(
              React.createElement(ToolbarButton, {
                tooltip: "Toggle Tab Bar",
-               onClick: toggleTabsOnClick,
+               onClick: function() { WindowActions.toggleTabs(window.vivaldiWindowId) },
                image: vivaldi.jdhooks.require("_svg_tabs_large"),
              })
            );
          }
          return ret;
        }
      };
    });
-  }

Just an irrelevant side note (if you plan to submit this to Denis’s repo): he doesn’t like (or at least use) semicolons.

---

Also, have you noticed how the menu button moves even though it shouldn’t? Interesting thing to look at why it happens…

[luetage]

@potmeklecbohdan said in (Help) Button to hide vertical tabbar?:

Just an irrelevant side note (if you plan to submit this to Denis’s repo): he doesn’t like (or at least use) semicolons.

That’s an interesting subject matter. Javascript has automatic semicolon insertion in processing, but at certain places in code they are mandatory.

[A Former User]

@luetage I could find only <20 actual JS semicolons, most of them in for. As far as I’ve noticed, they’re only needed to separate commands when they start with [ (maybe at other similar occasions).

[luetage]

@potmeklecbohdan Yeah, just read the spec. Anyway, setting semicolons where the insertion later places them doesn’t hurt anything. It’s a matter of preference.

[nomadic]

@potmeklecbohdan Yeah, the onClick function definitely could be like that to be simpler.

The other things you pointed out were mostly artifacts from me modifying a copy of an existing Hook for faster development. Didn't mess around with it too much since it worked.

Some of the other things were added by my code format extension in VScode. It adds the ( ) around single arrow function variables and adds semicolons to lines that don't have them.

---

I am indifferent to placing semicolons since I have done programming in Python and languages with semicolons like C, but if Denis makes me put curly brackets on newlines, I rebel.

if (roadsToWalkDown != 42) 
{
     endUniverse();
     ...
}

---

I saw the menu button moving as well. Using the keyboard shortcut had the same effect, so I didn't worry about it, but it can be fixed.

Hiding the tab bar removes a class called .tabs-left from the #browser div. Common.css has a style that relies on this class for adding padding:

.tabs-left.color-behind-tabs-off .vivaldi span.application-icon, .tabs-right.color-behind-tabs-off .vivaldi span.application-icon, .tabs-bottom.color-behind-tabs-off .vivaldi span.application-icon {
    padding-top: 4px;
}

So to make the menu button not shift up when the tab bar is hidden, we just need to add a more general selector to a custom css file or integrated into the javascript:

.vivaldi span.application-icon {
  padding-top: 4px;
}