Feature request: ResizeObserverEntry.borderBoxSize Topic is solved

Talk about code development, features, specific bugs, enhancements, patches, and similar things.
Forum rules
Please keep everything here strictly on-topic.
This board is meant for Pale Moon source code development related subjects only like code snippets, patches, specific bugs, git, the repositories, etc.

This is not for tech support! Please do not post tech support questions in the "Development" board!
Please make sure not to use this board for support questions. Please post issues with specific websites, extensions, etc. in the relevant boards for those topics.

Please keep things on-topic as this forum will be used for reference for Pale Moon development. Expect topics that aren't relevant as such to be moved or deleted.
User avatar
seadragon
Hobby Astronomer
Hobby Astronomer
Posts: 20
Joined: 2021-06-18, 04:39

Feature request: ResizeObserverEntry.borderBoxSize

Unread post by seadragon » 2021-06-18, 05:17

Dear Moonchild,

I am a web developer who intends to support Pale Moon browser (as far as I can), so it is delighted to know that you have implemented ResizeObserver. However, in executing the callback it is found that both ResizeObserverEntry.borderBoxSize and contentBoxSize have yet to be implemented, so only contentRect can be used.

In my case, I am trying to simulate a backdrop-filter effect, so I require the element's border-box values. It will be much appreciated if I can access borderBoxSize (rather than call getBoundingClientRect() or manually add its border widths, etc)

Also for the sake of other developers, this deviation from spec (although spec itself is also changing) should be mentioned in the release notes.
- - -
BTW: It would be much convenient if Pale Moon adds support for backdrop-filter, but I believe that is much more difficult.

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35480
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: Feature request: ResizeObserverEntry.borderBoxSize

Unread post by Moonchild » 2021-06-18, 09:54

seadragon wrote:
2021-06-18, 05:17
Also for the sake of other developers, this deviation from spec (although spec itself is also changing) should be mentioned in the release notes.
When I implemented the spec, there was no borderBoxSize. You can hardly expect us to add unknown future spec changes to release notes. We're not clairvoyant :)

I'll have a look at the spec and see if I can align our implementation with the spec changes.

Update: Issue #1783 (UXP)
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35480
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: Feature request: ResizeObserverEntry.borderBoxSize

Unread post by Moonchild » 2021-06-19, 12:12

Do you happen to have a fiddle or something handy that I can use to test my implementation with your intended use?

BY THE WAY... you can make it work now with a simple feature detection and using contentRect if the older spec is in use -- this is documented in a few places on the 'net I found out (which you should do anyway since these properties are still marked experimental even on MDN) and you need to use something special for Chrome anyway because it uses a non-standard array (up to when Chrome enforces their way as the highway and the non-standard will inevitably become standard).

Example for adjusting font sizes based on element size:

Code: Select all

        const resizeObserver = new ResizeObserver(entries => {
          for (let entry of entries) {
            if(entry.contentBoxSize) { // <- test if the newer spec is supported
              // Checking for chrome as using a non-standard array
              if (entry.contentBoxSize[0]) {
                FirstElement.style.fontSize = Math.max(1.5, entry.contentBoxSize[0].inlineSize/200) + 'rem';
                SecondElement.style.fontSize = Math.max(1, entry.contentBoxSize[0].inlineSize/600) + 'rem';
              } else {
                FirstElement.style.fontSize = Math.max(1.5, entry.contentBoxSize.inlineSize/200) + 'rem';
                FirstElement.style.fontSize = Math.max(1, entry.contentBoxSize.inlineSize/600) + 'rem';
              }
              
            } else {
              //contentBoxSize not supported, older spec uses contentRect.
              FirstElement.style.fontSize = Math.max(1.5, entry.contentRect.width/200) + 'rem';
              FirstElement.style.fontSize = Math.max(1, entry.contentRect.width/600) + 'rem';
            }
          }
        });
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

User avatar
seadragon
Hobby Astronomer
Hobby Astronomer
Posts: 20
Joined: 2021-06-18, 04:39

Re: Feature request: ResizeObserverEntry.borderBoxSize

Unread post by seadragon » 2021-06-19, 14:34

This demo may help you check borderBoxSize implementation! It is taken from https://bugzilla.mozilla.org/show_bug.cgi?id=1689645 (I modify it a little) Open the console and it prints out entry.borderBoxSize

Expected behavior: returns an object contains properties blockSize and inlineSize, or an array of one such object (It's up to you which version you prefer)

Pale Moon v29.2.1: returns undefined
Moonchild wrote:
2021-06-19, 12:12
you can make it work now with a simple feature detection and using contentRect if the older spec is in use
Exactly! I have already make my site work using contentRect. My case have a fixed border width, which is simple to deal with.

Perhaps I will keep using contentRect in the future... Every browser that supports ResizeObserver supports it, and even it may be deprecated, it is just impossible for Firefox or Chrome to remove it :P
Moonchild wrote:
2021-06-19, 12:12
your intended use
My intended use case may be off-topic: to have a "frosted glass" effect on the fixed header. Most naturally, this is a use case for CSS backdrop-filter. I have achieved a near-perfect similar effect for Firefox and Pale Moon, using SVG filters and -moz-element property. I may explain my solution later in another topic. (However, my solution will not work when the header changes its height, so I need ResizeObserver.)
Attachments
ResizeObserverEntry.borderBoxSize.zip
demo
(708 Bytes) Downloaded 10 times

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 35480
Joined: 2011-08-28, 17:27
Location: Motala, SE
Contact:

Re: Feature request: ResizeObserverEntry.borderBoxSize

Unread post by Moonchild » 2021-06-20, 19:54

Thanks, I've finished the implementation and tested it with your test case; seems to all be working.
The current unstable build has this in, please let me know if there are any issues that I might have missed.
"Sometimes, the best way to get what you want is to be a good person." -- Louis Rossmann
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

User avatar
seadragon
Hobby Astronomer
Hobby Astronomer
Posts: 20
Joined: 2021-06-18, 04:39

Re: Feature request: ResizeObserverEntry.borderBoxSize

Unread post by seadragon » 2021-06-20, 21:17

Thanks, Mr. Moonchild! This implementation seems to work perfectly. I also try different writing-modes and it works as expected.

New Tobin Paradigm

Re: Feature request: ResizeObserverEntry.borderBoxSize

Unread post by New Tobin Paradigm » 2021-06-20, 21:19

Awesome, no idea how much we need collectively a developmental victory like this.

Locked