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

Assigned To

None

Authored By

	ppelberg
	Jul 24 2020, 4:37 PM

Description

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

Behavior

Visit any page on ar.wiki, like this one: https://w.wiki/Xkv
Open VE
Decrease the width of the browser window in which you are viewing the page you opened in "Step 1."
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 added a project: Editing-team (Tracking).

JTannerWMF moved this task from Backlog to FY2020-21 on the Editing-team (Tracking) board.

	F31947064: image.png
	Jul 24 2020, 4:38 PM

VE's toolbar not wrapping correctly on desktopOpen, Needs TriagePublicActions

Description

Behavior

Done

Event Timeline

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