VivaldiHooks - more useful mods!

den_po

VivaldiHooks is a set of hooks/scripts for Vivaldi browser modding. It's like patches but better.
Easy way to install CSS mods. Easy way to create and install JavaScript mods!
Source code/downloads, information for developers, hooks description

Some of new mods:

Prevent Shift+Alt menu appearance
Fix first Ctrl+Tab swith after startup (recently used order, show tab cycler)
Move V button to the right of addressbar
Move Minimize/Zoom/Close buttons to addressbar when Vivaldi is maximized and tab position is NOT "Top"
"Close Tab" button in Quick Commands
Selected text: "Search for ..." search engine selection in a context menu
+/- Zoom buttons in a status bar
Zoom with a mouse wheel over a zoom control in a status bar

CSS:

Cookie/password manager highlighting. "Delete" button has been moved to the left.
Hide Home button
Spinning loading indicator
Move Panel Toggle button to the right when Panel Position is set to "Right Side"
Fixe Tab/Window Spacer for different modes and Tab Bar positions

Old patches rewritten as JavaScript modules:

Bookmarks button before UrlField
Create tab with middle click on a free tabbar space
Ctrl+MiddleClick on a webpage contents - reset zoom
Open Download Tab instead of Download Panel
"Settings" in a context menu of extensions buttons
Fix Search Engines favicons
GO buttons
New notes at the top
MiddleClick on New Tab button to Paste And Go
Select text on searchfield focus
Keyboard shortcuts for SpeedDial
Unicode domains decoder

Autohide UI by @snql: https://forum.vivaldi.net/post/137075

CustomHooks by @razr96: https://forum.vivaldi.net/post/127538

Screenshots:

move-window-buttons-maximized.js + move-V-button-to-addressbar.js
qc-close-tab.js
bookmarks-button.png

iAN CooG

Excellent, thank you.
I can just rename the extension of the features I don't need like:
focused-window-title-color.css_NO
move-V-button-to-addressbar.js_NO
and restart Vivaldi. Way much easier now to maintain

Suggested additions:
Overlay panel (fixes the horrible glitchy default appearance of panel)
https://vivaldi.net/en-US/forum/modifications/14376-overlay-panels
Autohide address bar

!
.toolbar-addressbar {
visibility: hidden;
position: fixed;
width: 100%;
opacity: 0;
z-index: 2;
transition: opacity .3s linear .7s, visibility 0s linear 1s;
}
#header:hover ~ #main .toolbar-addressbar, .toolbar-addressbar:hover {
visibility: visible;
opacity: 1;
transition-delay: 0s;
}

wiiija

Nice work! is that a bookmarks drop down menu I see?? why that isn't standard I don't know. I'll have a play, it's what I need to replace having to use an extension, don't dig it on the left side though

den_po

@wiiija:

don't dig it on the left side though

You may change its position. Open bookmarks-button.js in a text editor, change it

var button = document.createElement('div');
button.style.order = 1;   // <----- add this line

If you use also move-V-button-to-addressbar.js, you may need to change this too:

        newButton = itm.cloneNode(true);
        newButton.style.order=2; // <-----

iAN CooG

I have a problem with the newtab-middleclick-pasteandgo.js:
on the main and only window (I have 2 tabs only there at the moment) I have copied a url, press the [+] with middleclick and only a new empty tab appears as nothing was in the clipboard, but ctrl-v actually pastes the url in the address bar, so there is something.
But if I create a new window with ctrl-n and then middleclick the [+] there, it pastes and goes to the url as expected. Close the 2nd window, the main window [+] still doesn't sense the clipboard content. I also rebooted the PC and repeated after a fresh start to be sure.
Edit: and now, after closing all my tabs and Vivaldi again, it works on the main window… I can't reproduce the condition, but seems the UI was not ready when it happened for some reason. After a while (watched a youtube video and reopened this forum in another tab) it happens again, doesn't work in main window, only in a new window.

den_po

@iAN CooG:

Edit: and now, after closing all my tabs and Vivaldi again, it works on the main window… I can't reproduce the condition, but seems the UI was not ready when it happened for some reason. After a while (watched a youtube video and reopened this forum in another tab) it happens again, doesn't work in main window, only in a new window.

I can guess why this happened. Scripts may be executed in other sequence than they added to document.
I've rewritten script loading syncronisation code, try new version.

iAN CooG

That was quick, thanks. Replaced jdhooks.js, I'll let you know if I see other problems.

Edit: too bad doesn't change anything, after a while it stops working on main window. creating a new window and moving my tabs there, then works again for a while…
I am able to reproduce the exact situation and what is causing it:
In one tab I am watching a youtube video, while watching it in a normal way, [+] works and does paste+go.
Then press the full screen control in the video in lower right. press esc again to go back in normal mode.
At this point the [+] stops working. The version in bundle.js always work, I guess I can keep only that mod for now and ditch this one until it's solved.
The video in question is this
https://www.youtube.com/watch?v=iGboAbKjyxs

luetage

That's really cool. I guess there's something in it for everybody, and I really like that you made it a github project, painless to always get the latest version.

Just 2 things I noticed: The manual installation instructions in the readme file don't mention copying jdhooks.js to the Vivaldi folder. And the mod for the middle click to create a new tab is already integrated in regular Vivaldi. The official version seems to work better since the whole tabstrip area can still be used to drag and drop the whole window. But no idea if that's just an osx thing. Can't try it on windows.

wiiija

I think you're correct, the middle click for new tab must be an osx thing, I can't see any option for it and it doesn't work without the mod, it's another thing I have no idea why it's not standard…......unless of course I'm wrong and my custom css has broke it.

wiiija

Out of interest den_po with regards to the bookmark dropdown, where does it grab the icon from? I wish to change it, my usual method doesn't work as inspecting the icon doesn't show the specifics oddly…....so if I change it it also changes all the other address bar icons.

iAN CooG

Cheers, den_po! Just saw "newtab-middleclick-pasteandgo.js: process tabstrip recreation" at github. That works even with the YT fullscreen and back

den_po

@iAN CooG:

Then press the full screen control in the video in lower right. press esc again to go back in normal mode.

OK, TabStrip is recreated after fullscreen. Fixed.

@luetage:

The manual installation instructions in the readme file don't mention copying jdhooks.js to the Vivaldi folder.

Fixed.

@wiiija:

Out of interest den_po with regards to the bookmark dropdown, where does it grab the icon from? I wish to change it, my usual method doesn't work as inspecting the icon doesn't show the specifics oddly…....so if I change it it also changes all the other address bar icons.

Bundle.js is a set of modules. Module may be a class, a function, a string or any JS object. One of these modules is bookmarks SVG-image.

button.innerHTML = vivaldi.jdhooks.require('_svg_panel_bookmarks');

Try replacing this line with new one:

button.innerHTML = '';

If you run Vivaldi like this
vivaldi --debug-packed-apps --silent-debugger-extension-api
rightclick on any UI element and select "Inspect", you may type vivaldi.jdhooks in Console and get something interesting.

Unminified modules stored as separate files: https://drive.google.com/drive/folders/0B4keYUjTvrF2UHZDb1FZSWdhOTg?usp=sharing

wiiija

Thanks for that den_po, I'm using the menu hook now too and its perfect (and I managed to change the icon with my usual css.
Sorry if I'm being thick but .js isn't my thing, I simply cannot find a specific class for that bookmarks button! I replaced that code above which gives me a little down arrow instead, inspecting just gives button.toolbar so I can't display: none the svg and then add my own icon as it affects all.

den_po

@wiiija:

Thanks for that den_po, I'm using the menu hook now too and its perfect (and I managed to change the icon with my usual css.
Sorry if I'm being thick but .js isn't my thing, I simply cannot find a specific class for that bookmarks button! I replaced that code above which gives me a little down arrow instead, inspecting just gives button.toolbar so I can't display: none the svg and then add my own icon as it affects all.

OK, add new class name like this:

button.className = 'button-toolbar bookmarksbutton';

den_po

+copy-searchfield.js: Copy SearchField text to new tab on Alt+Enter/Shift+Enter
+searchfield-current-engine-icon.js: Current search engine icon in SearchField

iAN CooG

another one bites the dust
in 1.5.626.8:
[Right click on the address bar doesn't select the whole URL (VB-19561)
so I guess select-urlfield.js is not needed anymore after the update](Right click on the address bar doesn't select the whole URL (VB-19561)
so I guess select-urlfield.js is not needed anymore after the update)

wiiija

I'm too "scared" to install the new version in case it breaks my theme!

den_po

+devtools.js: docked devtools
http://i.imgur.com/Q60xYeN.gif

luetage

Wow, why isn't that in standard Vivaldi yet… I don't get it.

den_po

@luetage:

Wow, why isn't that in standard Vivaldi yet… I don't get it.

Because it's just a workaround. It's not so easy to make such thing correctly