10: UI

[User42]

Hi,

thank you for your hard work on a great addon!

I very much appreciate the effort that you took for redesigning the UI.
Since there was the indication that we should take to the forums for suggestions, I'd like to start collecting some ideas.

Having the hosts / sources listed vertically and options for each of them horizontally is IMHO a considerable improvement.
However, personally I've been using the "allow temporarily" feature heavily in the past.
Unfortunately, this is now 3 clicks away instead of 2 ("NoScript icon, trustworthy, clock" instead of "NoScript icon, allow temporarily").
Since I often had to do a whole sequence of "allowing temporarily" to get a website working, this increases click effort by 1,5x.
Maybe it could be possible to bring back a 2-click solution for this in the future? That would be really great.

Edit: In fact, it would be optimal to be able to quickly temporarily (dis-)allow a whole batch of hosts in one go.
This could be quicker with the new icon based layout as all the buttons could be in one column. With NoScript 5.X, you had to sort out which of the pair of rows to click. But it was still possible with one click per host once the menu was open.
Currently, you need two clicks per host once the menu is open.

Just my 2-cents. Btw. I'm not sure whether I refer to the English labels correctly.

Keep up the good work!

[mutik]

Hi,

New popup menu is not entirely intuitive for me. I'd love to see option to switch menu layout from "new" to let's say "classic" which blends nicely with native Firefox dialogs.

Made some CSS/HTML tinkering in NS code to show what I have in mind by saying "classic": https://prnt.sc/hdeevr. When NS hits github and you'll need some spare hands I can help writing that code.

PS. Thanks for creating NS

[jawz101]

Hi,

New popup menu is not entirely intuitive for me. I'd love to see option to switch menu layout from "new" to let's say "classic" which blends nicely with native Firefox dialogs.

Made some CSS/HTML tinkering in NS code to show what I have in mind by saying "classic": https://prnt.sc/hdeevr. When NS hits github and you'll need some spare hands I can help writing that code.

PS. Thanks for creating NS

in your screenshot, how do you toggle amongst default, trusted, untrusted, custom.? Does the leftmost icon toggle amongst the 4 states?

If so, I like your layout, though I've never actually clicked "Allow all this page" in NoScript Classic. I've temporarily allowed but I've never seen the reason to go ahead and allow everything on a page unless it's something temporary I guess.

If I draw something up (very crudely) could I run it by you? I still think it needs a few things

[mutik]

in your screenshot, how do you toggle amongst default, trusted, untrusted, custom.? Does the leftmost icon toggle amongst the 4 states?

If so, I like your layout, though I've never actually clicked "Allow all this page" in NoScript Classic. I've temporarily allowed but I've never seen the reason to go ahead and allow everything on a page unless it's something temporary I guess.

If I draw something up (very crudely) could I run it by you? I still think it needs a few things

It's not there in posted layout, but I wanted to make sub pages which slide on click like in main Firefox menu - those would have all "Custom" options per site. That "more-than-a-mockup" layout posted earlier was just my attempt to see if it's possible to bring similar layout to classic NS in webExtensions world.

Now waiting for Giorgios mockup of improved UI (can't recall where but I've read he's preparing such thing), then I'll decide what to do. For the time being might prepare functional example (html/css/js) of full menu.

PS. Will explore utilizing builtin sidebar to display full NS options. I know web extensions API allows to use it somehow, but never wrote extension in my life so will take few days.

[jawz101]

PS. Will explore utilizing builtin sidebar to display full NS options. I know web extensions API allows to use it somehow, but never wrote extension in my life so will take few days.

My only concern is Firefox for Android wouldn't support sidebar functionality so it may result in more complexity. It may be the reason he went with the click-and-show-the-extra-permissions thingy (script,object,media,etc.)

I haven't written one either. I think that might be a good thing, though.

You also couldn't support contextMenus on FFox for Android either https://developer.mozilla.org/en-US/Add ... nd_Android

[Mistame]

I like how your example sticks to the basic design of Firefox's UI. The menu and header are simple and yet elegant. The slide-in option might be best for that type of menu, assuming it's done right. Click a row, the settings for that row slide in, adjust it and save, then slide back out. The three menu items (global, allow, etc) should have icons (preferably newer ones because the old ones are, well, old). The only other thing I'd add is a footer with the add-on name and version number.

[mutik]

I've made semi-working example (will improve it in few days). Feel free to check it out and comment any improvements: http://mutik.erley.org/ns/. Tried for it to be zoom friendly (tested @ 300% as well, all icons are svg)

[Mistame]

Going to be honest, your previous iteration was better-looking (and probably more user-friendly), with the options, reload, and close at the top.

[mutik]

Going to be honest, your previous iteration was better-looking (and probably more user-friendly), with the options, reload, and close at the top.

This is no problem at all to make it like before, first attempt in browser was made as close as possible to Firefox native dialogs.

Edit: Changed layout to resemble more closely my first attempt. It's online now.

[Mistame]

That looks really good. I like that you've separated the "Default" state from those that have explicit settings. The placement, etc, is really good. Just minor tweaks and not sure what are all possible:

- Use icons like posted here: https://forums.informaction.com/viewtop ... 10&t=23751, where the icons for the permissions all have the "S" but with varying accents to identify the state: A small gear for Custom, the Circle+Slash for Default, some variation on the Circle+Slash (or Circle+X) for Untrusted (explicitly blocked), a small green Check for Trusted (explicitly allowed) and obviously, a small clock for temporarily allowed. That last icon can be used for the "Temporarily Allow All This Page" option with "Default" icon for "Remove Temporary Permissions".
- For the settings for each domain, rather than using an ellipses (...), use a pencil, gear or something similar.
- Given the functionality, you'll need to include the HTTP/HTTPS icon (ideally, faded gray (20% opacity black) if unset or HTTP is unavailable, green if explicitly set as HTTPS only, red if explicitly set to allow HTTP or HTTPS). It should be to the right of the domain, but left of the "edit" button for the domain. Again, I'd use the Lock icon from the post above.
- Change the footer background color to match the UI's "form" color of the current theme (light gray for default).
- If possible, allowed the explicit settings to be collapsible or inset a nested menu, to clean up the list on pages with a lot of external scripts.
- Add a help icon/button on the right side of the footer that links to a (hopefully) future guide for use.

All in all, I really like that layout. I wish more add-ons would use a similar style. I may just have to do some hackery on my end just to get some consistency. Someone really should write a generic library/API for add-on authors to use consistent pop-ups/menus.

P.S. I'm wondering what glyph the default UI uses. Are they SVG files included with Firefox or something? I want to add some icons to my menus. :p

[mutik]

I'm wondering what glyph the default UI uses. Are they SVG files included with Firefox or something? I want to add some icons to my menus. :p

All are SVG. For that example I've used two of builtin icons (reload and options). The rest was done very fast in Inkscape - just some circle and few lines. Tried to use some sort of generic icons instead of old NS ones to blend them better with Firefox UI.

Most of your remarks can be done probably. I'm a bit skeptical about some of icons from post you've linked - they look nice on screenshots because it's zoomed/high DPI. Not so sure about zoomed out to 100% + 100% DPI setting in Windows. That's why I've tried to come up with very generic icons which will look good when displayed @ 100% (most non 4K desktop displays). There is nothing wrong with having 2-3 sets of icons as well and let user pick preferred one from options - just few more svg files in zip.

[Mistame]

He stated that they were SVG, so the size issue really isn't one. Thanks for the info, though.

[jawz101]

@mutik - I'm really digging your mockup!

http://mutik.erley.org/ns/

It looks like it's meant to be built into Firefox itself. I really hope @Giorgio sees this because it would be a truly clever design choice.

[mutik]

@jawz101
I've added second dialog with textual states of each domain, similar to what you proposed in spreasheet. Take a look, might be more to your tastes.

cheers

[terabit8]

I've made semi-working example (will improve it in few days). Feel free to check it out and comment any improvements: http://mutik.erley.org/ns/. Tried for it to be zoom friendly (tested @ 300% as well, all icons are svg)

This looks like a nice, simple, clear, easy to use interface. Ik like that it is simplistic en looks very consistent to native firefox options dialogue boxes.

I hope that this design or something based on this design makes it to a future update of noscript because, and I'm sorry to say this, the current UI is horrible (hard on the eye, very confusing, not very intuitive,..).
You earned a beer my friend!
Now where are the upvote buttons?