[Enhacement] UI

[iWARR]

Hello, I like your idea to give people good instruments for imroving their security over web. So, I decide made some propose to you, how to make user experience better.

[iWARR]

Backup string example for this design (What APIs has been blocked):

[{"p":"*.youtube.com","s":"CPT":[1],"STR":[2],"CRE":[7,16,19],"NTW":[1-3,5,8],"PST":[1,2,8-11],"MSC":[3,4],"TMG":[2,4,5,7],"MFH":[2,4,7-11],"GFX":[1,3,4],"HWR":[1-8]}]

This enumeration and syntax it's just a suggestion, one of the possible variants to discuss. Or not discuss and fix this proposed UI (if you will like it, of course) showing numbers from existing enumeration.

Benefits:

• Long live for the rest of rules, if one of the API's sections have been changed (if APIs incomes/gone). The rest of rules will stay untouched (there is no need to recalculate rule numbers in other sections). • More eye-candy, more clear view is enough to make a couple of manual corrections in the txt-editor. • Shorter record form [1-8]

Disadvantages:

• Same numbers for same host in search results. That's not good. Existing enumeration [1,2,3,4, ... ,80] is better for mass "Search+Replace" corrections. • Diapasone record form [1-8] is unsearchable inside, so it's doubtful for automatization tasks.

---

Of course, my main message is not about of the record form for the rules, but of improving the UI. If you are inerested in, I'll explain other features I mean there and there, and why.

---

P.S. This interface is just a draft (picture), because I'm not a progammer. I've remade it for you, so if you like this idea, you may create a code for it. My best wishes to you.

[iWARR]

• Static Controls

The main goal of this UI is making main controls always visible and static. Left part controls, Tabs and Pattern address bar must be static, without any global scrolling.

• Compact view

Much, much more compact view (but still not overloaded) to have ability make more changes at once, without scrolling.

• Combined contorls (all-in-one-place)

• Active address bar

Here you can: Type / Add a new pattern / Allow all (delete all blocking flags) or take a look at chosen existing rule (in correspondent color). Informative colors: see quickly, which level of blocking is currently active for chosen domain.

Pattern color matches to current level of blocking (same as chosen [Color Profile]). All other (changed / specific) sets of rules appear as black-colored name in the Pattern bar.

• Suggested config : [Color Profiles]

[Reset] - Author settings, out of the box. Any time you can back to preinstalled settings. Blue color appears for the current[Color Profile]. It's just an eye-catch marker, which help you a bit.

[Save] - For saving changed (customized) set of rules as base for the current [Color Profile].

[Color Profile] - Main switch to the wanted level of blocking

For newly added patten you have to start from pressing one of the colored profiles. All [Reset] and [Save] buttons will be inactive. At this start point [Color Profile] = [Reset] configuration from the author.

You can change base configuration for the current [Color Profile] adding/removing API flags.

If any flags were added/removed, the button [Save] will appear as active. Pattern color goes to black, but you see the [Color Profile] button still pressed.

Pressing [Save] will set your new config as base [Color Profile] for future needs. Pattern color will change again from black to current [Color Profile].

[Default] green color profile may become a good choice for "more compatible, less safe mode" https://github.com/snyderp/web-api-manager/issues/73

• You can't mix saving or resetting with different colors (levels).

You always have to start from choosing [Color Profile] - global level of blocking. So, app will understand and keep corresponding profile/color/level until you want switch domain to another [Color Profile] globally. So, everything begins from choosing [Color Profile], this is important.

• Easily drag mouse to top or bottom within the thin line in the middle of Permitting rules / Blocking rules. Open more space for the list you working with.

• Baloons

Hep baloons everywere with short, but informative description. Blue info may also being opened in a new browser tab and goes to the page with full description (existing scenario).