Page MenuHomePhabricator

Integrate jQuery IME control with the VE toolbar
Open, MediumPublic8 Estimated Story Points

Description

It's particularly problematic in Flow, where the popup overlaps the toolbar switch button (also in wikitext mode):

pasted_file (155×163 px, 4 KB)

Event Timeline

Esanders raised the priority of this task from to Needs Triage.
Esanders updated the task description. (Show Details)
Esanders added subscribers: Esanders, Pginer-WMF.
Esanders set Security to None.
Jdforrester-WMF renamed this task from Integrate jQuery IME with the VE toolbar to Integrate jQuery IME control with the VE toolbar.Feb 7 2016, 1:28 AM
Jdforrester-WMF triaged this task as Low priority.
Jdforrester-WMF moved this task from To Triage to Freezer on the VisualEditor board.

The input method design was made under the constraint of having zero info about the input field it was applied to. For specific input elements, it can benefit from a specific adaptation.

Some of the design principles we considered for this tool:

  • Keep it easy to find for those users that need help to type in their language, but don't get in the way for those users who don't.
  • Allow to quickly switch between active and inactive state. Users typing on a language may may need to switch back and forth when typing a foreign word, a book title, etc.
  • Allow to quickly change among a small set of languages. Users normally type in a small set of languages from all the possible ones. Facilitating the selection among those will help to keep the process of typing fluent.

Some initial ideas for the cases of StructuredDiscussions and VisualEditor:

Flow

The text area includes a small set of tools at the bottom that is intended to be minimal to avoid distracting from content. This toolbar can be extended with more actions (e.g., insert images, T78346#1747890).
Input method tools can be reachable through the "more" menu and remain among the main options until it is disabled again:

Flow-action-ime.png (512×1 px, 76 KB)

Alternatively, another idea explored is to separate actions (left) from configuration (right). On the text area configuration, the use of IME or the use of rich/wiki text can be controlled.

flow-option-ime.png (512×1 px, 76 KB)

Visual Editor
A similar approach can be followed where input tools are enabled from the options panel, to provide the input tool as part of the regular toolbar:

ve-ime-action.png (588×1 px, 351 KB)

In addition, it would be worth exploring how to better connect two related features to write in a different script: insert special characters and input tools. One way to connect them better could be to provide a quick way to enable input methods from the special character panel. this would allow someone that is trying to type the phonetics of a longer word to discover that there is a specific input method for it. I illustrated the idea below in a quick mockup:

ve-ime-character.png (595×1 px, 316 KB)

We need to figure out to which level should we indicate the input method in use when the menu is closed. Some possibilities:

  • No indication. Users can figure out as they type or opening the menu (similar to what you do with bold).
  • Indicate active/inactive status. A small confirmation that the keyboard input is being modified, but relying on the user to recall which input method she enabled.
  • Transient indication. Show a brief reminder when the input method becames active (e.g., a tooltip indicating the current method for a second).
  • Compact visual indication. A modification of the tool icon to reflect the active method. While it may be easy to surface the language with an icon of a representative "character" (or even iso code), it is not clear that we can communicate the specific input method that way.
  • Explicit indication. Showing a label with all the information persistently, which may crowd the toolbar too much.

The idea of integrating the special character and the IME options in a single menu also brings some challenges to consider:

  • Provide a way to close the special character panel.
  • Represent both concepts with a single visual metaphor.
  • How to surface the input method status (if we decide to do so) to the parent element.

Apart of those issues, that would affect the repeated switch of IMEs, so I'm more inclined to keep the IME option as a separate action in the toolbar once it is activated by the users that need it.

Change 276145 had a related patch set uploaded (by Divec):
WIP DONTMERGE: integrate jquery.ime UI

https://gerrit.wikimedia.org/r/276145

Change 279747 had a related patch set uploaded (by Divec):
WIP DONTMERGE: integrate jquery.ime UI

https://gerrit.wikimedia.org/r/279747

Change 279748 had a related patch set uploaded (by Divec):
WIP DONTMERGE: integrate jquery.ime UI

https://gerrit.wikimedia.org/r/279748

Change 279747 abandoned by Divec:
WIP DONTMERGE: integrate jquery.ime UI

Reason:
Use If1e8e9a6e340ddfed4ef0fb8ffbe61161f32582d instead

https://gerrit.wikimedia.org/r/279747

Change 276145 abandoned by Divec:
WIP DONTMERGE: integrate jquery.ime UI

Reason:
Using If1e8e9a6e340ddfed4ef0fb8ffbe61161f32582d in mediawiki/extensions/VisualEditor instead.

https://gerrit.wikimedia.org/r/276145

Change 279748 abandoned by Esanders:
WIP DONTMERGE: integrate jquery.ime UI

Reason:
Moved to If1e8e9a6e340ddfed4ef0fb8ffbe61161f32582d

https://gerrit.wikimedia.org/r/279748

Change 283197 had a related patch set uploaded (by Esanders):
WIP DONTMERGE: IME UI integration

https://gerrit.wikimedia.org/r/283197

Jdforrester-WMF raised the priority of this task from Low to Medium.
Jdforrester-WMF set the point value for this task to 8.
Aklapper added a subscriber: dchan.

Removing task assignee due to inactivity, as this open task has been assigned to the same person for more than two years (see the emails sent to the task assignee on Oct27 and Nov23). Please assign this task to yourself again if you still realistically [plan to] work on this task - it would be welcome.
(See https://www.mediawiki.org/wiki/Bug_management/Assignee_cleanup for tips how to best manage your individual work in Phabricator.)