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 {
/* Nombre de colonnes de vignettes (dynamique auto) + largeur en pixel des vignettes /
grid-template-columns: repeat(var(–grid-columns), 170px);
/
Hauteur de la 1ere ligne de vignettes*/
grid-template-rows: 150px;
/Hauteur des autres vignettes/
grid-auto-rows: 150px;
/* Espace entre les vignettes */
grid-gap: 30px;
}

:root {
–font-size-base : 13px; /* Taille text label /
–bookmark-caption-color:rgb(199, 199, 199); /
Color text label /
–bookmark-caption-height : 21px; /
Hauteur du bandeau du label */
}

.dark {
–bookmark-caption-bg : rgba(16, 16, 16, 0.95); /* bg color du label */
}

/* léger filtre de fond */
.app:before {
content: “”;
position: absolute;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.10);
}

/* Couleur de fond sur le dropDown des favoris plus sombre*/
.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 la molette de la souris lorsque vous survolez la barre d’onglets.

;On lance le script en mode admin (utile si brave en admin)
if not A_IsAdmin
Run *RunAs “%A_ScriptFullPath%”

;On écrit dans la base de registre pour lancer l’exe a chaque démarrage de windows
RegWrite, REG_SZ,HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Run, tabScrollBrave, %A_ScriptFullPath%

#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 99999999999 ; Évite les messages d’avertissement si wheel a haute vitesse
#IfTimeout 500 ; Permet de laisser respirer les “If” contextuels (avec “#”) et evite des crashs si scroll trop rapide
;#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

;msgbox Both buttons! ;Message pour debug

;Si la souris survol 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 sur brave au passage de la souris
IfWinNotActive ahk_id %id%
WinActivate ahk_id %id%
; Si la souris est dans la zone de la barre d’onglet (<45px )
; On fait défiler les onglets au mousewheel
If (ypos < 45)
{
If A_ThisHotkey = WheelUp
Send ^{PgUp} ; Raccourcis CTRL+pageUp
If A_ThisHotkey = WheelDown
Send ^{PgDn} ; Raccourcis CTRL+pageDown
}
;Onglet suivant/précédent si clique D + mousewheel :
Else If A_ThisHotkey = RButton & WheelUp
Send ^{PgUp} ;CTRL + PgUp envoyé
Else If A_ThisHotkey = RButton & WheelDown
Send ^{PgDn} ;CTRL + PgDn envoyé
;Nouvel onglet si clique D + clique M
Else If A_ThisHotkey = RButton & MButton
Send ^{t} ;Si clique D+Clique M => CTRL + T
;Sinon on fait passer les events tel quel
Else If A_ThisHotkey = WheelUp
Send {WheelUp}
Else If A_ThisHotkey = WheelDown
Send {WheelDown}
Else If A_ThisHotkey = RButton
Send {RButton}
Return
}

;Fonction pour récuperer le nom du processus sous focus
MouseIsOver(WinTitle)
{
MouseGetPos, Win
return WinExist(WinTitle . " ahk_id " . Win)
}

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

  • Launch it.

  • If you want to delete it for some reason, just open your Windows Registry and in path “HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Run”, delete the entry named tabScrollBrave. This key allows the .exe to launch at every windows startup. The UAC/User Account Control can cause issue at reboot and personally I disabled it).

  • 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