Page MenuHomePhabricator

Vector 22 has some missing whitespace internal to HTML elements
Closed, ResolvedPublic2 Estimated Story PointsBUG REPORT

Description

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

  • Open the en.wp main page in Firefox (114) in Zebra mode (I use Windows but I doubt that matters; I don't know if this is an issue in not-Zebra mode but in a Firefox private window it can't find the element of interest so I assume it's something that does need to be looked at while logged in).
  • Ctrl + U for page source
  • Ctrl + F for vector-sticky-header-search-toggle

What happens?:
Firefox underlines the button element with error highlighting as it appears to be slightly malformed: There looks to be a missing space between the tabindex and the data-event-name.

image.png (90×1 px, 10 KB)

The highlighting and missing space is actually repeated several more times below it inside vector-sticky-header-icons, for example:

image.png (243×1 px, 25 KB)

From what I can tell, the parsing algorithm looks like it handles the missing space just fine as the developer console gets a spaced version, so the error may be something else instead (it's probably the missing space though and Firefox just is smart enough to tell you that other user agents may not render things the way you want due to the lack of space).

image.png (50×1 px, 9 KB)

What should have happened instead?:
Add a space, at a minimum.

Software version: 1.41.0-wmf.12 (e54da81) 15:52, 5 June 2023'

TODO

  • Fix the issue
  • Research options for automating tests against this kind of problem in future.

QA Results - Beta

ACStatusDetails
1T338691#9007542

Event Timeline

Izno attached a referenced file: F37100343: image.png. (Show Details)
Izno attached a referenced file: F37100341: image.png. (Show Details)
Izno updated the task description. (Show Details)

Also affects the search button.

image.png (98×951 px, 11 KB)

Jdlrobson triaged this task as Medium priority.Jun 12 2023, 5:29 PM
Jdlrobson set the point value for this task to 2.
Jdlrobson lowered the priority of this task from Medium to Low.Jun 29 2023, 6:09 PM

Change 935136 had a related patch set uploaded (by Mabualruz; author: Mabualruz):

[mediawiki/skins/Vector@master] Vector 22 has some missing whitespace internal to HTML elements

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

Change 935136 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Vector 22 has some missing whitespace internal to HTML elements

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

Change 935784 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Add mustache linting with djLint

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

@Mabualruz @Jdlrobson i added a followup patch that adds linting to mustache templates. its unfortunately not as helpful for catching issues like whitespace and formatting, but i figured its still helpful to have to catch other errors

djlint seems to require pip which I don't think is going to work in our CI: https://pypi.org/project/djlint/
I think it's an interesting idea to lint these files, but I'm not convinced we have seen enough issues to justify it. Would be good to use task sync tomorrow to talk through this.

Status: ✅ PASS
Environment: beta
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Open the en.wp main page in Firefox (114) in Zebra mode (I use Windows but I doubt that matters; I don't know if this is an issue in not-Zebra mode but in a Firefox private window it can't find the element of interest so I assume it's something that does need to be looked at while logged in).
Ctrl + U for page source
Ctrl + F for vector-sticky-header-search-toggle
✅ AC1: There should be no red underlined errors on the page such as a missing space between the end quote of a value and the next property

Screenshot 2023-07-11 at 7.50.29 PM.png (105×1 px, 45 KB)

Screenshot 2023-07-11 at 7.49.41 PM.png (188×1 px, 67 KB)

This one can skip QA in production.