Page MenuHomePhabricator

Proofreading tooltip anchor upside down on Special:Translate
Closed, ResolvedPublic

Description

Issue:

kuva.png (376×2 px, 47 KB)

Relevant code:

			mw.loader.using( 'oojs-ui-core' ).done( function () {
				var tooltip = new OO.ui.PopupWidget( {
					padded: true,
					align: 'center',
					width: 250,
					classes: [ 'translate-tooltip' ],
					$content: $( '<p>' ).text( $icon.prop( 'title' ) )
				} );

				setTimeout( function () {
					var offset, $visibleIcon = $( '.autotooltip:visible' );
					if ( !$visibleIcon.length ) {
						return;
					}

					offset = $visibleIcon.offset();
					tooltip.$element.appendTo( document.body );
					tooltip.toggle( true ).toggleClipping( false ).togglePositioning( false );
					tooltip.$element.css( {
						top: offset.top + $visibleIcon.outerHeight() + 5,
						left: offset.left + $visibleIcon.outerWidth() - tooltip.$element.width() / 2 - 15
					} );

					setTimeout( function () {
						tooltip.$element.remove();
					}, 4000 );
				}, 1000 );

oojs-ui version 0.41.3

The effective styles on the .oo-ui-popupWidget-anchor element are:

.oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor::after {
    top: -10px;
    left: -8px;
    border-top-color: #fff;
    border-width: 9px;
}
.oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor::before, .oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor::after {
    border-bottom: 0;
        border-bottom-width: 0px;
}
.oo-ui-popupWidget-anchored .oo-ui-popupWidget-anchor::before, .oo-ui-popupWidget-anchored .oo-ui-popupWidget-anchor::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
        border-bottom-style: solid;
    border-color: transparent;
        border-top-color: transparent;
        border-bottom-color: transparent;
}
.oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor::before {
    top: -10px;
    left: -9px;
    border-top-color: #a2a9b1;
    border-width: 10px;
}
element {
    left: 125.55px;
}
.oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor {
    bottom: -9px;
}
.oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor {
    left: 0;
}
.oo-ui-popupWidget-anchored .oo-ui-popupWidget-anchor {
    display: block;
    position: absolute;
    background-repeat: no-repeat;
}
.oo-ui-popupWidget-anchor {
    display: none;
}
body {
    color: #202122;
}
html, body {
    font-family: sans-serif;
}
html {
    font-size: 100%;
}

Outcome

Fixed broken display of tooltip anchor on Special:Translate in proofreading mode. The issue did not affect any functionality.

Event Timeline

It's not clear to me whether the code is wrong, whether some other code is causing this, or whether there is a bug in OOUI.

Nikerabbit moved this task from Backlog to tux on the MediaWiki-extensions-Translate board.

Changing the CSS class from oo-ui-popupWidget-anchored-bottom to oo-ui-popupWidget-anchored-top fixes the issue. You can do it by calling .setAnchorEdge( 'top' ) on the popup widget. I don't know why it suddenly started behaving incorrectly though :o

Change 713637 had a related patch set uploaded (by Abijeet Patro; author: Abijeet Patro):

[mediawiki/extensions/Translate@master] SpecialTranslate: Fix proofreading tooltip anchor

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

Related patch has been merged. Need to test again after deployment.

Change 713637 merged by jenkins-bot:

[mediawiki/extensions/Translate@master] SpecialTranslate: Fix proofreading tooltip anchor

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