Page MenuHomePhabricator

Add a link: Context item doesn't appear when VE loads on Safari (desktop)
Closed, ResolvedPublicBUG REPORT

Description

Steps to Reproduce:

  1. Enable link recommendations
  2. Click on task card from Special:Homepage

Actual Results:
Link recommendation annotations are highlighted in the article, but the corresponding context item isn't opened.

Expected Results:
Context item for the first link recommendation should be opened (same behavior as Chrome and Firefox).

Screen recording:
https://drive.google.com/file/d/1T_xvyFfaAzHZ2WfudKd0z-aP3Tdic0pm/view?usp=sharing

Event Timeline

Maybe it's a timing issue here, not sure:

AddLinkArticleTarget.prototype.afterSurfaceReady = function () {
	// Select the first recommendation
	// On mobile, the surface is not yet attached to the DOM when this runs, so wait for that to happen
	// On desktop, the surface is already attached, and we can do this immediately
	if ( OO.ui.isMobile() ) {
		this.overlay.on( 'editor-loaded', this.selectFirstRecommendation.bind( this ) );
	} else {
		this.selectFirstRecommendation();
	}
};

I added some more logs and noticed a couple of seemingly related issues:

  • RecommendedLinkContextItem is set up and then torn down right after. Edit: This is not a Safari issue since it is happening in other browsers too. Tracked separately via T279199: Add a link: context item is set up and torn down right after on desktop (sometimes)
  • On Safari, consistently this.relatedResources in ve.ui.LinearContext is empty or has the wrong annotation data model VeDmBoldAnnotation. By comparison, in Chrome, this array has GeDmRecommendedLinkAnnotation
ve.ui.LinearContext.prototype.getRelatedSources = function () {
	var surfaceModel = this.surface.getModel(),
		selection = surfaceModel.getSelection(),
		selectedModels = [];

	if ( !this.relatedSources ) {
		this.relatedSources = [];
		if ( selection instanceof ve.dm.LinearSelection ) {
			selectedModels = this.surface.getView().getSelectedModels();
		} else if ( selection instanceof ve.dm.TableSelection ) {
			selectedModels = [ surfaceModel.getSelectedNode() ];
		}
		if ( selectedModels.length ) {
			this.relatedSources = this.getRelatedSourcesFromModels( selectedModels );
		}
	}
	console.log('related resources:', this.relatedSources);
	return this.relatedSources;
};

For the latter point, it seems like the fragment might not have been immediately applied after it's selected. Selecting the annotation in the next run loop seems to fix this issue.

	this.getSurface().linkRecommendationFragments[ 0 ].fragment.select();
	setTimeout( function () {
		this.getSurface().getView().selectAnnotation( function ( annotationView ) {
			return annotationView instanceof CeRecommendedLinkAnnotation;
		} );
	}.bind( this) );

Further investigation/testing is needed, but this could also explain T278450: Add a link: wrong annotation updated when accepting/rejecting recommendation

I looked into this issue a bit more comparing Safari and Chrome side by side. The issue seems to be different from what I initially thought (at least for this Safari-specific issue, there may well be multiple issues across browsers).

Here's a rough lifecycle:

  1. Article page loads.
  2. [afterSurfaceReady] Selection changes (link recommendation data model selected, corresponding annotation selected)
  3. updateActiveAnnotations is called (ve.ce.Surface)
  4. If active annotations changed, contextChange event is emitted.
  5. Upon contextChange, LinearContextItem's visibility is toggled.
  6. Link recommendation context item shows up.

In Chrome, during steps 3 and 4, the newly selected annotation Is present in annotationsAtFocus. In Safari, it is not so steps 5-6 are not reached.

annotationsAtFocus gets all the annotations at the selected node, which is pulled from window.getSelection().focusNode. In Chrome, the correct node (text of the first link recommendation) is shown. In Safari, the node is null so no annotations are returned despite the data model being selected. (This can be verified by running window.getSelection().focusNode in the browser console before clicking on anything on the page.)

With this, the underlying issue seems to be that the node is not selectable upon page loads in Safari. Adding -webkit-user-select: auto; to mw-ge-recommendedLinkAnnotation solves this issue.

Change 676663 had a related patch set uploaded (by MewOphaswongse; author: MewOphaswongse):

[mediawiki/extensions/GrowthExperiments@master] Add a link: fix issue where context item doesn't show up on Safari

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

Change 676663 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add a link: fix issue where context item doesn't show up on Safari

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

Etonkovidova added a subscriber: Etonkovidova.

Checked for Safari 12-14 - behaves as expected: a page loads and the link recommendation context item opens.