WebExtensions main user interface

[vesta0]

User Story

As a user, I want to be able to access the main user interface of installed WebExtensions (on desktop, they’re almost always doorhangers) so I can use it.

Dependencies

A-C project board

Acceptance Criteria

• I can interact with my WebExtensions dashboard or doorhanger (e.g. for uBlock Origin: enable/disable globally or for a specific site, enable/disable pop-ups, remote fonts, java script, etc)

Design tasks

• Provide a way to access the main user interface of installed WebExtensions

┆Issue is synchronized with this Jira Task

[brampitoyo]

Slightly updated user story, and added design tasks.

[brampitoyo]

Progress report:

• I’ve added a way to access uBlock Origin’s main interface
  • From the main menu (discouraged by User Research – doing so would clog up the menu and make the feature less accessible)
  • From a Floating Action Button (has pros and cons)
  • It’s not clear which way is superior. User testing may be required, and more design time also required to investigate and design a better place to access add-ons
• When solved for uBlock Origin, we will also solve this problem for all other WebExtensions

[ashkitten]

in fennec, ublock origin's ui is accessible via the main menu as a normal item. as a user, i think it would be good to have it in fenix as an icon similarly to desktop, but in the menu. this would allow users to have multiple addon icons per line (like the navigation buttons are currently). the ui could come up as a sheet or popup so the experience would be more like desktop than with fennec where tapping the menu item opens the addon ui in a new browser tab.

(if this is the wrong place to voice a design opinion, please let me know)

[dessant]

@brampitoyo, a floating action button that is always visible seems a bit intrusive, if its only function is to list a menu from which extension UIs can be accessed.

A sublist in the main menu could list extensions, similar to how the Tools submenu currently functions in Fennec.

As @ashkitten said, being able to pin frequently used extensions to a row at the top of the main menu would be very useful, and would cut access times considerably.

This would be a dedicated row for extension icons at the top of the main menu that is only visible if at least one extension has been pinned there. The extension icons would function as buttons that open the extension UI.

[brampitoyo]

@ashkitten wrote:

in fennec, ublock origin's ui is accessible via the main menu as a normal item. as a user, i think it would be good to have it in fenix as an icon similarly to desktop, but in the menu. this would allow users to have multiple addon icons per line (like the navigation buttons are currently).

@dessant wrote:

a floating action button that is always visible seems a bit intrusive, if its only function is to list a menu from which extension UIs can be accessed.

A sublist in the main menu could list extensions, similar to how the Tools submenu currently functions in Fennec.

Thanks for these really useful feedback!

---

⋮ Main menu balance

Our recent User Research study found that adding more and more menu items into the main menu make features less likely to be used, because what our users love about Fenix seems to be its simplicity and relatively minimal interface.

So, I think that we have to finely balance two things:

1. Keep the ⋮ Main menu small. Don’t add too many items there.
2. Make frequently used add-ons quickly accessible (which means pinning them inside the ⋮ Main menu)

As @dessant wrote:

[…] being able to pin frequently used extensions to a row at the top of the main menu would be very useful, and would cut access times considerably.

---

Frequently used add-ons

I want to emphasise the fact that not all add-ons are used frequently enough to be pinned:

• If the add-on actively detects things on webpages (e.g. uBlock Origin), then users may want it to be quickly accessible.
  • Some users just want to set it and forget it, so they may want to avoid add-ons from cluttering the main menu
• If the add-on works passively (e.g. “Protect My Choices”), then users probably don’t want it to appear in the main menu all the time

But @dessant’s proposal is worth considering:

[…] a dedicated row for extension icons at the top of the main menu that is only visible if at least one extension has been pinned there. The extension icons would function as buttons that open the extension UI.

---

Native look and feel for add-on’s main user interface

I was inspired by @ashkitten’s proposal:

[…] the ui could come up as a sheet or popup so the experience would be more like desktop than with fennec where tapping the menu item opens the addon ui in a new browser tab.

---

Proposal

Let’s combine all of the above together. What do you think about something like this?

• Open ⋮ Main menu
• Tap 🧩 Add-ons
• A sheet appears (looks like a Share sheet – not a browser tab like Fennec).
  This sheet shows you:
  • Installed add-ons. Tap on each add-on to access its main UI.
  • A menu item to go to the Add-ons Manager (where you can uninstall, view details, etc.). You can still go to the Add-ons Manager by going inside Settings. This is just a shortcut.
  • A way to pin add-on (if we want manual control – what if we pin add-on automatically?)

Pinning add-ons

• Pinned add-ons appear somewhere in the main menu, so it takes only 2 taps to access
• Not all add-ons are used frequently enough to be pinned, so we may only want to have enough space for 1–3 add-ons. Let’s avoid cluttering the menu.
• Initially, we’re only planning to implement uBlock Origin. Until Fenix is able to support enough add-ons that work actively on the page, we may not need manual pinning.
• Instead of manually pinning, what if we pin the last used add-on automatically? Chances are, if the add-on was accessed last time, it’s probably going to be used again.

The result: It takes 3 taps to access any add-on, and 2 taps if put inside main menu

Thoughts?

[ashkitten]

it might be good to automatically pin addons, but in my opinion there still should be a way to disable that behavior and manually set what addons are pinned in which position, or hide ones you don't want to see.

design-wise, i think one row of icons in the main menu would be good for this. you can probably fit 4 icons neatly in a row there, which gives room for 4 pinned addons or 3 pinned addons and an overflow menu icon if there are more than 4 addons to display

if the design of this needs to be implemented in multiple steps, it might make sense to leave a ui for managing order/pinning/hiding addons for later and just implementing it with most recently used order for now

[ashkitten]

i also had the idea that it could be possible to put a row of addon icons somewhere in the pull-out sheet, maybe under the normal share and bookmark icons? that would give more screen real estate without cluttering the main menu, and provide a more seamless transition to opening the addon ui inside the already expanded bottom sheet. plus, it might make more sense to put addon buttons alongside other page actions

[cadeyrn]

i also had the idea that it could be possible to put a row of addon icons somewhere in the pull-out sheet, maybe under the normal share and bookmark icons?

While it's a nice idea it's not an option because the Quick Action Bar will be removed, see #4281.

[Poopooracoocoo]

in terms of the add-on manager, i'd really love it if it were the same as the desktop one
Edit: and I mean the old, good one that was recently removed. That had inline changelogs

[dessant]

@brampitoyo, supporting uBlock Origin will enable a bunch of other extensions that use that subset of extension APIs to be installed. I think it would be better to design the UX for pinning now instead of redesigning everything several times, especially because it may also involve user interface changes in other places, such as the extension sheet you mention.

Pinning could be configurable from the sheet with the extension list directly, either by touching and holding a list item, or by having a dropdown menu at the right side or the list item, like in about:addons on desktop. One could also just open the details of the extension where a pinning switch is present.

It seems that the main menu surface has enough space to allow for 4 pinned extensions in a row, while respecting spacing best-practices for touch interfaces.

[brampitoyo]

Progress report:

• This is an area where most progress have been made

• I initially started by expanding the choices of where add-ons can be accessed:

  • [Expanded] From the main menu
  • [Expanded] From a floating action button
  • [New] Inside the site info panel
  • [New] As a separate icon on the right side of the URL bar
  • [New] By making the toolbar expandable (e.g. swipe up to show more items, which includes add-ons)
  • [New] By making search a section in the toolbar. You can “go back” and go to another section, like add-ons.
  • [New] By making search a “tab” above the toolbar. You can switch back and forth between different “tabs”, and add-ons is one of them.

• After many iterations and rounds of feedback from you (most importantly), AMO Product, and Fenix UX teams, we’ve arrived at two possible logical places to access the extensions’s main user interface. In essence, we have two choices to pick from:

  1. Inside the Site Information panel

     • Reasoning: like site permissions, add-on impacts how a site works – so let’s put it inside the site info panel
     • Pros: no new menu/dialog/modal, no new interface to learn, uses existing surface
     • Cons: may not be obvious that site info panel is where you go.
     • Solutions:
       • Have add-on live inside the main menu, as well
       • Use contextual feature recommender to point out where to access add-on

  2. As a separate icon on the right side of the URL bar, that opens its own menu

     • Pros: very visible icon, impossible to miss
     • Cons: eats up precious space in the URL bar, and if you’ll always see this icon even if you don’t use add-ons (may be annoying)
     • Solutions:
       • Make more space in the URL bar by not showing https:// – a topic for another issue
       • If you have no add-on installed, this URL bar icon shouldn’t show up

• We thought long and hard about how to sort add-ons (as @ashkitten suggested, we considered sorting by last accessed), and decided that sorting alphabetically give users the most logical placement, where add-ons always appear in an expected order, all the time.

  • At least for the time being – we can revisit this sorting order later.
  • We know that, once users have many add-ons installed, manual sorting may be necessary. We won’t need sorting if uBlock Origin is the only add-on supported.

• We also thought about manually pinning add-on

  • Again, if uBlock Origin is the only add-on supported, then pinning won’t be necessary.
  • In the future, we will be taking @dessant’s suggestion: “One could also just open the details of the extension where a pinning switch is present.” This is a logical place to put it, we think. But the other suggestions make a lot of sense, too.

• We’re making add-ons accessible from inside the main menu:

  • If no add-on is installed, the main menu item will open Add-ons Manager. This works just like desktop, as @Poopooracoocoo suggested.
  • If ≥1 add-on is installed, the main menu item will open the add-ons surface. This surface will list all your installed add-ons, and contain one additional menu item that opens Add-ons Manager.
  • You can always access the Add-ons Manager from inside Settings, too.

• Compared to my last progress report:

  • Accessing add-ons took 3 taps. On either of the design choices above, accessing all add-ons take only 2 taps
  • Add-ons now live in more logical places, and there are more than one ways to access them:
    • Inside Settings
    • Inside the Main menu (which everybody knows about)
    • Either inside the Site Info Panel, or as a separate icon on the URL bar (we have to make a design decision here)

Please do check out the Miro board for the latest progress

[Scripterr]

@brampitoyo there is another way we can show add-on nicely through using a separate toolbar for extension on the opposite side of url bar. It would show the extension in front of users while browsing, user don't have to go anywhere else to access it and u could live monitor any add-on changes. If you have a bottom address bar and toolbar can be shown at the top with extensions and vice versa. The both bars can also hide automatically when user scrolls through screen so it will save some space from browser ui while browsing . Some web browsers like samsung browser and opera already have dual toolbar in browser & I don't think it would too much affect the usability by showing two toolbars on both sides and if a user feels like it affects it viewing area or have problems with accessing toolbar it can change to a different approach such as using using main menu for accessing extensions or any other approach for using add-ons.
This is a sample mock i have created to reference dual toolbar approach -

What do you think of this approach??Very much appreciate your feedback.
Thank you and much appreciate your work👍.(Sorry for crappy mock & english)

[dessant]

@brampitoyo, could you share the Miro board? I haven't been able to find the board you're referring to.

[cadeyrn]

using a separate toolbar for extension

Terrible. If implemented this should be an optional location for add-on items and not used by default. It takes too much from the already limited space of a smartphone, the proposed UI is really distracting, I doubt that a lot of people will use so many add-ons on the smartphone to make this an useful UI for the big majority of users and, of course, additional toolbars come straight out of hell. (Okay, sorry, the last point wasn't quite serious).

[AndiAJ]

Hi, verified as fixed on the latest Nightly Build #20360606 from 2/5 using the following devices:
• Google Pixel 3a XL (Android 10)
• Google Pixel 3a (Android 9)
• Huawei Mate 20 Lite (Android 8.1.0)
• Samsung Galaxy S7 (Android 7.0.0)
• OnePlus A3 (Android 6.0.1)
• LG Nexus 4 (Android 5.1.1)

► Video

✔️ If the Add-on is installed it will be automatically pinned and listed on the top of the ⋮ Main menu.
✔️ Tapping the Add-on offers the possibility disable/enable the Add-on for a specific web site.
✔️ "Add-ons Manager" ⋮ menu item shortcut where you can enable/disable globally, uninstall, view details, etc.. (You can still go to the "Add-ons Manager" by going inside Settings).

@brampitoyo - Please review and let me know if any additional testing regarding this matter is needed.