10: UI

Bug reports and enhancement requests
User42
Posts: 3
Joined: Tue Nov 21, 2017 8:50 am

10: UI

Post by User42 » Tue Nov 21, 2017 9:13 am

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!
Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0

mutik
Posts: 7
Joined: Tue Nov 21, 2017 5:09 pm

UI Feature Request - Classic

Post by mutik » Tue Nov 21, 2017 5:24 pm

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
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:55.0) Gecko/20100101 Firefox/55.2.2 Waterfox/55.2.2

jawz101
Senior Member
Posts: 68
Joined: Sun Jul 10, 2011 11:13 pm

Re: UI Feature Request - Classic

Post by jawz101 » Wed Nov 22, 2017 4:26 am

mutik wrote: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
Mozilla/5.0 (X11; Linux x86_64; rv:57.0) Gecko/20100101 Firefox/57.0

mutik
Posts: 7
Joined: Tue Nov 21, 2017 5:09 pm

Re: UI Feature Request - Classic

Post by mutik » Wed Nov 22, 2017 3:36 pm

jawz101 wrote: 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.
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0

jawz101
Senior Member
Posts: 68
Joined: Sun Jul 10, 2011 11:13 pm

Re: UI Feature Request - Classic

Post by jawz101 » Wed Nov 22, 2017 10:33 pm

mutik wrote: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
Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0

Mistame
Junior Member
Posts: 28
Joined: Tue Nov 21, 2017 5:47 pm

Re: 10: UI

Post by Mistame » Sat Nov 25, 2017 2:22 am

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.
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0

mutik
Posts: 7
Joined: Tue Nov 21, 2017 5:09 pm

Re: 10: UI

Post by mutik » Sat Nov 25, 2017 6:32 pm

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)
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0

Mistame
Junior Member
Posts: 28
Joined: Tue Nov 21, 2017 5:47 pm

Re: 10: UI

Post by Mistame » Sat Nov 25, 2017 8:13 pm

Going to be honest, your previous iteration was better-looking (and probably more user-friendly), with the options, reload, and close at the top.
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0

mutik
Posts: 7
Joined: Tue Nov 21, 2017 5:09 pm

Re: 10: UI

Post by mutik » Sat Nov 25, 2017 8:53 pm

Mistame wrote: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.
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0

Mistame
Junior Member
Posts: 28
Joined: Tue Nov 21, 2017 5:47 pm

Re: 10: UI

Post by Mistame » Sat Nov 25, 2017 10:27 pm

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
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0

mutik
Posts: 7
Joined: Tue Nov 21, 2017 5:09 pm

Re: 10: UI

Post by mutik » Sat Nov 25, 2017 11:01 pm

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.
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0

Mistame
Junior Member
Posts: 28
Joined: Tue Nov 21, 2017 5:47 pm

Re: 10: UI

Post by Mistame » Sat Nov 25, 2017 11:35 pm

He stated that they were SVG, so the size issue really isn't one. Thanks for the info, though. :)
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0

jawz101
Senior Member
Posts: 68
Joined: Sun Jul 10, 2011 11:13 pm

Re: 10: UI

Post by jawz101 » Sun Nov 26, 2017 1:02 am

@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.
Mozilla/5.0 (X11; Linux x86_64; rv:57.0) Gecko/20100101 Firefox/57.0

mutik
Posts: 7
Joined: Tue Nov 21, 2017 5:09 pm

Re: 10: UI

Post by mutik » Sun Nov 26, 2017 5:50 pm

@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
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0

terabit8
Posts: 1
Joined: Sun Nov 26, 2017 11:00 pm

Re: 10: UI

Post by terabit8 » Sun Nov 26, 2017 11:16 pm

mutik wrote: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?
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0

Post Reply