Web expert help with bundled patternfly css file?

Project Discussion
1

Fedora Server features Cockpit, a web UI for systems administration. Because it’s a common home use case, I want to include a module which handles Samba (Windows-compatible) network shares. There’s a third-party open source module which does this, and @sgallagh and I have done some work in packaging it up. See this bugzilla entry for details.

In order to package this properly, one of our rules is that we shouldn’t bundle bits of minified javascript libraries — see the guidelines on that. But this package includes a file file-sharing-patternfly.css.gz, which clearly violates that.

Now, Cockpit itself uses Patternfly at the higher level. So I’m not sure exactly what this file does. I solved a similar bundling issue with Font Awesome by just removing the bundled version of the font, and it still works. But if I remove this patterfly file, the UI for the File Sharing pane gets messed up. So it’s doing something important.

Can someone who knows web stuff help out here? Getting this set up to test is relatively easy:

  1. Install Fedora Server in a VM (in Boxes or Virt-Manager)
  2. Look at the address displayed on that server’s console and connect to it from the web browser (not from inside the VM — that’s the whole point).
  3. From the Terminal panel in cockpit, sudo dnf install https://fedorapeople.org/~mattdm/packagereview/cockpit-file-sharing-2.4.1-1.fc35.mattdm.noarch.rpm
  4. Reload the Cockpit page, I think, to make File Sharing show up as an option
  5. See how that looks :slight_smile:
  6. Back in the Terminal pane, look in /usr/share/cockpit/file-sharing/and find the files installed by the package. Normally one wouldn’t edit those “live”, but since this is a test VM, you can mess around and do whatever you want.
  7. Tell me what I need to change to fix the package so I don’t need to include that file!

Thank you!

2

Is it that Samba - Samba : Security vulnerabilities ?

If so, is there a better protocol for sharing files over network already? If I remember correctly the only feature why it superior over anything IP based is that it has LAN autodiscovery with short names.

3

This file being a css, not a javascript library, does this rule still apply?
I took a quick look, and it seems to be a bundle of multiple minified css files.
Part of them are:
normalize.css v3.0.3 | GitHub - necolas/normalize.css: A modern alternative to CSS resets
bootstrap-slider 10.x.x? | GitHub - seiyria/bootstrap-slider: A slider control for Bootstrap 3 & 4.
Datetimepicker 4.7.14 | GitHub - Eonasdan/tempus-dominus: A powerful Date/time picker widget.
and Patternfly + Font Awesome 4.7.0

Don’t know if that help.

4

Oh, good point. It seems like maybe technically not, but still probably a good idea.

5

Is there a way to do something which records which parts of a CSS file (or files) are actually used in a browser session?

6

Web developer tools might help. I do not know if it can be automated to record to file.

For CSS files:

  1. $ firefox
  2. open new tab
  3. Tools – Browser Tools - Web Developer Tools # or toggle with shortcut Ctrl+Shift+i
  4. go to “Network” tab ; for reference: in “Console” tab warnings and errors will be printed
  5. Disable Cache # in upper right corner of sub-window; or start private mode window; or clean cache manually
  6. load website
  7. to filter by file type to see only loaded CSS files: switch from [All] to [CSS]

For CSS parts:

  1. steps 1 to 3 from above
  2. go to “Inspector” tab
  3. press Ctrl+Shift+c (or press icon left to Inspector tab); select an item
  4. below “Inspector” tab you will see HTML code; line with selected item is highlighted
  5. to the right of the HTML code you will see the used styles; clicking on “${FILE}:${LINE}” will bring you to the specified location in “Style Editor” tab
1 Like