Adjust and group options style with headers like Firefox #43

[ongspxm]

closes #43

Currently the options page is not inline with the style guide used by 
firefox's setting pages (e.g. `about:preferences`).

Let's update the option page to use similar styles and at the same 
time, add some grouping to the options to enhance the page.

[rugk]

Hey, that already looks promising. It generally still feels a little "compressed", i.e. some spacing is missing, but it looks good so far.

However, generally, why not keep the ul->li structure? It makes many sense semantically. You can still put each one into sections then.

[rugk]

Note the details may actually depend on #97, respectivly merging #97 would increase familarily a lot, too, but as you see this is blocked for several reasons.

[ongspxm]

Note the details may actually depend on #97, respectivly merging #97 would increase familarily a lot, too, but as you see this is blocked for several reasons.

okay, i will go and take a look

[rugk]

No, that was not how I meant it. That was purely informational, and you can ignore #97. Actually, solving #97 is a totally seperate task, so just keep this PR here, as it is. #97 can be merged after/seperately or none at all afterwards.

[ongspxm]

No, that was not how I meant it. That was purely informational, and you can ignore

Do you prefer to use browser-style?

[rugk]

No, as said, this is the task of #97 and #44, so do not add this. Reasons are stated in #97.

[ongspxm]

@rugk ready for review

[ongspxm]

I used title to refer to the h1 text, this is one of the subtitles, so i used the current naming convention omstead

[rugk]

So @ongspxm I just noticed I actually did not thank you for your first contribution here. (Just noticed it, sorry.)
So thanks for your first contribution to this project! 🎉 👍
I hope you'll like this project and enjoy hacking on it… 😃

---

So some more general things:

• from a visual look (and comparison to FF settings) I consider this still be a little to light (or, rather, it looks almost blurred and not as sharp as FF settings) and the bottom-margin after subheadings seems to be a little small and makes it all look quite compressed:
  - vs -
• as I said previously, why not keep ul->li structure as before? Using many many divs instead decreasing semantics in the HTML, IMHO? (also keeping accessibility in mind, where it totally makes sense to read options as a list of options)

[rugk]

Sorry, I think you misunderstoff the ul thing. IMHO, you can (and should) still use sections (for each big section or possibly also subsectioon, where a heading is inside), but inside of these still use a "list of options", i.e. ul/li.

E.g. like this:

<section>
    <h1> .... </h1>
    <ul> <!-- option list -->
        <li>...</li>
        ....
    </ul>
</section>

[rugk]

Also noticed the changes here somehow broke the loading & saving of the qrCodeType option - while the qrCodeSize works as expected.

Maybe data-optiongroup and data-type="radiogroup" are needed to be added?

[ongspxm]

Another note: This needs testing on Android, as there the general font-size of the settings is different and there I adjust the design.

For that i need to build the xpi file right? is it just running the build script?

[rugk]

For that i need to build the xpi file right? is it just running the build script?

Yep, you can do. (Note you must run it from the repo dir, i.e. don't cd into scripts.)
Or you just ZIP the whole dir (manifest.json should be in the root), then you may only have some more, unnecessary files. You can follow the official docs on MDN then.

[rugk]

Okay, on the desktop, I think this is really nice now.

As said, needs testing on Android.

Also one last thing:
Maybe we should separate the reset button from the other options, too? As "reset all settings" really does not belong to the other settings?
So an additional separator line here:

As I guess you need to refactor the existing code a little for that (as no h1 is there), please use a a semantically useful HTML tag. (ehm, seperator hr?)

Or does this violate the Photon guide? As I just found a similar case in the Firefox UI here, where the bottom things are kinda unrelated to the rest of the content (this is the bottom of the sync options):

So maybe just adjust it like that, i.e. add some space in between – I am not sure whether that looks decent however, and conveys the feeling that it is separated…? 🤔

---

Also, I just noticed, when a message is displayed: This gab is a little huge, is not it? Maybe we can shrink it a little?

[rugk]

Where did you take this numbers from? Are these somewhat official?

Because if I had to choose a margin/padding for that here, I'd try to align the options with how the other Firefox elements are inset at the top of it?
Is this possible in some way? If so, it may look quite nice as it aligns better into the general UI then…

(And BTW, I predict on Android this can cause issues 😉)

[ongspxm]

this is how it looks without margin, does it looks a little squeezy?

[rugk]

Do you think so?

[ongspxm]

the sides at least

[rugk]

Okay fine. Go with the way you like it best… (maybe even a compromise, i.e. not the "original" 32px or what it was)

[ongspxm]

does it look alright on android?

[rugk]

BTW it looks suprisingly good on Android! I would not have expected that...

Did you change anything for Android? (Note you can use the mobile class. Also note that the current CSS changes the font-size there.)

The only issue I see is that the message bar seems to miss some padding or so at the right - it should not "touch" the right side of the screen, but this is probably not introduced by your PR (needs to be looked at):

[rugk]

LGTM in general however.

[rugk]

So LGTM now finally. I guess we had enough iterations… 😉

Thanks again for the contribution, I think the result looks quite neat. 😃

I guess I'll merge it soon, especially so translators can then add translations for the new strings that have been introduced. 😄