Page MenuHomePhabricator

Edit toolbar on desktop improvements
Open, Needs TriagePublic

Assigned To
None
Authored By
bmartinezcalvo
Mon, Apr 13, 4:53 PM
Referenced Files
F75951045: Captura de pantalla 2026-04-14 a las 13.21.54.png
Tue, Apr 14, 11:27 AM
F75940313: image.png
Tue, Apr 14, 9:01 AM
F75939399: image.png
Tue, Apr 14, 9:01 AM
F75939328: image.png
Tue, Apr 14, 9:01 AM
F75939181: image.png
Tue, Apr 14, 9:01 AM
F75858092: Grabación de pantalla 2026-04-13 a las 18.12.00.gif
Mon, Apr 13, 4:53 PM
F75858133: Captura de pantalla 2026-04-13 a las 18.14.33.png
Mon, Apr 13, 4:53 PM

Description

As part of T400903, we explored the following changes for the edit toolbar on desktop.

  1. Replace the edit handle with the corresponding mode icon (eye for VisualEditor, wikitext icon for Source) to better reflect the selected mode
  2. Replace the menu (hamburger) icon with an ellipsis, avoiding duplication with the header menu icon
  3. Improve each menu structure by grouping related items with subtle dividers, making options easier to scan in menus
  4. Removed the ellipsis from the Publish button (from "Publish changes..." to "Publish changes") since using ellipses at the end of actions is not a good practice, even when the button is loading
Captura de pantalla 2026-04-13 a las 18.14.33.png (715×1 px, 393 KB)
Grabación de pantalla 2026-04-13 a las 18.12.00.gif (744×1 px, 2 MB)
Current behaviorProposed changes

This task is to implement those changes.

Event Timeline

  1. Replace the edit handle with the corresponding mode icon (eye for VisualEditor, wikitext icon for Source) to better reflect the selected mode

I think in most cases users know which mode their in, in which case the primary function of the tool is to let users know there is a button for switching modes. There may be a better option than the pencil for this but I don't think the eye is an improvement.

  1. Improve each menu structure by grouping related items with subtle dividers, making options easier to scan in menus

As a personal preference, I think the full height over/active state looks strange contrasted with the partial height divider:

image.png (72×102 px, 4 KB)

We would also need to consider other toolbars, such as mobile and the 2010 wikitext editor.

  1. Removed the ellipsis from the Publish button (from "Publish changes..." to "Publish changes") since using ellipses at the end of actions is not a good practice, even when the button is loading

Using an ellipsis to indicate that a button will start a process or launch a dialog rather than instantly completing an action is a widely used practice:

Google chromeLibreOfficeFirefox
image.png (162×470 px, 12 KB)
image.png (209×300 px, 8 KB)
image.png (218×341 px, 14 KB)

In past testing users indicated that they were hesitant to click the publish button, and this is why we went with ">" on mobile to make it clear you were just going to the next step in a process.

  1. Replace the edit handle with the corresponding mode icon (eye for VisualEditor, wikitext icon for Source) to better reflect the selected mode

I think in most cases users know which mode their in, in which case the primary function of the tool is to let users know there is a button for switching modes. There may be a better option than the pencil for this but I don't think the eye is an improvement.

The idea was to represent the selected option rather than including a new icon that users need to understand and recognize, since there are already too many icons in the toolbar.

  1. Improve each menu structure by grouping related items with subtle dividers, making options easier to scan in menus

As a personal preference, I think the full height over/active state looks strange contrasted with the partial height divider:

image.png (72×102 px, 4 KB)

With grouping menu items I meant the dropdown menu displayed by the toolbar options. I think it would be better if we can group them in some way since there are too many options in each menu.

Captura de pantalla 2026-04-14 a las 13.21.54.png (1×2 px, 1 MB)

  1. Removed the ellipsis from the Publish button (from "Publish changes..." to "Publish changes") since using ellipses at the end of actions is not a good practice, even when the button is loading

Using an ellipsis to indicate that a button will start a process or launch a dialog rather than instantly completing an action is a widely used practice:

Google chromeLibreOfficeFirefox
image.png (162×470 px, 12 KB)
image.png (209×300 px, 8 KB)
image.png (218×341 px, 14 KB)

In past testing users indicated that they were hesitant to click the publish button, and this is why we went with ">" on mobile to make it clear you were just going to the next step in a process.

If it helps clarify the action for users, I’m fine keeping the ellipsis, though it may introduce some unnecessary noise.