VivaldiHooks - more useful mods!

[bigbill]

VivaldiHooks seems not to work properly on Vivaldi 1.13 ... The browser only launches with an empty window. Any updates planned ?
I was waiting for the bookmark button in Vivaldi 1.4 (understood it was planed for this release) but I'm disappointed it wasn't implemented though.

[iAN CooG]

@bigbill as written some months ago, VivaldiHooks stopped working since 1.11 and there is no trace of den_po in 7 months. You can forget about this mod until he's back. You have to make do with custom.css mods.

[den_po]

Hi guys. I just wanna say VivaldiHooks has been updated

[Hadden89]

@den_po Oh, welcome back!

[iAN CooG]

Welcome back!

[iAN CooG]

I just downloaded the new vivaldihooks from github and applied my extra js mods, it feels so good to have it back with the extra functionalities.

[den_po]

Re: VivaldiHooks - more useful mods!

Such a productive month. A lot of work has been done. If someone is interested, there is a commit history: https://github.com/justdanpo/VivaldiHooks/commits/master

I think I should write some kind of documentation describing VivaldiHooks "API" and some aspects of Vivaldi internals.

[Hadden89]

@den_po Thanks again. Some docs could help to spread mods based on jdhooks, so yes, if you can please do it

[Davy49]

Hi,
this tool really looks interesting, to be honest the main reason that I'm interested in getting this installed is just for one reason. That is it lets me add a spinning indicator when a page is loading like I'm used to in other chromium based browser's. I must be doing something wrong because I can't seem to get this tool installed, thanks for any help that might be provided. I know that vivaldi is different than google chrome and the new chromium edge browser, but I do in fact enjoy how they both show when a page is loading on the open tab.
David

[luetage]

@Davy49 The option to show favicon progress or spinner is available in vivaldi://settings/tabs/ under tab display. Make sure you have animation enabled in appearance settings. No need to use a mod when you can do it native.

[Davy49]

@luetage ,
First of all, thanks so much for taking the time to reply, upon checking my setting's I already have the favicon spinner selected in the tabs section, also I have the animation setting selected in the appearance area. This really has me concerned now that I don't see any kind of animation/movement on the tab when page loading activity is in progress. Currently the only activity I'm seeing is in the address bar on the right side where it shows the megabytes of whats being loaded. Hopefully I'll get this issue figured out, with the setting option's available to a user I know there must be a way to get this working. Of course it's possible that I might have ticked a different setting that's preventing the favicon from spinning. Please Stay Safe !!
David

[A Former User]

@Davy49 It only shows on background tabs, not on the current one. That's why you don't see it.

[Davy49]

@potmeklecbohdan
To be honest, I'm beginning to wonder is the browser might have too many setting's/option's for me to enjoy using it to it's full extent. I'm wondering if me changing the default newtab page/home page to something other than the way the browser is setup when you first start using it might be part of my problem. For an example, I went into settings under the theme section, I tried changing the theme to a different one (human) and instead of changing it to match the image shown in the example area mine shows the tab bar as blue.
Update: Just for a test I decided to disable the extension that I was using instead of the vivaldi default new tab page, volla..after doing so I decided to change my theme to a different one, and now all of the colors match the image that are shown as examples. At least I'm making some progress as far as getting the browser more of the way I want it. Of course I'd still like to try out the vivaldihooks modification's but I guess I just don't know exactly what I'm doing as far as getting installed on my computer, I guess the more that I think about it I'm going to take potmeklecbohdan's advice when he said "That's why you don't see it".
David

[den_po]

@potmeklecbohdan said in VivaldiHooks - more useful mods!:

@Davy49 It only shows on background tabs, not on the current one. That's why you don't see it.

Vivaldi tab-progress stuff is broken in different ways. Sometimes progress indicators aren't displayed at all. loading.js hook fixes some of issues.

[Davy49]

@den_po ,
Hi,
If I can just figure out how to utilize what you mentioned, I guess I'm not as tech savvy as I thought I was. I just need to do some more research so I'll be able to figure it out.
David
I'm beginning to wonder if I'm making the process of utilizing vivaldihooks much harder than it needs to be. I've never really utilized the development tools settings, but I think that's where I can use vivaldihooks, I'm just not familiar that much with Javascript files.

[den_po]

Sorry for the delay. For me it usually takes too much time to select how and what to say in the documentation.

https://github.com/justdanpo/VivaldiHooks/wiki/Howto-dev

I still haven't described useful modules, though I've said in a few words how to do a quick analizys.

As an entrypoint here is an example of how we can change side panel width limit in allmost the same way as it's done here https://forum.vivaldi.net/post/368672 but using VivaldiHooks. So my steps:

(call split.js as described in howto-dev)

Search "||260" in modules. Keeping in mind they are reformatted I actually search "|| 260" with a space character before the digits. Ok, this is inside main_main.js.

            }, 64)), ca(this, "limitPanelWidth", e => {
                const t = .618 * window.innerWidth;
                return Math.min(Math.max(e, 260), t) || 260
            }), ca(this, "limitPanelWidth", e => {

ca is defined somewhere above and it implements defineProperty wrapper. This call adds limitPanelWidth function to this and the place we see is inside constructor member of some React class. What class this exactly is? Let's scroll down to render() and find fileName passed to createElement calls.

        render() {
            //skipped
            //...
            return u.a.createElement(na.VelocityComponent, {
                animation: {
                    width: c ? a - b : a
                },
                duration: s[F.kThemeUseAnimation] && !i ? g : 0,
                begin: e => e[0].style.removeProperty("display"),
                __source: {
                    fileName: la,

la itself is defined above

        la = "C:\\new-bot\\new-builder\\workers\\ow32\\build\\vivaldi\\vivapp\\src\\components\\panels\\panel.jsx";

So following the documentation this is "panels_panel" class. Let's write a hook. As the function we want to change is very small I don't call original one and just implement it as I want

//file description

vivaldi.jdhooks.hookClass("panels_panel", oldClass => {
    return class extends oldClass {
        constructor(...e) {
            super(...e) //pass constructor arguments to parent's constructor

            this.limitPanelWidth = width => {
                const newLimit = 100
                return Math.min(Math.max(width, newLimit), .618 * window.innerWidth) || newLimit
            }
        }
    }
})

That's it.

[Davy49]

@den_po I'm still blown away with the amount of help that other vivaldi user's provide, when possible if I can help someone I try and do my best as well. Especially right now I wish that I would have taken the time to learn more about css+javascript, because if I had I could use coding to change some things in the browser. Thanks again for your help & time, please stay safe.
David

[A Former User]

The hook* functions seem to call the callbacks only right after all the V’s internal things are loaded (right?). Would it be possible for you to call them immediately if they’re added later? I think it would help me playing with the possibilities hooks give me (coz I could simply change things from the devtools).

[den_po]

@potmeklecbohdan hookModule callback is called right after the module is initialized - before the first module using it gets its reference and stores it into a variable. We cannot update these stored references after that.
hookClass callback is called when the class is used by React.createElement for the first time and then its result is cached. Actually the result may be a chain of class overrides made by several hookClass calls for the same class name. Technically we could update the cache at runtime but it may cause some bugs. For me the fastest way to reload everything is to press F5 in the console.

[A Former User]

@den_po OK, thanks!