5. VivaldiHooks - more useful mods!

VivaldiHooks - more useful mods!


  • 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!
    https://github.com/justdanpo/VivaldiHooks

    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
      move-window-buttons-maximized.js + move-V-button-to-addressbar.js
    • qc-close-tab.js
      qc-close-tab.js
    • bookmarks-button.png
      bookmarks-button.png

    delta echo november papa oscar

    19
    M
     1 Reply

  • 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;
    }

    Get my Custom CSS Restore python script at
    http://iancoog.altervista.org/

    1

  • 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 :)

    1

  • @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; // <-----

    delta echo november papa oscar

    2

  • 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.

    Get my Custom CSS Restore python script at
    http://iancoog.altervista.org/

    1

  • @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.

    delta echo november papa oscar

    0

  • 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

    Get my Custom CSS Restore python script at
    http://iancoog.altervista.org/

    1

  • 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.

    Vivaldi Forum mod ✧ github ⁊

    0

  • 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.

    0

  • 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.

    0

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

    Get my Custom CSS Restore python script at
    http://iancoog.altervista.org/

    1

  • @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

    delta echo november papa oscar

    2

  • 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.

    0

  • @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';

    delta echo november papa oscar

    0

  • +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

    delta echo november papa oscar

    0

  • 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)

    Get my Custom CSS Restore python script at
    http://iancoog.altervista.org/

    1

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

    0

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

    delta echo november papa oscar

    1

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

    Vivaldi Forum mod ✧ github ⁊

    1 1 Reply

  • @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

    delta echo november papa oscar

    2
Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.