Use Firefox Photon Design System for the UI

[dannycolin]

As discussed with @jhonatasrm by email, I proposed to revamp the UI based on the Firefox Design System. The advantage I see in that are:

• Firefox users are already used to the Photon design so they know how the different widget behave
• Since the addon targets SUMO volonteers, it also makes sense that this tool looks more official
• We don't need to think about how to implement new widgets in the future since we can just mimic the Photon Design System

Finally, here's a quick mockup of what it could look like with the dark theme:
https://dannycolin.com/screenshots/livehelper-settings-page.png

List of mockups:

• Settings page (light theme)
• Settings page (dark theme)
• browserAction Popup (light theme)
• browserAction Popup (dark theme)

[jhonatasrm]

I liked the colors, will be a very nice change in the preferences page. I think in the section of product we can use a radio button instead checkbox.

I have some questions...

• We will remove the icon and the version of add-on at preferences page?
• The distance from margin left of the page will be the same as "about:preferences"?
• Have you also thought of any changes in the popup menu?

I think we can on the left margin put options similar to "about:preferences" (General.. for now), this will give us the option to put a section of credits about all who are contributing. What you think?

[dannycolin]

I think in the section of product we can use a radio button instead checkbox.

I used a checkbox element in case #48 was implemented but I can easily change it for a radio button for now.

We will remove the icon and the version of add-on at preferences page?

We can add the icon back. Maybe I can try to "photonize" the SUMO icon too. Any preference?

The distance from margin left of the page will be the same as "about:preferences"?

Yes. I've based the mockup on the layout used in most of the about:* pages.

Have you also thought of any changes in the popup menu?

I've thought about a few ideas for the popup. I think it could be a good idea to move the questions list to its own page or in a sidebar where people could (infinite) scroll the unanswered questions. Both solution would make browsing the questions list more convivial and let us more flexibility to add new features in the future.

The popup menu could only be a menu like the hamburger menu where you can click on different links like: Open questions list, Preferences, etc.

I think we can on the left margin put options similar to "about:preferences" (General.. for now), this will give us the option to put a section of credits about all who are contributing. What you think?

I also had the same idea. I'm going to work on a second draft this week so stay tuned.

[jhonatasrm]

We can add the icon back. Maybe I can try to "photonize" the SUMO icon too. Any preference?

Awesome! I think we can work on that in a future issue..

I've thought about a few ideas for the popup. I think it could be a good idea to move the questions list to its own page or in a sidebar where people could (infinite) scroll the unanswered questions. Both solution would make browsing the questions list more convivial and let us more flexibility to add new features in the future.

I think we can take a look on this when you have the mockup to better understand. I'm thinking in keep the more simple way to use, like open a popup > choose the question and open (maybe we can put some simple setting in the popup too). Well we can think more about that. 🙂

I also had the same idea. I'm going to work on a second draft this week so stay tuned.`

Awesome! Looking forward for that. 🙂

[dannycolin]

So I've reworked a bit the mockups. You can find an example of the settings page and the popup menu for the light theme in the top comment.

Here's what I've done:

• added back the missing addon's logo
• changed a bit the text and section so it follow a bit more the Photon look and feel
• used a select input for the time. In the older one you couldn't enter a value bigger than 30 minutes so I feel it makes more sense to have a list of option instead of letting the user guess what's a correct value. Also, I've added a "never" option. This could be use to let the user hit the refresh button manually instead of automatically fetching new question every X minutes. Let me know what you think about that option ;).
• changed the "open" button for an icon and I also added a "remove" button for each question in the popup menu. The idea behind the "remove" button is the same as "Clear notifications" (now using a bell icon) but only if the user wants to mark a specific question. Again let me know if it's an option you like. Of course, it could always be removed or postponed for now.

[jhonatasrm]

The mockups are really amazing, I liked the clean and modern design, also the icons at popup menu are very beautiful.

added back the missing addon's logo

I liked the version with the add-on icon.

changed a bit the text and section so it follow a bit more the Photon look and feel

Very beautiful design.

used a select input for the time. In the older one you couldn't enter a value bigger than 30 minutes so I feel it makes more sense to have a list of option instead of letting the user guess what's a correct value. Also, I've added a "never" option. This could be use to let the user hit the refresh button manually instead of automatically fetching new question every X minutes. Let me know what you think about that option ;).

Awesome! The list of options is much more intuitive. I saw you removed the option "Look out for new questions"... it was going to be a request to remove, got really good (I liked). The "Never" option looks good, because removes the necessity of the option "Look out for new questions...".

changed the "open" button for an icon and I also added a "remove" button for each question in the popup menu. The idea behind the "remove" button is the same as "Clear notifications" (now using a bell icon) but only if the user wants to mark a specific question. Again let me know if it's an option you like. Of course, it could always be removed or postponed for now.

I liked! And about implement this new button, I think we can do without any problem.
About the icon to "remove" the question.. he will work as "I've seen this question", but not to remove from the list? I'm also thinking about the icon with "X" if is a good icon to "pass the message" the "X" reminds me close, remove from a list... I don't know what you think ?

You are working on a dark theme and I'm thinking here... The idea is the theme change according to the theme of the browser, right? (just to keep in mind)

After all mockups defined, I think we must make a list of what we need to implement (every small part), also if we have any issue blocking the implementation. I believe we are on the right track and the new design will look very beautiful.

Very good work! 🙂

[dannycolin]

About the icon to "remove" the question.. he will work as "I've seen this question", but not to remove from the list?

Ah! Questions are still visible after we remove the notification. The idea behind the "X" button was to remove them to make the list smaller and easier to browse. However, I could change the icon for something else that convey the "I've read it" like it is in the current implementation.

Maybe we could keep in mind the option to remove a question from the list and move it to a new issue/feature request when the mockups will be approved.

You are working on a dark theme and I'm thinking here... The idea is the theme change according to the theme of the browser, right? (just to keep in mind)

Yes. That's the idea.

After all mockups defined, I think we must make a list of what we need to implement

Sure. When we'll approve the final version, we could add a "meta" tag to it and update the first comment to list all the blocks/depends issues in order to track the progress of the implementation.

[dannycolin]

I've uploaded the dark theme :).

[jhonatasrm]

Awesome! I really liked both preferences and popup in dark mode. 🙂

[dannycolin]

Cool. Is there anything you'd like me to change on the current design? If not, I could start implementing it.

For the implementation, do you prefer doing it on the main repo in a separated branch (that means I'll need access to the repo) or do you prefer that I implement it in my fork and open a pull request?

[jhonatasrm]

Is there anything you'd like me to change on the current design?

I think it's perfect.

For the implementation, do you prefer doing it on the main repo in a separated branch (that means I'll need access to the repo) or do you prefer that I implement it in my fork and open a pull request?

I will add you at repository and you decide if creates a separated branch or opens a PR from your fork... What works better for you.

We have the issue #48 related with this implementation and @WesleyBranton is working on this.. doesn't block so many parts and If we can't solve the issue before come out the new design... we can keep momentarily with just one product, but we will need think in a way to change the product easily.

[dannycolin]

I will add you at repository and you decide if creates a separated branch or opens a PR from your fork... What works better for you.

Looks like two-factor authentication is mandatory to join mozillabrasil. However, I don't have a smartphone/phone number 😕 and GitHub doesn't seem to support 2FA via email.

[jhonatasrm]

Yeap.. is mandatory. 😕 I think you can use a phone number or the app Authenticator (from google).. maybe if you emulate a Android device in your computer.. I don't know. 🤔

[dannycolin]

Looks like there's desktop apps (and even cli apps [1]) as an alternative to Authenticator. I'll look into it later ;).

[jhonatasrm]

Awesome! 😃

[dannycolin]

Quick update to let you know I've started to write the css code. You can follow the progress at https://dannycolin.github.io/photon-library/ You can change your system color theme (dark or light) to see both theme version.

Btw, the Photon Design System Documentation seems a bit outdated and I had to inspect the about:* pages in Firefox to find some of the color/style values. So, if by any chance you know a Mozdev that could give us access (even a read-only) to the up-to-date internal documentation (and ux assets like sketchapp and invision.app) let me know :).

[dannycolin]

@jhonatasrm I'm mostly done with the redesign. I encounter one small problem tho. I used the same ids for the label and input but the extension doesn't save and update the preferences. I haven't had the time to look at the JS code but maybe you could point me in the right direction to find what I'm doing wrong. You can find the code in the issue-58 branch.

[WesleyBranton]

@dannycolin I think I'm the one that wrote the code for saving preferences. It had to be rewritten when I changed the Storage API. I can take a look at your branch at some point today and see what the issue is.

[WesleyBranton]

@dannycolin All patched. You removed the version number and the first thing that the JS code does is inject the version number into the heading of the page, so it was breaking before it got to any of the code to save/restore the preferences.

[jhonatasrm]

I looked at the branch issue-58... it's getting pretty good, just a few issues, but the final version will be really nice!

👏 👏

[dannycolin]

@WesleyBranton thanks for the quick reply and fix.

[WesleyBranton]

@dannycolin If you need any assistance with this, I'd be happy to help. There are a few UI-related suggestions pending in the issues section are blocked by the redesign. Still no rush, but if you need help, feel free to boss me around.

[dannycolin]

@WesleyBranton I'm good for now, I just had to dig a bit more then I though in the JS files for the questions' list since some of the HTML is generated by it. (see #88)

[WesleyBranton]

I'm not sure how you are planning to implement the light and dark theme detection. I would assume it's something Javascript related.

I've noticed though that you've included a light and dark version of the SVG icons. Could the CSS invert() filter be used on those files to make them into light and dark, rather than having two files? Just curious.

[dannycolin]

I've noticed though that you've included a light and dark version of the SVG icons. Could the CSS invert() filter be used on those files to make them into light and dark, rather than having two files? Just curious.

I'll look if it's possible. For now, I use a light and dark version because it was faster to implement.

[WesleyBranton]

I'll look if it's possible. For now, I use a light and dark version because it was faster to implement.

It's no problem. Don't worry about it. Just wasn't sure if it would make your life a little easier. Not a big deal. Since they are locally stored images, we don't really have to worry about reduce the number of images being processed like we would if it were on a remote website.

[WesleyBranton]

Rather than posting a list of the issues to fix in this thread, I will open a new issue for each problem so that we can manage who is handling what. Just make sure to assign yourself to the issue if you want to patch it so that we don't all end up working on the same things. I've assigned myself to a few to start with.

I'll add a reference to this issue so that they should all appear in this thread.

[dannycolin]

merged in master via #93