Providing some tools from Vivaldi browser : quicker tab navigation with the mouse, speedial, theme

Hello there !

What I missed about Vivaldi :

I really love the concept of brave but I was heavily missing some stuffs I was used to with Vivaldi :

  • The customizable theme
  • The speed dial bookmarks page (on new tab page)
  • The ability to navigate easily between tabs with the mouse
    Even on “forbidden pages like chrome pages and new tab”
    => Middle mouse scrolling over tabs bar to go to the next/previous tab
    => Right mouse click + scrolling somewhere in the page to go to the next/previous tab
    => A way to add a new tab quickly just with an other mouse shortcut.
  • Some other behaviors

So I tried to get them or code them :

Here is my workflow in order to enhanced (in my opinion) the user experience. In fact you can even apply it to other chrome or chromium browsers if you wish.

Here is my Vivaldi :

And here is my custom Brave (with same mouse shortcuts and stuffs) :

1/ The theme

Easy, I found this awesome theme :


Feel free to modify it, it’s a good starting point.

2/ The speed dial for your bookmarks

I tried every speed dial extension. By far my favorite is Visual bookmarks which offers great thumbnails and options to customize :

Here is my personnal settings inside :
image

  • Number of columns => 7
  • panel width => 70%
  • Dark theme => Yes !
  • Background image => I like this one with Lara C. Simple and clean :wink:
  • Thumbnails of sites on a folder instead of an icon => Yes !
  • Custom css area :
    I was not completely happy with the design and the scaling of the thumbnails. So I added some minor changes :
Click to see the CSS

.bg {
background-position: center
}

.grid {
grid-template-columns: repeat(var(–grid-columns), 170px);
grid-template-rows: 150px;
grid-auto-rows: 150px;
grid-gap: 30px;
}

:root {
–font-size-base : 13px;
–bookmark-caption-color:rgb(199, 199, 199);
–bookmark-caption-height : 21px;
}

.dark {
–bookmark-caption-bg : rgba(16, 16, 16, 0.95);
}

/* Adding a subtle white filter */
.app:before {
content: “”;
position: absolute;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.10);
}

.has-image .header .form-control:not(:focus) {
background-color: rgba(51, 51, 51, 0.45);
}

Little tip, you can refresh all your thumbnaills with this little button in the lower left side corner : image

Alternatively if you want a beautiful speed dial without dealing with website’s screenshots I recommend this one :

3/ Adding some script in order to enhance your navigation between tabs, just with the mouse (mouse shortcuts)

I tried several chrome extension. None of them are working inside chrome pages or new tab pages or option pages inside Brave. It’s because for now, Brave is not allowing this behaviour (shame, shaaaaame ;D).

So I code a little script in order to make it works on Windows.
(If you are on Linux or MAC you can try to adapt the script below with a tool like PyAutoGUI)

I could share with you the .exe but I’m just like you guys… I don’t like when a random guy on the Internet provides me a soft from nowhere :sunglasses:

So here are the steps in order to build it yourself :

  • Download and install the open source autohotkey
  • Create a new script with right click on your desktop/New/Auto Hot Key script
  • Call it something like tabScroll-Brave win64.ahk
  • Edit it with your favorite text editor (notepad otherwise)
  • Just copy past the code below (feel free to understand it and modify it) :
Here is the autoHotKeyScript

; Mouse Wheel Tab Scroll - Brave
; -------------------------------
; Fait défiler les onglets Brave avec le scrolling molette de la souris lorsque vous survolez la barre d’onglets.
; Fait défiler les onglets Brave avec clique droit + scroll molette
; Ajoute un nouvel onglet avec clique droit + clique molette
#NoEnv ; Recommandé pour les performances et la compatibilité avec les futures versions d’AutoHotkey.
#Warn ; Activer les avertissements pour aider à détecter les erreurs courantes.
#SingleInstance force ; Détermine si un script est autorisé à s’exécuter à nouveau alors qu’il est déjà en cours d’exécution.
#UseHook Off ; Pas besoin du hook pour le clavier ici
#InstallMouseHook ; Hook pour la souris
#MaxHotkeysPerInterval 1000 ; Évite les messages d’avertissement si wheel a haute vitesse
#NoTrayIcon ;On n’affiche pas l’icone dans la barre des tâches
SendMode Input ; Recommandé pour les nouveaux scripts en raison de sa rapidité et de sa fiabilité supérieure
Menu, Tray, Tip, Mousewheel tab scroll for Brave ;Titre à droite
;Si la souris survole une instance de Brave
#If MouseIsOver(“ahk_class Chrome_WidgetWin_1”)
{
;Astuce pour empecher le menu contextuel de s’afficher lors du clique D + scroll
;Sa mise en place implique d’utiliser “RButton & WheelUp::” et non “~RButton & WheelUp::”
$RButton::
Sleep, 100
Send {RButton}
Return
;On liste ici les évements que l’on va utiliser
WheelUp::
WheelDown::
RButton & MButton::
RButton & WheelUp::
RButton & WheelDown::
MouseGetPos, ypos, id
;On force le focus de brave au survol
IfWinNotActive ahk_id %id%
WinActivate ahk_id %id%
; Si la souris est dans la zone de la barre d’onglet (<45px )
If (ypos < 45)
{
If A_ThisHotkey = WheelUp
Send ^{PgUp} ; Raccourcis CTRL+pageUp
If A_ThisHotkey = WheelDown
Send ^{PgDn} ; Raccourcis CTRL+pageDown
}
Else If A_ThisHotkey = RButton & WheelUp
Send ^{PgUp} ;Si clique D+WheelUp => CTRL + PgUp envoyé
Else If A_ThisHotkey = RButton & WheelDown
Send ^{PgDn} ;Si clique D+WheelDown => CTRL + PgDn envoyé
Else If A_ThisHotkey = WheelUp
Send {WheelUp}
Else If A_ThisHotkey = WheelDown
Send {WheelDown}
Else If A_ThisHotkey = RButton
Send {RButton}
Else If A_ThisHotkey = RButton & MButton
Send ^{t} ;Si clique D+Clique M => CTRL + T envoyé
Return
}
;Fonction pour récuperer le nom du processus sous la souris (être sûr qu’on est sur un naviguateur chromium)
MouseIsOver(WinTitle) {
MouseGetPos, Win
return WinExist(WinTitle . " ahk_id " . Win)
}

  • Now save it and build a .exe by right clicking the .ahk/Compile script.

  • If your brave browser is launched as an admin, you have to do it also In the properties of your .exe : image

  • If you want this .exe to be launched at every startup you can simply put it into your folder %userprofile%\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup

  • If you want to kill it, just do it with your windows Task Manager

  • So by now you can :
    1/ Go to next/previous tab when hovering and scrolling with middle mouse button inside your tabs area
    image

    2/ Go to next/previous tab when right clicking anywhere inside the browser and then scrolling with middle mouse button.

    3/ Create and go to a new tab by right clicking anywhere inside the browser and clicking middle mouse button.

4/ Some other great extensions

  • Like in vivaldi, the extension Undo Closed Tabs Button allows you to get back quickly a tab you just closed by mistake.
  • Linkclump allows you to open multiple links in new tabs with a selection rectangle

A final word

I hope this post will be useful to you !

Cheers,
Seb

My very same feelings, good sire. I miss the full customizing feeling from Vivaldi, and your suggestions are deeply appreciated and will be implemented. It’ll be a wonderful thing a Vivaldi look alike Brave.

1 Like