cockpit hacking / customzing for newbies not exactly working well

[frankreinprecht]

Hey everyone,

I'm struggeling with some things, when trying to customize cockpit.

The bigger picture here is, that I'm trying to migrate a configuration (branding.css) for cockpit from Debian 10 to Debian 12, which isn't working out as it should. Debian 10 looks good, but on 12 with the new version the branding.css settings are not applied as intended.

I have tried to start as described in hacking.md, just without a toolbox container as I use a VM anyway, so have cockpit installed on the machine per apt-get from the debian repos, which offers version 287-1 (should be fine, no need for the latest and greatest version).

So a few things I'd like to ask...

1. if build.js shows "ERROR The build was canceled" can I see a log or the reason for the error somewhere or do I need to enable the verbose debug logging for this as described in hacking.md under "debug logging / running cockpit processes under a debugger"?

2. I set up:
   ln -s $(pwd)/dist ~/.local/share/cockpit
   to have cockpit use my new code from build.js, but login.html is still taken from /usr/share/cockpit?
   "Development"-package (with playground and such) for example is taken from ~/.local/share and shown after a login with my normal user (not root), but changing login.html does not reflect on reloading localhost:9090. (build.js -w notices changes and starts a rebuild)

3. As a very specific issue of mine, I'm trying to position the login div at the bottom of the site, which doesn't work.
   When inspecting the page I see that container cannot be positioned, because it's position-property is "static".
   I searched through the code of login.html, login.scss and login.js without any luck to find, where this comes from?
   So the setting from my custom branding.css is ignored and I can't get it working.

Target design:

Current result:

Many thanks for taking time to look into this!
Frank

[martinpitt]

I have tried to start as described in hacking.md, just without a toolbox container as I use a VM anyway,

Note that the toolbox isn't for running Cockpit, but for building it and running tests. Running needs to happen in a VM indeed, either our test system (what you get with test/image-prepare) or your custom one.

ERROR The build was canceled

That probably just means that it detected that you changed the source file, and got more than one inotify event for it. It should still rebuild, and tell you "Build finished", does it? Sorry, this is indeed not an ideal message.

I set up: ln -s $(pwd)/dist ~/.local/share/cockpit to have cockpit use my new code from build.js, but login.html is still taken from /usr/share/cockpit?

The login cannot be taken from a home dir -- at that point cockpit doesn't yet know which user 😁 See https://github.com/cockpit-project/cockpit/blob/main/HACKING.md#working-on-your-local-machine-web-server how to test that on your local machine, or use ./build.js -r <vmname> static to rsync the login page to some test VM.

I'm afraid I don't know about the "static" position CSS question.

[frankreinprecht]

Thank you Martin.

No need for sorry, things are tricky often enough, but knowledge helps. ;)
It builds indeed, just thought it may skip or leaves things out and wanted to know details, so I can fix the causing issue probably.

I tried the mount bind way to test changes, but for some reason I get a broken page with most of the elements hidden for the login page, hence my question about this. Tinkering with a symbolic link from /usr/share/cockpit/static to ~./local/share/cockpit/static, it's own dedicated dev directory below a path with generous permissions or even copying the changed files over to /usr/share/cockpit/static gave me the same result, so thought I miss something.
I'll set up another VM and try with ./build.js -r.

About the position CSS I will ask in the webdev team, they might have an idea. As I'm (just) the debian package builder, this is not my strong side of coding.

(Update: position:static is the default set by the browser, if no setting is given by CSS. I was able to get this working by setting position:absolute in branding.css.)

Have a good start into the week and best regards,
Frank