webui: Add Firefox theme for use on Live media #4918

M4rtinK · 2023-07-14T12:59:01Z

The theme upstream is here: https://github.com/garrett/firefox-theme-frame

Its main aim is to shape the Firefox window to the most suitable state on Live images:

has a header bar for window switching
has no tab/status/URL bars
has no browser controls

As Firefox needs the profile folder to be writable, we need to copy the profile template to a writable tempdir & use that as the profile path for Firefox.

To simplify things, we also use the same theme on non Live images for now, with the expectation that a tweaked theme will provided later.

TODO

check the license if fine (https://github.com/garrett/firefox-theme-frame/blob/main/LICENSE) - is this compatible with our GPLv2 + MIT ?
drop the status bubble
drop the tab bar
fix the content not loading

M4rtinK · 2023-07-14T13:12:45Z

So far I've noticed a couple issues with this that will have to be resolved.

On Live images built via the Image builder pipeline, the Web UI shows up ~like we want it:

There are still a couple issues:

you can notice there is a tab bar
some sort of status bubble at the bottom
language list is not populated (we have seen this in regular kiosk mode as well, so this is unrelated)
the page is not clickable (possibly stuck in loading state ? as the status bubble seems to imply something is still being loaded from the server)

This was using the rather early post Python 3.12 live image: https://fedorapeople.org/groups/anaconda/webui_preview_image/x86_64/fedora-preview-live-installer-2023-07-11.iso

Thinking this might be some image related breakage, I've also tried using a regular Fedora Rawhide live image from July 12. This time the page content does not load at all (but its loading the correct page):

HOW TO TEST
The best option is to fetch a Live image - either one from the Image Builder pipeline or even a regular one.

Then you can add the following COPR which has packages corresponding to this PR as of right now:
https://copr.fedorainfracloud.org/coprs/m4rtink/anaconda-webui-firefox-theme/

Once you add the COPR, something like this should replace the on-media Anaconda with the one corresponding to this PR:

sudo dnf install anaconda-999999999 --allowerasing

Alternatively you can fetch the RPMs from the COPR (or build them yourself from the PR), scp them to the machine running your Live image & install them via DNF:

sudo dnf install *.rpm --allowerasing

Then start Anaconda in the usual way - either via its icon in the quick launch menu or via the liveinst script in PATH.

VladimirSlavik · 2023-07-14T13:49:07Z

Why does this contain two themes?

KKoukiou

The default user and live user js code are mostly shared. Can't you create some common file and import it?

M4rtinK · 2023-07-14T14:43:59Z

The default user and live user js code are mostly shared. Can't you create some common file and import it?

They are identical right now, but the expectation is the themes will diverge as we adjust the default (essentially boot.iso) theme, which for example does not need a header bar.

As for sharing code with the theme - I've just copied the theme created by @garrett in https://github.com/garrett/firefox-theme-frame & don't really have any experience with how it is done. So someone with a deeper knowledge of Firefox theming will need to answer this. :)

M4rtinK · 2023-07-14T14:45:52Z

Why does this contain two themes?

The live theme is to be used for the Live images and the default theme is meant for everything else (but mainly boot.iso). Right now the themes are the same for both, as we don't have a boot.iso specific theme yet. In the future the default theme should be adjusted accordingly.

We could also keep using the --kiosk mode for the boot.iso, but that seamed needlessly complex to me & this way we will have some control over how it will look like on the boot iso, unlike with --kiosk where we have basically none and just follow the kiosk mode defaults.

M4rtinK · 2023-07-14T17:10:23Z

/boot-iso --webui

M4rtinK · 2023-07-17T15:02:47Z

Updated the PR to move most of the Firefox theme handling logic to the webui-desktop script, which seems to be a more suitable place for it.

M4rtinK · 2023-07-17T15:21:21Z

Unfortunately still stuck at the Web UI not (fully ?) loading:

M4rtinK · 2023-07-17T15:34:37Z

Updated test instructions:

download a rawhide live image (such as https://kojipkgs.fedoraproject.org/compose/rawhide/Fedora-Rawhide-20230717.n.0/compose/Workstation/x86_64/iso/Fedora-Workstation-Live-x86_64-Rawhide-20230717.n.0.iso)
boot it
on the booted image download tarball with RPMs I've created that correspond to this PR: https://fedorapeople.org/groups/anaconda/webui/temp/rpms/theme_rpms_v1.tar.xz
unpack the tarball
then in the folder containing those RPMs do: sudo dnf install *.rpm --allowerasing

Afterwards start the installer via the liveinst command or via icon.

garrett · 2023-07-17T16:15:18Z

It looks like there are two title bars. First: window manager provided titlebar. Second: CSD with tabs. The theme was made with CSD (client-side decorations) in mind, not the window manager titlebar.

We have two options:

Turn off tab bar entirely and rely on the window manager. However, we could not disable, remove, or hide the close button.
Force CSD mode to remove the window manager titlebar. (But I thought the theme was doing this already? I need to double-check the user.js file, I guess?)

This time the page content does not load at all (but its loading the correct page):

That looks like it's due to a problem in the JS in Anaconda web UI, not in the theme.

I've updated the theme to remove the button, fix the titlebar, and to try harder to make new windows show up.

But after playing with it more, I think a more proper approach would be to hide the tab bar and use the window manager titlebar... but we'd have a close button (unless we use the semi-restricted environment that GNOME Initial Setup does... which may disable the X icon).

KKoukiou · 2023-07-18T10:02:17Z

The crash happens because the buildstamp file is not there.

Is this file supposed to be always there? Should we handle it differently?

garrett · 2023-07-20T06:38:59Z

☑️ I relicensed the theme to MIT, as asked.

VladimirSlavik · 2023-07-20T09:26:31Z

After thinking a bit about the themes, I realized the problem I have is that one is called "default". Perhaps "bootiso" would be better?

M4rtinK · 2023-07-24T11:45:51Z

After thinking a bit about the themes, I realized the problem I have is that one is called "default". Perhaps "bootiso" would be better?

Well, the way it is we kinda need to always have a theme to pick - the live image theme is specifically picked for the Live image & the "default" theme will be used for everything else (which indeed is mostly the boot iso).

M4rtinK · 2023-07-24T15:00:48Z

So this is how it looks like as of today:

The status bubble is gone, but the tab bar is still there - @garrett I guess we still want to get rid of that somehow ?

garrett · 2023-07-25T16:00:42Z

I've updated it @ https://github.com/garrett/firefox-theme-frame

The big changes:

Use window manager provided titlebar (which works around the issue as to why it's showing up duplicate in the live media, and fixes several little corner cases we were hitting)
Support tabs (for when user-initiated tabs are spawned... anything where we're opening up a window via JS or have a target set on a link should open up in a new window, not tab)... there's no way to disable user-requested tabs, so we might as well not break them. Tabs are only shown when there's more than 1 tab. In normal use, Anaconda should only have the web view and titlebar.
The navigation buttons and URL bar when someone focuses it. (This is visually buggy here.) Basically, when someone hits ctrl-L, it'll work. I had to hit it twice. I only added this for accessibility reasons and to show something interactive rather than just disabling it outright. It's not something that will come up in normal installs.
Enable :has() support in Firefox, as it's behind a feature flag. This is just for our special profile and it's used in userChrome.css to be able to affect elements elsewhere in Firefox based on the number of tabs.

The changes are @ garrett/firefox-theme-frame@4bd69e4

TL;DR: I've updated the theme. It should work much better now. (I hope!) 😉

The theme upstream is here: https://github.com/garrett/firefox-theme-frame Its main aim is to shape the Firefox window to the most suitable state on Live images: - has a header bar for window switching - has no tab/status/URL bars - has no browser controls As Firefox needs the profile folder to be writable, we need to copy the profile template to a writable directory & use that as the profile path for Firefox. We also need to make sure profile folders from previous runs (possible on Live) are cleaned up. To simplify things, we also use the same theme on non Live images for now, with the expectation that a tweaked theme will provided later.

M4rtinK · 2023-07-26T12:23:42Z

TL;DR: I've updated the theme. It should work much better now. (I hope!) wink

Thanks! Just updated the PR your the latest version of your theme - will post screenshots in a bit (& will generate a new boot.iso).

M4rtinK · 2023-07-26T12:24:42Z

/boot-iso --webui

VladimirSlavik

Python and bash parts LGTM.

It's a spaghetti monster, but it's flying!

M4rtinK · 2023-07-26T14:18:21Z

M4rtinK · 2023-07-26T14:18:40Z

Looking good IMHO. :)

garrett · 2023-07-26T14:37:39Z

Whew. I'm happy to see the theme working as intended @ #4918 (comment)

It's a spaghetti monster, but it's flying!

🤣

KKoukiou

I have no comments on the css applied. Please attach to the PR the latest screenshot for both live and boot iso.

KKoukiou · 2023-07-26T16:25:48Z

ui/webui/webui-desktop

+# make sure the profile directory exists and is empty
+if [ -d ${FIREFOX_PROFILE_PATH} ]
+then
+    echo "Cleaning up existing Anaconda Firefox profile directory."


In what scenario would the profile directory on /tmp already exist?

If you launch the installer multiple times on Live media - quite a frequent occurrence during debugging & we know from logs attached to bug reports, that users do it quite often in real life, usually when encountering an error and trying again.

In any case, we really should start with empty profile or else I would expect the behavior on followup starts being non-deterministic given the sheer amount of stuff Firefox dumps to the originally empty folder.

M4rtinK · 2023-07-27T13:07:46Z

/kickstart-test --waive webui only

M4rtinK added the webui label Jul 14, 2023

github-actions bot added the f39 label Jul 14, 2023

M4rtinK added the blocked Don't merge this pull request! label Jul 14, 2023

KKoukiou reviewed Jul 14, 2023

View reviewed changes

M4rtinK mentioned this pull request Jul 17, 2023

webui: simplify webui-desktop script #4919

Merged

M4rtinK force-pushed the master-add_custom_firefox_theme branch from db1cff1 to ab8faa7 Compare July 17, 2023 14:59

M4rtinK force-pushed the master-add_custom_firefox_theme branch from ab8faa7 to 3b34335 Compare July 19, 2023 17:13

M4rtinK force-pushed the master-add_custom_firefox_theme branch from 3b34335 to 94cfcab Compare July 20, 2023 14:44

M4rtinK force-pushed the master-add_custom_firefox_theme branch from 94cfcab to bfec820 Compare July 24, 2023 13:49

M4rtinK force-pushed the master-add_custom_firefox_theme branch from bfec820 to 9ecd813 Compare July 25, 2023 13:21

M4rtinK force-pushed the master-add_custom_firefox_theme branch from 9ecd813 to 07b10b1 Compare July 26, 2023 12:22

VladimirSlavik approved these changes Jul 26, 2023

View reviewed changes

KKoukiou approved these changes Jul 26, 2023

View reviewed changes

M4rtinK merged commit cef0a92 into rhinstaller:master Jul 27, 2023
14 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

webui: Add Firefox theme for use on Live media #4918

webui: Add Firefox theme for use on Live media #4918

M4rtinK commented Jul 14, 2023 •

edited

Loading

M4rtinK commented Jul 14, 2023

VladimirSlavik commented Jul 14, 2023

KKoukiou left a comment

M4rtinK commented Jul 14, 2023

M4rtinK commented Jul 14, 2023 •

edited

Loading

M4rtinK commented Jul 14, 2023

M4rtinK commented Jul 17, 2023

M4rtinK commented Jul 17, 2023

M4rtinK commented Jul 17, 2023

garrett commented Jul 17, 2023

KKoukiou commented Jul 18, 2023

garrett commented Jul 20, 2023

VladimirSlavik commented Jul 20, 2023

M4rtinK commented Jul 24, 2023

M4rtinK commented Jul 24, 2023

garrett commented Jul 25, 2023 •

edited

Loading

M4rtinK commented Jul 26, 2023

M4rtinK commented Jul 26, 2023

VladimirSlavik left a comment

M4rtinK commented Jul 26, 2023

M4rtinK commented Jul 26, 2023

garrett commented Jul 26, 2023

KKoukiou left a comment

KKoukiou Jul 26, 2023

M4rtinK Jul 27, 2023

M4rtinK commented Jul 27, 2023

webui: Add Firefox theme for use on Live media #4918

webui: Add Firefox theme for use on Live media #4918

Conversation

M4rtinK commented Jul 14, 2023 • edited Loading

M4rtinK commented Jul 14, 2023

VladimirSlavik commented Jul 14, 2023

KKoukiou left a comment

Choose a reason for hiding this comment

M4rtinK commented Jul 14, 2023

M4rtinK commented Jul 14, 2023 • edited Loading

M4rtinK commented Jul 14, 2023

M4rtinK commented Jul 17, 2023

M4rtinK commented Jul 17, 2023

M4rtinK commented Jul 17, 2023

garrett commented Jul 17, 2023

KKoukiou commented Jul 18, 2023

garrett commented Jul 20, 2023

VladimirSlavik commented Jul 20, 2023

M4rtinK commented Jul 24, 2023

M4rtinK commented Jul 24, 2023

garrett commented Jul 25, 2023 • edited Loading

M4rtinK commented Jul 26, 2023

M4rtinK commented Jul 26, 2023

VladimirSlavik left a comment

Choose a reason for hiding this comment

M4rtinK commented Jul 26, 2023

M4rtinK commented Jul 26, 2023

garrett commented Jul 26, 2023

KKoukiou left a comment

Choose a reason for hiding this comment

KKoukiou Jul 26, 2023

Choose a reason for hiding this comment

M4rtinK Jul 27, 2023

Choose a reason for hiding this comment

M4rtinK commented Jul 27, 2023

M4rtinK commented Jul 14, 2023 •

edited

Loading

M4rtinK commented Jul 14, 2023 •

edited

Loading

garrett commented Jul 25, 2023 •

edited

Loading