Popup mockup #161
Popup mockup #161
Conversation
|
A working mockup of suggested cosmetic and functionality adjustments to the popup. I sloppily hacked all the popup files to get it working. If we decide to implement it, there are obviously cleaner ways to go about it. OTOH, historically, deprecated functionality which still technically works, has been hidden instead of being removed completely. That way, users can re-implement certain aspects of the UI with CSS if they prefer. Either way, cleaner all-around coding is not my strong-suit. Changes: 1.) Checkboxes are removed and enable/disable toggling is switched to SVG power icons 2.) Style-names now encompass their entire entries and are regular clickable links to open their edit pages. 3.) Global disable is also converted to a power icon, with corresponding Stylus icons to differentiate as global. The main reasons I'm suggesting these changes are: 1.) I'm sick of errant clicks/right-clicks in the popup. Whether it's to disable or open an edit page, I'm constantly missing the clickable area, which was poorly implemented as a checkbox/label. 2.) Style-names as regular left-click links are way more convenient for the most commonly used function, and is consistent with behavior in the manager. 3.) Checkboxes still have a place in a modern UI, but they look old-fashioned and awkward paired up directly with SVG icons for the other similar functions. I've left the styling of the new icons pretty minimal. Colors are only added for different disabled states. We could do more with backgrounds/fill colors for the rest of the icons, but we've always opted for fairly monochrome defaults. They're pretty decent and informative as-is IMO. I'm not married to the power icons either, but they look pretty decent to me. I'm already really enjoying these changes to the popup, so I hope we can all get on board with something similar to this version. Check it out and review. @tophf @schomery @Mottie @TayliaM |
|
I think more users will be enabling/disabling styles than editing them, so clicking on the style text should toggle the style, like it does currently. And maybe make the edit and trash can clickable area little wider and brighter on hovered so you get a better sense of what you are doing. One could always use the Tab key to see what is being targeted. I'm not really liking the logo + power icon to disable all styles; it's two icons to accomplish one function. I think it should be the power icon and text saying "Turn off all styles". The disabled icon hover color should be a brighter version of the icon color, not black.
I do agree that right clicks on the text should not open the style in the editor, it is an unexpected behavior and somewhat jarring. |
I edit far more than toggle. Don't you? Making style names into edit links was the original objective. I assume users who have jumped ship are mostly power-users who prefer the extension geared towards actually creating and editing styles, as opposed to the dumbed-down end-user experience of Stylish.
I kinda like it. The big upside of using icons is conserving space, but also to avoid all the messy translation bullshit in the UI. They look the same in any language. Avoiding text altogether is preferable IMO, and the icon serves the purpose of indicating it's global. Without any encouragement whatsoever, I also converted the remaining buttons to icons. All controls are in a much smaller, single row. It looks more modern, saves space, and no weird translation bullshit, although they'll still be available as tooltips. At the very least, it'd still need some finishing touches, and maybe much more than that, but it's the general concept I had in mind. |
|
Sorry, I really don't like the new style list appearance. I mostly agree with Mottie except for rightclicking (it's handy). The enabled state icon must be on the left, and a different one as I've never seen a popular UI with this kind of power icon for toggling a list item. Checkmarks like in classic menus, sliders like in our options page, checkboxes (we can make a larger icon). And graying out the disabled styles would be handy, I use it for years via my custom style, and it would be consistent with the manager. As for the action on leftclick, it can be configurable. |
|
@tophf Try the updated version and tell me everything you don't like about it. =) |
|
Btw, all the actual icons and their placements are up for debate. It's all about the concept of getting rid of checkboxes, buttons, and a bunch of extra text in general. |
|
It's an interesting idea, I also thought about converting actions to icons, but this implementation has issues:
Overall, I'd say such compact layout may be an option, disabled by default unless you manage to come up with something really obvious, great-looking, and easy to use. As for the latter, the toolbar icons could be bigger to simplify clicking/touching, which would require different icons with thinner strokes, I guess. |
Acknowledgement that these types of modifications to the UI could be an improvement is the reaction I was shooting for, really. As for it being optional, yeah of course that's always preferable, but I would hope we could come up with something "really obvious, great-looking, and easy to use", so it could be the new default with an option to revert, like the manager. Ideally, we could eventually extend the whole minimalist/material "icons as controls" concept to the manager and editor. Not like the mishmash of icons and more classic buttons is terrible, but I think the theme would be better if more consistent throughout, and the appearance would also be predictable regardless of language preference. Existing and future translations would still be useful, but utilized as tooltips. I figured the popup was a good place to start, because I'm not crazy about the current functionality, and conserving space in the popup has more of an upside than elsewhere.
Sure. My intention was to mock up a template so it'd be clear what I was talking about. The last few icons were a rush job to finish that template.
Two icons being weird seems to be the general consensus. It was intended to differentiate as global, but if the power icon is only used as global, there'll be no need. That means we'd need a new enabled/disabled icon, or icon set. To me, one of the main objectives is for style-names not to be checkbox labels. It's silly and annoying AF IMO. There's gaps between the actual checkboxes and style names, and all around both. Implementation in the popup is even more abnormal, because ckeckboxes and labels aren't the same element, or even siblings, they're more like kissing cousins. They serve the same function, but you couldn't even put a hover effect for both simultaneously. There's not even a decent parent to hack for that purpose.
That'd be ideal. I really prefer regular click to edit, and it is more consistent with the manager. Most importantly, whatever the function, the entire entry to the left of action icons should be clickable. Also, if left-click options are "toggle" or "edit", when edit is chosen, the action icon has to switch from edit to toggle. If toggle is chosen, all still need to be shown because the toggle action still requires an indicator. If left-click is toggle, that's typical checkbox behavior, so checkboxes to the left make as much sense as anything. If we do stick with checkboxes in any form, SVG checkbox icons would be a definite improvement as far as fitting in the theme better. The issue would be that using checkboxes as toggles won't work as well if style-name action is edit. Whatever toggle icon is used would be weird on the left, and I don't see checkboxes working well on the right, but maybe they'd be alright. I'd think something else would fit better though. I actually liked the aesthetic of the power icons, so maybe something more along those lines.
You need more fiber in your diet, but point taken. The real issue is colors that are vibrant enough to be obvious indicators at a glance, don't tend to work well on the blinding white default background. Too bright, they wash into the background, too dark, they're not so different from their default color. We could use some other tactics like shadows or backgrounds, but colors are details to be worked out after icons are all sorted. As for the rush-job icons, the last three were just FontAwesome converted to SVG.
The power icon by itself is good for global disable, and it's a pretty good looking version IMO. A gear/cog for "options" is kinda a no-brainer, and I think the "find in page" icon works well as "find for site", although there may be nicer looking versions of either. The multiple gear icon is FontAwesome OC AFAICT, since you don't really see it elsewhere. The popularity of FA has made this icon more standard for "manager" by my interpretation, or at least a page with multiple option pages. Ublock uses it to open its manager or "dashboard". Not like I'm overly fond of the icon, but I thought it at least made sense. Something else would be fine, it's just a matter of what.
I'm only surprised I didn't get more shit for this one. Scissors for short"cut" was a reach, but there wasn't an obvious icon that immediately came to mind, and I was more interested in finishing the concept than hunting around. As for the strikeout, I "fixed" it because this was the original behavior IIRC. I figured it got mucked up somewhere along the way. Maybe I'm recalling incorrectly, or perhaps you switched it on purpose. Either way, I didn't even notice till digging around in the disabled state CSS, so that tells you how much I care. It's a nice touch for global, but there are other indicators for individually disabled styles already. We could play around with extra little indicators for either, or both, and maybe lose strikeout altogether. NBD AFAIC. |
|
I very much like the idea of a compact layout. I was asked to review so will add my 2 cents: (Note: I have synced approx 200 styles, and for obvious scrolling reasons have "New manage UI layout" checked.)
|
|
@narcolepticinsomniac I think you need to find a place for this icon... LOL |
|
The icons look more consistent mostly. Not so sure about find-styles (will it be two icons for FWS and USO? do we overlay a separate lens icon on top of each?) and manage (it's kinda okay though). The style toggle is interesting but not sure it'll work without color to indicate enabled state. With the toolbar being so small it can always be at the top so there'll be no need to have a background circle on style delete icon, which currently differentiates it from a "close popup" button IIRC. The Write new style link should probably remain at the bottom. The following order of icons would be better I think: manage, find, options, shortcuts, power. The power icon thus will be closer to style toggles because it's a related function. The power icon's circle should probably be the same size as the other icons, currently it looks smaller. Might be even twice as bigger (a different/edited icon with thinner strokes). The disabled state could be the same icon but crossed or grayed out. And rotated 180 deg. |
Yeah, manage icon is sufficient, but I'm open to suggestions. Did you like the multiple cogs? Only reason I went with the single was for "consistency" of fill. TBH, I'd really prefer not to have to see either of the ugly icons for FWS and USO, especially not all the time. If we do use them, maybe they could be hidden in a dropdown (or to the side) and revealed when you click the "find styles" icon.
The matching disabled toggle has no background fill at all, just thin border stroke. I thought it was shitty, so I reversed the direction with
I don't really follow your train of thought here. The circle background on delete will help morons not mistake it for a "close popup" button, which is a bonus, but I also chose it because it's shape and "consistency" blended with the toggle and other icons better. Does it not?
That order is fine with me, but we should probably nail down what we plan to do about "find styles" first. They might not work well in the middle, depending.
Yeah it could probably be a couple px bigger. I think making it much bigger than the rest would look weird though.
I don't think greyed out is drastic enough, and I'm not sure how I'd cross-out the power icon, or how that'd even look if I manged to. You don't like the crossed out circle?
You're screwing with me, right? An upside down power button? Should we put an infinite loop rotation on it instead? I thought I was supposed to be the one with the off-the-wall suggestions. =) |
Currently it's too prominent for such a relatively rare action. I think a plain
We can use two lens icons with a small letter like F and U to the right or whatever.
It lacks visual continuity. One would expect a toggle to retain its distinct traits, not transmogrify into something else completely, hence my suggestion to rotate it to imitate the lever being flipped down. Adding a green/red circle indicator in the center of the icon or to the right would improve recognition of the action and of its current state. |
|
And by "rotate" I mean a static CSS rotation to imitate Up/Down position, not an animation. |
|
I'd have see what you mean with the FWS and USO icons. I didn't even know that was a "lever", or that an upside down power icon was a thing. I'll play around with them and the delete icons, probably later tonight. Feel free to experiment with color accents and commit them if you find anything you like. If you feel like it, of course. |
|
Action icons are all larger, the power button a little more so. Their hovers are lighter instead of darker and their order has been rearranged. After googling "upside down power icon", I'm even more confident you pulled that out of your ass. That said, it definitely differentiates the state, and it actually works pretty well. I put a slight transition on it, which kinda does make it feel like flipping a switch. Delete icon now uses the "X" from the manager. It's lighter by default with a slightly darker hover, and it's thinner now, because delete doesn't need to be super easy to click like the others. I reworked the slider colors and added a pseudo element under them so we can colorize the slider buttons. I also got rid of their hover states, but we could always put them back. My intention is still to leave the default monochrome for all icons if we can make their different states obvious while doing so. The transforms and pseudo-elements for power and slider icons do make state changes more obvious. To have the actions on top by default, but leave the
and then the option could switch the 3 sections around with Just an idea. Currently body has that stupid |
|
Bigger icons look good. The animation on the power button is fun. It's not based on real behavior though, but I don't mind, apparently. BTW I thought
Regarding the find styles icon, technically, lens-on-sheet icon means "search-in-document", not "find files/documents". So our icon should not contain a huge sheet. Just a lens. There can be a small rectangle under the lens (inside the circle or under it) if it looks good. Now I need to add an option for this UI. I suppose it'll take some time to integrate both layouts seamlessly into our code. |
I will take this as an invitation to over-analyze our decision. The symbol is so recognizable for what it represents that it's become ubiquitous enough for most people not to wonder why. I know I never really have. Now that I've thought about it, I'd say you're on the right track, but a little off. Other than the upside down aspect, I haven't googled it, but most symbols do tend to be based on shapes associated with functions, rather than fabricated out of thin air. Sometimes they're based on the antiquated version of a similar function, like a floppy disk as a save icon. I think the power icon is similar, but not so much a "switch" with a lever like the pic above. I'm pretty sure it's based on the classic "knobs" of old school electronics, like volume and tuner knobs on radios. They were just circles with a line and a little nub jutting out to indicate their position. I say "old school" because of the actual nub protruding, which isn't common anymore, and because most consumer electronics are modernized with much smaller buttons, but these types of switches are still very common in more professional equipment like DJ mixers or amplifiers. If it is based off that, as I suspect, and you think of the symbol as an old school volume knob on a stereo, the volume knobs also served as the power toggles. Volume knobs twisted counter-clockwise, all the way down till they powered the device off, which was with the nub in the upright position. For our purposes, we have reversed the action, because the upright position is fitting for the default, which is "on", but I think this is why the rotation to toggle on or off feels more natural than I would've imagined.
Your wording originally threw me off. "Lens-on-sheet" sounded like gibberish to me. I thought you were referring to some Photoshop function or filter. I've only ever seen either referred to as "search icon" or "magnifying glass", and "page" or "document", respectively. As I stated before, I think the "search in page" icon works pretty well as "find style for this page", but not so much that I'd argue if you disagree. The juvenile delinquent in me likes the idea of having "F-U" in sequential search icons, but I still think they'll look a little odd always shown together, and I still prefer the idea of them being revealed as options when clicking the "find-styles" icon. If that were the case, I'd be fine with using their ugly icons. If, for some reason, you think it's absolutely necessary to show both at all times, I'll see if I can come up with something, but a search icon with initials isn't gonna look great, let alone two of them side by side.
Yeah, the general idea will be to achieve most of it with added classes to the html, with CSS specific to that selector to hide/reveal/rearrange content. I'd also suggest switching the global Another thing that we haven't quite worked out is the third mode, if there will be one. We'll keep the option to revert to the old school browser checkboxes with labels and buttons, and we've got style-name as left-click worked out for the most part, but the new compact mode with style-name as a toggle would at least require the addition of edit icons, and possibly either re-positioning of sliders to the left, or SVG checkboxes to replace them. Debatable. To make the cosmetic changes to match the click functionality, the option should probably add another class to the html. We should also probably make a couple non-cosmetic tweaks to the html they all use, which would be splitting actions/breadcrumbs into siblings for obvious reasons, and also adding a parent for style-name and checkboxes/toggles for style-name as toggle mode(s). The parent should encompass the entire entry excluding action icons, and have the same click functions as its contents. That way, the entire area will be clickable in every mode, hover effects for all contents will be possible since they're all the same action, and style-name as edit can mimic a link aesthetically without actually needing to be converted to one. As for integrating the layouts, if you implement the "add-class" options here, I can start with fresh popup files and re-do the additions to the html and CSS hacks for the different modes. I made some unnecessary adjustments to the html here so that everything functioned, but with the proper classes to key on, I think modes should all be adjustable with CSS for the most part. Perhaps we might need a tweak or two in the js, but maybe not at all other than the style-name click function switch. Anyway, the UI modes are pretty well worked out, so it depends on how particular you are about all the little details. I'm not great with html, but fairly adequate just from digging around in it so often for the last few years, and I like to think I'm pretty good with CSS, but I've also learned that on my own while hacking up userstyles, as opposed to writing it from scratch, which tends to lead to developing bad habits. That said, the CSS for modes is more on par with typical userstyle hackish CSS. Up to you if I should make myself useful. |
|
I do like the compactness of the layout, but:
|
This is true to some degree with all similar "icon only" layouts. That's why there are tooltips to familiarize users. I think the icons are fairly self-explanatory right off the bat, but they certainly should be easy to associate after investigating their tooltips.
Not implemented as such currently, but style-names as edit links is intended to be an explicitly selected mode (independent from the compact layout), so tooltips shouldn't be necessary, and are in fact annoying. In fact, I agree with @TayliaM that an option to completely disable tooltips, like Ublock has, would be ideal. Once you're familiar with all functionality, tooltips are annoying in general.
No idea what you mean by this, or why it matters. |
|
BTW, in case you haven't made it through some of the essay-length comments I've made here, the intention is to leave an option to revert to the classic popup layout in its entirety, just as there is in the manager. The new compact layout is more modern, and definitely a step up IMO, but it won't be for everybody, so they'll be able to switch it back. |
There are users that:
|
|
Okay, it appears to have issues with links with no This feature appears to have issues with the classic layout as well, and link actions that rely solely on js in general. [href="#"] seems to solve this issue though, so perhaps it can be utilized more. Not sure about checkboxes, but if we implement the all encompassing parent on style-names, checkboxes will be mostly window-dressing and only useful as indicators anyway. |
|
I just played around a little more and checkboxes are able to be focused and selected, but their focus outlines are hidden in our CSS, and ENTER doesn't work for them like other actions. For whatever reason, the space-bar does, although it tends to lose focus in the popup and you need to click TAB again to toggle back. Adding an href allows you to focus links, but the |
|
You don't need checkboxes. Using a |
|
Deferred to #517. |
No description provided.