Page MenuHomePhabricator

VE's toolbar not wrapping correctly on desktop
Open, Needs TriagePublic

Description

This task is about fixing how the visual editor's toolbar wraps when the window width is decreased.

Behavior

  1. Visit any page on ar.wiki, like this one: https://w.wiki/Xkv
  2. Open VE
  3. Decrease the width of the browser window in which you are viewing the page you opened in "Step 1."
  4. Notice the tool's in VE's toolbar start wrapping/moving to a second line, one-by-one

Expected
5.✅ As you continue decreasing the width of the browser window, notice the tool's in VE's toolbar continue wrapping/moving to a second line, one-by-one, until the window becomes narrow enough such that all of the tools except the publish actions appear on the toolbar's "second line"

Actual
5.❗️ As you continue decreasing the width of the browser window, notice there is a moment when the entire group of tools is briefly bumped onto a new line before the tool-by-tool flow kicks in. This video @DLynch put together demonstrates this issue: https://youtu.be/y1NuAOLStbI .

Done

  • The "Expected" behavior is implemented

Event Timeline

ppelberg created this task.Jul 24 2020, 4:37 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 24 2020, 4:37 PM

Per @DLynch, this is the area of the codebase that governs the toolbar's behavior:

This is specifically rooted in OO.ui.Toolbar:

/**
 * Handle window resize event.
 *
 * @private
 * @param {jQuery.Event} e Window resize event
 */
OO.ui.Toolbar.prototype.onWindowResize = function () {
	this.$element.add( this.$popups ).toggleClass(
		'oo-ui-toolbar-narrow',
		this.$bar[ 0 ].clientWidth <= this.getNarrowThreshold()
	);
};

/**
 * Get the (lazily-computed) width threshold for applying the oo-ui-toolbar-narrow
 * class.
 *
 * @private
 * @return {number} Width threshold in pixels
 */
OO.ui.Toolbar.prototype.getNarrowThreshold = function () {
	if ( this.narrowThreshold === null ) {
		this.narrowThreshold = this.$group[ 0 ].offsetWidth + this.$actions[ 0 ].offsetWidth;
	}
	return this.narrowThreshold;
};

Investigation suggests that the cached narrowThreshold is narrower than it should be. I found it to be stored as 787px, when manually computing it got 866px

So, I believe that this is because the toolbar doesn't account for tools whose presentation changes width. Specifically, the format menu shifts width depending on the cursor's position, and the instant the toolbar is initialized it has its narrowest possible width. See: https://youtu.be/W8F-ltxeaXM

JTannerWMF moved this task from To Triage to Triaged on the VisualEditor board.Jul 28 2020, 3:44 PM
JTannerWMF moved this task from Backlog to FY2020-21 on the Editing-team (Tracking) board.