Page MenuHomePhabricator

CodeMirror – icon extends from bar
Open, Needs TriagePublic

Description

The icon to activate CodeMirror-based syntax highlighting is bigger than the toolbar it's in and has a box around it:

Event Timeline

Restricted Application added a project: Community-Tech. · View Herald TranscriptJun 14 2018, 1:56 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Which browser / operating system / skin?

Chromium <s>& Firefox (both)</s>, Linux, Vector

@MichaelSchoenitzer_WMDE Is the page zoomed in or out beyond the standard zoom?

@MichaelSchoenitzer_WMDE Is the page zoomed in or out beyond the standard zoom?

No.

And correction: The above behavior only happens with Chromium. On Firefox there also is a box around the icon (is that on purpose?) but it isn't bigger than the toolbar.

After further digging: The page isn't zoomed but my Chromium if set to "fontsize = big" in the settings. When setting back to normal it works. All other icons work however with all fontsize-settings.

The box around the icon - does that also appear when syntax highlighting is off? i.e. when you click that button and it goes to the "off" state, do you still see it protruding outside the toolbar?

TheDJ added a subscriber: TheDJ.

I've checked. The other buttons have the same issue, it's just that they don't have an outline and backgroundcolor set as this button does in the active state.

This is basically a side effect of the old buttons being fixed at 22x22px, and the new OOUI icons being font-size relative due to:

.oo-ui-buttonElement-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button {
    min-width: 1.42857143em;
    min-height: 1.42857143em;
}

This is therefor a WikiEditor issue introduced by the OOUI restyling, of which the CodeMirror button is simply the first victim.

The box around the icon - does that also appear when syntax highlighting is off? i.e. when you click that button and it goes to the "off" state, do you still see it protruding outside the toolbar?

No, only when it's on.

Vvjjkkii renamed this task from CodeMirror – icon extends from bar to g0aaaaaaaa.Jul 1 2018, 1:03 AM
Vvjjkkii triaged this task as High priority.
Vvjjkkii updated the task description. (Show Details)
Vvjjkkii removed a subscriber: Aklapper.
CommunityTechBot renamed this task from g0aaaaaaaa to CodeMirror – icon extends from bar.Jul 2 2018, 6:44 AM
CommunityTechBot raised the priority of this task from High to Needs Triage.
CommunityTechBot updated the task description. (Show Details)
CommunityTechBot added a subscriber: Aklapper.
TheDJ added a comment.Nov 13 2018, 5:43 PM

@MichaelSchoenitzer_WMDE is this still an issue ? I remember this got fixed in OOUI at some point. The element no longer has that

.oo-ui-buttonElement-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button {
    min-width: 1.42857143em;
    min-height: 1.42857143em;
}

so i'm unless you say otherwise, i'll close this.

@TheDJ yes this issue still exists.

TheDJ added a comment.Nov 13 2018, 7:44 PM

The element no longer has that

ah, I was mistaken, it's still there, just in a 2nd block of CSS definitions.