Zoom, Find in Page & other actions in Web Panels

mdoverl

I figured out why I have white boxes, because I'm using a dark theme. Once I changed to a light theme, I was able to see most buttons except invert, mute, and search.

mdoverl

@mdoverl said in Zoom, Find in Page & other actions in Web Panels:

I figured out why I have white boxes, because I'm using a dark theme. Once I changed to a light theme, I was able to see most buttons except invert, mute, and search.

I was able to fix this. At some point, I replaced a line of code that was suggested somewhere in the comments. I re-downloaded the latest script and all is fine. But I wish I could have my Dark Mode. I will look through the code and see if there is an option to change text color.

mdoverl

@mdoverl said in Zoom, Find in Page & other actions in Web Panels:

@mdoverl said in Zoom, Find in Page & other actions in Web Panels:

I figured out why I have white boxes, because I'm using a dark theme. Once I changed to a light theme, I was able to see most buttons except invert, mute, and search.

I was able to fix this. At some point, I replaced a line of code that was suggested somewhere in the comments. I re-downloaded the latest script and all is fine. But I wish I could have my Dark Mode. I will look through the code and see if there is an option to change text color.

LOL, well I guess downloaded the latest script solved this also, the text was white after switching back to Dark Mode.

RockGore

Any way to make it remember the zoom of each webpanel?

LonM

@RockGore That isn't possible without an extreme amount of work.

IsraOtz

Hello! I'm totally a newbie to linux and I don't know how to add this mod to my Browser. ( ... please, HELP)

In fact I also wanted to ask the following:
Will there be any chance that, when opened, the web panel will "overlap" with the current web page, without it being resized? Similar Opera does, maybe with switcheable button?

Thank you very much in advance!!

A Former User

@IsraOtz See Modding Vivaldi.

belh4wk

the zoom seems to reset when the page being displayed is refreshed due to clicking a link or anything, is there a way to prevent this? or am i missing something?

also, brilliant mod!

LonM

@belh4wk Unfortunately I would need to rewrite a lot of the mod to get the zoom to stay.

belh4wk

@LonM no problemo, appreciate your efforts though, super handy

i tried tinkering with the values in the mod file itself, hoping i would be able to hardcode the zoom factor (i'd like to have it set to a default of 75%) but alas, that doesn't seem to stick either

i edited this for more granularity:
const ZOOM_STEP = 0.05; /Step amount. 0.1 is 5%/ >> which works

but then this, doesn't seem to stick:
zoom_reset: {
title: "Set zoom to 70%", >> in stead of 100
script: function(target, webview){
changeZoom(webview, 1);
},
display: "70%", >> in stead of 100
display_class: "zoom-reset"
},

but that's related to the reset zoom function

could you tell me where i should be looking to set the default zoom to 75%? perhaps?

LonM

@belh4wk To get it working, look at this bit:

zoom_reset: {
    title: "Set zoom to 70%", >> in stead of 100
    script: function(target, webview){
        changeZoom(webview, 1); <<< HERE
    },
...

That line basically says "Change the zoom of the webview (open panel) to 1 (100%)".

If you want it to be 70, change this line to:

        changeZoom(webview, 0.7);

Hope this helps!

belh4wk

@LonM it sure does, brilliant, thanks for that!

belh4wk

@LonM sorry to spam like this, but that pertains to the reset, where would i have to look to set the default?

is that this bit:

function updateZoomLabel(webview){
        const panelZoom = webview.parentElement.parentElement.querySelector(".zoom-reset");
        if(!panelZoom){
            console.error("[lonm-panel-actions] Panel Zoom Label Missing");
            return;
        }
        webview.getZoom(current => {
            const newValue = Math.floor(current * 100);   <<< here?
            panelZoom.firstChild.innerHTML = newValue + "%";
        });
    }

LonM

@belh4wk No, unfortunately setting the "default" (the zoom level the page initially loads with) is very tricky. There's not any pre-existing code in the mod that can be used for that.

It might be possible to write some, but I never got around to it. It would involve having to listen to the webview to see whenever it loads a page, or maybe just continually setting the zoom on a timer - but neither of those are pleasant to write.

belh4wk

@LonM cool, i'll look into what i can sort out then

thanks for your time Lon, and again, really appreciate your efforts!

belh4wk

got it to work, using info found here:
https://stackoverflow.com/questions/17253997/how-to-detect-in-javascript-if-a-page-was-loaded-in-a-chrome-webview

/**
 * upgrade a web panel by adding controls, listeners, etc.
 * @param panel dom node
 */
function upgradePanel(panel){
    addPanelControls(panel);
    const webview = panel.querySelector("webview");
    webview.addEventListener("zoomchange", () => {
        updateZoomLabel(webview);
    });
    webview.addEventListener("loadcommit", () => {
        updateZoomLabel(webview);
    });
   /**
   *the 3 lines below did the trick
   */
    webview.addEventListener("loadstop", () => {
        changeZoom(webview, 0.7);    <<< same as you instructed, change 0.7 to 1 to change to 100%
    });
}

if anyone's interested in adding that functionality

edit: tested with a number of sites, seems to work like a charm too, so it's actually useful

@LonM feel free to add it to your full script

LonM

@belh4wk Good find. I added it to the main file.

belh4wk

@LonM said in Zoom, Find in Page & other actions in Web Panels:

@belh4wk Good find. I added it to the main file.

thanks bud

just had a look at it, i see you cleaned it up a bit, mine was a bit quick and dirty indeed
i'll look into adding an additional field to set the default value (for ease of access purposes)

i've updated the code a bit again and added a DEFAULT_ZOOM_LBL constant, just below the DEFAULT_ZOOM constant, like so:

const ZOOM_STEP = 0.05; /*Step amount. 0.1 is 10%*/
const DEFAULT_ZOOM = 0.7; /* what should the default zoom be for panels */
const DEFAULT_ZOOM_LBL = DEFAULT_ZOOM * 100 ; /* calculates the value for the label based on the setting for the DEFAULT_ZOOM */

and then used that constant for the zoom reset as well, like so:

zoom_reset: {
            title: "Reset zoom to default %",
            script: function(target, webview){
                changeZoom(webview, DEFAULT_ZOOM);
            },
            display: DEFAULT_ZOOM_LBL,    <<< here
            display_class: "zoom-reset"

i'll get to work on the additional control to set it through the GUI and keep you posted

LonM

@belh4wk If you want to work on adding changes, feel free to fork and make pull requests for the mod on github: https://github.com/LonMcGregor/VivaldiMods/blob/master/mods/panel_actions.js

That would make it easier to merge suggested changes.

IsraOtz

@Gwen-Dragon
Thanks so much! you where rigth!
The only thing i am missmatching is how to add or install this MOD into Vivaldi! If you can help me, thanks in advance!