Media marquee

[LonMcGregor]

Currently uses a marquee. Marquees are not supported elements, so they only kind of work. As a result it's very buggy, and has a lot of hacks to make it work.

Replace this with a CSS+HTML solution instead before general release.

[LonMcGregor]

Alternative idea for experimentation: Wrap the .title in a span that animates its interior.

This may crash the UI depending on the selectors used by vivaldi internally, but if it works might offer a simpler solution.

On the other hand, adding my own marquee element and updating the title as needed is likely to be safer and relies more on the normal chrome.tabs.* api

[LonMcGregor]

Nope. Wrapping .title in another span splashes the UI.

[LonMcGregor]

animating a proper marquee in css is hard, especially when you have to account for nice shadows around the edges

[LonMcGregor]

I mucked up the apng recording loop but I managed to get this far:

This is with a scroll-to-show-all, then start back at the beginning.

I can also use a simple translateX from -100% to 100%, but the issue here is that the 100% counts from the full width of the text, which means for very long texts it stays beyond the edge of the marquee for a long time.

A proper marquee immediately scrolls in from the right as the final character passes beyond the left.

This seems difficult to achieve. I can use the left position property at 100%, this uses the parent width, but then I can do that for -100%, as if the text is very long it doesn't fully scroll to the left before the animation loops.

[LonMcGregor]

Do I need to scroll the whole way? Could I instead try something like this:

Original Title: Alpine Skyline · Pascal Michael Stiefel - Deezer Visible Space Alpine Skyline · Pascal M Marquee Text: Alpine Skyline · Pascal Michael Stiefel - Deezer Alpine Skyline · Pascal Michael Stiefel - Deezer

Then, scroll the text as a marquee until it wraps around, then the repeated text picks up. When the animation stops, the repeated text is at the same position as the start of the first text, so it gets a perfect loop.

Right now there's a very large bit of blank space between loops regardless of which scrolling method you use.

[LonMcGregor]

Needs to support tab stacks

[LonMcGregor]

If the text is small enough to all fit, don't use the marquee / don't animate it