Transparent widget (url)

mtissington

I'm using 7.1.3570.3 (Official Build) (arm64) and I have set all my widgets on the dashboard to transparent.

One of the widgets is webpage or url.
The url is a local file - which I have full control over the styling.

How can I pass the transparency setting to the webpage (url) in the iframe?

Pathduck

@mtissington Hi, this will be difficult I think.

When you add a webpage widget, you get a choice of using the theme variables. These variables can be viewed at:
vivaldi://themecolors

The big problem is that the webview used to actually display the webpage has the standard white background all unstyled web pages have. And you can't (AFAIK) override this with transparency - there would be nothing to show "behind" a web page showing in a browser (in normal cases).

Now you could hack it and set opacity for the whole webview element but that'd mean making all of it more transparent, not just for instance the body background.

You should be able to use any of the theme variables in the webpage though, just not the ones with transparency/alpha channel

Widgets are new in 7.1 and hopefully they will add more options in the future.

mtissington

@Pathduck Thanks - I've ended up just modifying the local html and css to match the Vivaldi theme which is fortunately a static single color background.

Pathduck

@mtissington Just FYI - Vivaldi 7.1 is just around the corner. There's a new feature for web widgets:

For now it seems only some variables are inherited by the widget:
--colorFg --colorBg --colorHighlightFg --colorHighlightBg --radius

Examples of code using it:
https://pathduck.github.io/test/themecolors/

Widget colors are changed depending on the theme:
alt text

mtissington

@Pathduck - To support transparency in the webpage widget (or possibly any user widget) an attribute needs to be added to the parent dom object allowtransparency="true". The built in widgets have this attribute but not the webpage widget.

Pathduck

@mtissington Then you know more than me

Do you have any spec docs (W3C/Mozilla etc) on this property? I can't find anything official.

mtissington

@Pathduck No, but for an iframe to support a transparent url the following is needed <iframe src="transparent.htm" allowtransparency="allowtransparency">

This is currently missing - a bug in the webpage widget?

Pathduck

@mtissington I can't find any offical docs on this property, except some really old SO questions and indications that this was a IE only property and hence outdated.

https://stackoverflow.com/questions/3740700/there-is-no-attribute-allowtransparency

https://webplatform.github.io/docs/html/attributes/allowTransparency/

http://help.dottoro.com/lhjvodln.php

There's no mention of this property on anything I'd consider official:
https://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html#the-iframe-element
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

I also notice now you said:

The built in widgets have this attribute but not the webpage widget.

This is not true - the build-in widgets can support transparency because they are standard div's.

Also, on closer inspection the Dashboard widgets do not use iframes at all - they use webview, specific to Chromium browsers and used to embed webpages.
https://developer.chrome.com/docs/webview

mtissington

@Pathduck Hmm, I came across a page in the last couple of days which showed all modern browsers support it. But now I can't find it - not even in my history - I know I wasn't dreaming ...

Also inspecting the html shows an iframe and not webview...

Pathduck

@mtissington said in Transparent widget (url):

Also inspecting the html shows an iframe and not webview...

What you're seeing is the shadow DOM iframe element inserted by the webview. Shadow DOM can't be styled directly, it would require JS code to change. I suspect that's what the Vivaldi devs are doing to some degree to allow it to inherit the theme variables. But I have no idea if they can make a webview shadow DOM element transparent...

And here's the code for a regular widget, it uses just a regular div element, so transparency is possible, and there's no shadow DOM:

Here's a webpage widget:

mtissington

@Pathduck - thanks for the clarification

Pathduck

@mtissington No worries

I did some more googling, was this the doc you found?
https://stackoverflow.com/questions/35241996/chrome-app-webview-transparent-background

It links to another doc, now gone:
https://developer.chrome.com/apps/tags/webview#allowtransparency

The Archive has it though:
https://web.archive.org/web/20201204151528/https://developer.chrome.com/apps/tags/webview#allowtransparency
Last relevant activity seems to be Dec. 2020, after that it was removed.

The only official docs on webview that I find is:
https://developer.chrome.com/docs/apps/reference/webviewTag
And there's no mention of allowtransparency there.

Chrome/Google changes this stuff around constantly, hard enough for a poor developer to keep track, and I'm not one of those (fortunately)...