Phonos icon appears larger and clipped until it's clicked
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To

Authored By

	Nardog
	Sep 18 2023, 2:54 AM

Description

Steps to replicate the issue (include links if applicable):

Open a page with Phonos, like https://en.wikipedia.org/wiki/Seychelles, or https://en.wikipedia.beta.wmflabs.org/w/index.php?oldid=600918

What happens?:
The loudspeaker icon is larger than its container, making it clipped, until you click on it.

If the page contains only a Phonos button, as in https://en.wikipedia.beta.wmflabs.org/w/index.php?oldid=600919, the button gets focused for a brief moment shortly after opening the page, and the icon shrinks. With JavaScript off, the icon remains clipped.

What should have happened instead?:
The icon is not clipped from the beginning.

Other information (browser name/version, screenshots, etc.):

Running mw.loader.load('oojs-ui-core.styles') makes the icon appear as expected.

QA Results - Beta

AC	Status	Details
1	✅	https://phabricator.wikimedia.org/T346592

Details

	Subject	Repo	Branch	Lines +/-
	PhonosButton.less: ensure icon is correct size before OOUI is loaded	mediawiki/extensions/Phonos	master	+1 -0

Customize query in gerrit

Related Objects

Mentioned In: rEPHN6510c48ba3dd: PhonosButton.less: ensure icon is correct size before OOUI is loaded
T345414: Enabling Phonos on all projects increased JavaScript and CSS size, Phonos should not use OOUI on page load

Event Timeline

Nardog created this task.Sep 18 2023, 2:54 AM

Restricted Application added a project: Community-Tech. · View Herald TranscriptSep 18 2023, 2:55 AM

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Nardog mentioned this in T345414: Enabling Phonos on all projects increased JavaScript and CSS size, Phonos should not use OOUI on page load.Sep 18 2023, 2:55 AM

Nardog updated the task description. (Show Details)

Nardog updated the task description. (Show Details)Sep 18 2023, 3:00 AM

Looks like an issue with the rule:

.ext-phonos-PhonosButton.oo-ui-buttonElement-frameless.oo-ui-buttonWidget > .oo-ui-buttonElement-button { display: inline; }

This needs to be inline-block

Change 958538 had a related patch set uploaded (by MusikAnimal; author: MusikAnimal):

[mediawiki/extensions/Phonos@master] PhonosButton.less: ensure icon is correct size before OOUI is loaded

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

gerritbot added a project: Patch-For-Review.Sep 18 2023, 6:26 PM

I can't reproduce the issue on my local, but the above patch should fix it.

HMonroy moved this task from Review/Feedback 💬 to QA 🐛 on the Community-Tech (CommTech-Kanban) board.Sep 18 2023, 7:25 PM

Change 958538 merged by jenkins-bot:

[mediawiki/extensions/Phonos@master] PhonosButton.less: ensure icon is correct size before OOUI is loaded

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

MusikAnimal mentioned this in rEPHN6510c48ba3dd: PhonosButton.less: ensure icon is correct size before OOUI is loaded.Sep 18 2023, 7:28 PM

Maintenance_bot removed a project: Patch-For-Review.Sep 18 2023, 7:30 PM

ReleaseTaggerBot added a project: MW-1.41-notes (1.41.0-wmf.27; 2023-09-19).Sep 18 2023, 8:00 PM

@MusikAnimal No clipped icons as seen in the screenshots below. I will move this to Done. Thanks for all your work!

Status: ✅ PASS
Environment: Beta
OS: macOS Ventura
Browser: Chrome 116, Firefox 116, Safari 16.6
Device: MBA M2
Emulated Device:: N/A
Test Links:
https://en.wikipedia.org/wiki/Seychelles
https://en.wikipedia.beta.wmflabs.org/wiki/Seychelles
https://en.wikipedia.beta.wmflabs.org/w/index.php?oldid=600918
https://en.wikipedia.beta.wmflabs.org/w/index.php?oldid=600919,

✅AC1: https://phabricator.wikimedia.org/T346592

Clipped- Old Patch	New Patch- Beta

No clipped icons

2023-09-18_14-31-31.png (983×1 px, 187 KB)

Icon did not shrinked when opening the page and it's not clipped when JS is off

2023-09-18_14-48-26.png (1×1 px, 191 KB)

MusikAnimal closed this task as Resolved.Sep 20 2023, 6:04 PM

	F37725492: seyshelles2.png
	Sep 18 2023, 2:54 AM
	File Not Attached

Phonos icon appears larger and clipped until it's clickedClosed, ResolvedPublicBUG REPORTActions