MediaWiki talk:Gadget-ReferenceTooltips.js: Difference between revisions
Content deleted Content added
m →Update request 9 July 2024: edit reply to Nardog |
→Preferences: new section |
||
| (31 intermediate revisions by 9 users not shown) | |||
Line 225:
:This is extremely broken for me (using Monobook). Font size is now significantly larger than body copy. (I think it was previously smaller? Or at least the same size.) Footnote boxes are the same width as before but now much less text fits on each line, so the footnote ends up taking 1.5x or more vertical space, which both makes it less legible per se and also covers an excessive amount of the page below. Long footnotes are much less likely to fit on screen. Some footnotes with wider content get cut off horizontally. –[[user:jacobolus|jacobolus]] [[User_talk:jacobolus|(t)]] 06:50, 10 July 2024 (UTC)
::{{tq|I think it was previously smaller?}}<br>It was 13px – a bit bigger than the font size in Monobook.{{pb}}{{tq|1=Some footnotes with wider content get cut off horizontally.}}<br>Can you give an example? [[User:JWBTH|Jack who built the house]] ([[User:JWBTH|talk]]) 06:54, 10 July 2024 (UTC)
:::Here's an example, [[Lemniscate elliptic functions#cite note-73]]. Arguably this is an absurdly big formula to have in a footnote (without any breakpoints), and it's possible it spilled out of the width of a popup box even before. But there are at least some number of similar examples in other pages across the wiki. –[[user:jacobolus|jacobolus]] [[User_talk:jacobolus|(t)]] 14:10, 10 July 2024 (UTC)
::::That's very helpful, thanks. I'll make the tooltip scroll horizontally instead of having the formula spill out. [[User:JWBTH|Jack who built the house]] ([[User:JWBTH|talk]]) 14:31, 10 July 2024 (UTC)
:::::The width of footnote boxes should also probably be specified relative to the font size, to some consistent number of ems (25 or so? not sure). Then there can be somewhat consistent expectation for authors that readers' view of a popup note will be relatively close to an author's own view. –[[user:jacobolus|jacobolus]] [[User_talk:jacobolus|(t)]] 15:01, 10 July 2024 (UTC)
::::::That too, yeah. [[User:JWBTH|Jack who built the house]] ([[User:JWBTH|talk]]) 15:02, 10 July 2024 (UTC)
:::::Like this: [[File:English Wikipedia Lemniscate elliptic functions 2024-07-12 11-26-19.png|frameless|none]] [[User:JWBTH|Jack who built the house]] ([[User:JWBTH|talk]]) 11:27, 12 July 2024 (UTC)
::I assume this is to be fixed by appending the WindowManager to <code>OO.ui.getTeleportTarget()</code> instead of {{tag|body|o}}? (See [[phab:T348286]].) [[User:Nardog|Nardog]] ([[User talk:Nardog|talk]]) 06:55, 10 July 2024 (UTC)
:::Oh right, using <code>#mw-teleport-target</code> could actually be a better idea than hardcoding anything (note that reference tooltips are not OOUI-based).{{pb}}Let's see. Before the change the tooltip was 13px across all skins against 14px body size. We want to make it bigger where the body font size is bigger. <code>#mw-teleport-target</code> is:
Line 238 ⟶ 243:
::::::::How about applying <code>font-size: 90%;</code> (or <code>calc(... * 0.9)</code> or whatever) then? [[User:Nardog|Nardog]] ([[User talk:Nardog|talk]]) 08:26, 10 July 2024 (UTC)
:::::::::There is no problem with that (currently the coefficient is 13/14 to match the usual font size in Vector, 13px); the question is, relative to what. [[User:JWBTH|Jack who built the house]] ([[User:JWBTH|talk]]) 08:33, 10 July 2024 (UTC)
::::::::::The teleport target. [[User:Nardog|Nardog]] ([[User talk:Nardog|talk]]) 17:21, 10 July 2024 (UTC)
:::::{{outdent|5}} Hm. There is a problem with <code>#mw-teleport-target</code>, and I can't yet figure out how to solve it. <code>#mw-teleport-target</code> is located at the end of the DOM and only has<syntaxhighlight lang="css">
position: absolute;
z-index: 450;
</syntaxhighlight>as styles. Which means its descendants will be positioned relative to the bottom of the screen, even if they have <code>position: absolute</code>. If I use <code>position: fixed</code> for a descendant, then ''its'' descendants will have fixed positioning relative to the page (which we don't need), even if they have <code>position: absolute</code>.{{pb}}If <code>#mw-teleport-target</code> had<syntaxhighlight lang="css">
top: 0;
width: 100%;
</syntaxhighlight>that would probably work, but it doesn't. <code>#mw-teleport-target</code> seems to be intended for fixed-positioned elements like dialogs only. [[User:JWBTH|Jack who built the house]] ([[User:JWBTH|talk]]) 12:51, 11 July 2024 (UTC)
::::::{{ping|Matma Rex}} Do you have a recommendation on where a script can insert tooltips so the font size etc. are the same as in the content body? [[User:Nardog|Nardog]] ([[User talk:Nardog|talk]]) 15:46, 11 July 2024 (UTC)
:::::::I believe that <code>#mw-teleport-target</code> was intended exactly for this use case. (As noted below, access it using <code>require( 'mediawiki.page.ready' ).teleportTarget</code>.) It's used by both Codex and OOUI and is meant to be usable by anything else.
:::::::I haven't looked at how it's used in Codex, but at least OOUI manages to use it to position not just dialogs, but also e.g. dropdown menus (like those on [[Special:Log]]).
:::::::You're right though that the position has to be calculated relative to the bottom of the screen… (I see things like <code>top: -2447.62px</code> on those OOUI dropdowns, which is a bit silly). I would guess nobody noticed because those libraries have generic methods to position anything relative to anything else, and they coped with the weirdness automatically. You might want to file a Phab task (and CC people who worked on the feature: https://gerrit.wikimedia.org/r/c/mediawiki/core/+/945825), or you'll have to make your code cope with it too. [[User:Matma Rex|Matma Rex]] <small>[[User talk:Matma Rex|talk]]</small> 16:57, 11 July 2024 (UTC)
::::::::Thanks for explaining. Apart from requiring negative offsets, it also has zero width which makes descendants shrink if they don't have explicitly set width, e.g. try <syntaxhighlight lang="js">
const topOffset = -$('#mw-teleport-target').offset().top + $(window).scrollTop();
$('#mw-teleport-target').append(`<div style="position: absolute; top: ${topOffset}px; background-color:yellow;">test test test</div>`);
</syntaxhighlight>So I'm afraid, unless you set <code>width: max-content</code> (which [https://developer.mozilla.org/en-US/docs/Web/CSS/max-content#browser_compatibility is] a bit newer than Grade C browsers) together with <code>max-width</code>, you can't have descendants with variable width also. [[User:JWBTH|Jack who built the house]] ([[User:JWBTH|talk]]) 17:49, 11 July 2024 (UTC)
::::::::{{tq|1=You might want to file a Phab task (and CC people who worked on the feature: https://gerrit.wikimedia.org/r/c/mediawiki/core/+/945825)}}<br>https://phabricator.wikimedia.org/T369880 [[User:JWBTH|Jack who built the house]] ([[User:JWBTH|talk]]) 00:56, 12 July 2024 (UTC)
::::<code>#mw-teleport-target</code> isn't served by HTML, so I assume you can't just expect it to be there but have to await something. [[User:Nardog|Nardog]] ([[User talk:Nardog|talk]]) 07:36, 10 July 2024 (UTC)
:::::https://phabricator.wikimedia.org/source/mediawiki/browse/master/resources/src/mediawiki.page.ready/ready.js<syntaxhighlight lang="js">
Line 244 ⟶ 266:
});
</syntaxhighlight>works. [[User:JWBTH|Jack who built the house]] ([[User:JWBTH|talk]]) 07:44, 10 July 2024 (UTC)
::::Also, two questions to @[[User:Jon (WMF)|Jon (WMF)]]: Is there a chance that CSS variables like <code>--font-size-medium</code> will land in skins other than Vector 2022 and Minerva? Is <code>#mw-teleport-target</code> reliable to be used by gadgets like this one (that seek the font size more or less equal to the body font size)? [[User:JWBTH|Jack who built the house]] ([[User:JWBTH|talk]]) 08:56, 10 July 2024 (UTC)
:::::https://doc.wikimedia.org/mediawiki-core/master/js/module-mediawiki.page.ready.html#.teleportTarget is in the documentation so is therefore stable.
:::::The font size variables are not stable as they are not part of https://doc.wikimedia.org/codex/latest/design-tokens/overview.html yet. (FWIW officially CSS variables are currently not covered under the stable policy but that conversation is underway). [[User:Jon (WMF)|Jon (WMF)]] ([[User talk:Jon (WMF)|talk]]) 23:04, 10 July 2024 (UTC)
::::::Got it.{{pb}}{{tq|1=The font size variables are not stable as they are not part of https://doc.wikimedia.org/codex/latest/design-tokens/overview.html yet}}<br>Well, they ''are'' on https://doc.wikimedia.org/codex/latest/design-tokens/font.html#font-size. [[User:JWBTH|Jack who built the house]] ([[User:JWBTH|talk]]) 04:10, 11 July 2024 (UTC)
:::::::Yes you are correct. They are part of Codex now. My bad! Thanks for correcting me. [[User:Jon (WMF)|Jon (WMF)]] ([[User talk:Jon (WMF)|talk]]) 16:03, 11 July 2024 (UTC)
::::I think it would be fine to have the reference preview font size match the body font size if it's less work to compute. [[User:SWinxy|SWinxy]] ([[User talk:SWinxy|talk]]) 22:38, 10 July 2024 (UTC)
:::::I agree. Having footnote popups match body copy size would be totally fine. (With the proviso that the popup box width should be set using relative units so the width is about the same number of characters, as discussed a bit above.) –[[user:jacobolus|jacobolus]] [[User_talk:jacobolus|(t)]] 00:01, 11 July 2024 (UTC)
::::::I think it would look awkward. At least harder to tell apart from body text. Why should it be made bigger? We who stayed on Vector didn't complain. [[Special:Contributions/78.3.197.2|78.3.197.2]] ([[User talk:78.3.197.2|talk]]) 19:40, 12 July 2024 (UTC)
:::::::(Plus I don't want to sound like an old person but footnotes are smaller in physical books. [[Special:Contributions/78.3.197.2|78.3.197.2]] ([[User talk:78.3.197.2|talk]]) 19:45, 12 July 2024 (UTC))
:::::Disagree per what IP wrote. The old style was fine and I would like it restored. [[User:Traumnovelle|Traumnovelle]] ([[User talk:Traumnovelle|talk]]) 09:25, 13 July 2024 (UTC)
:::::Several thoughts:
:::::* Work to compute is secondary here, but there should be a rationale for smaller font from a design perspective.
:::::* Technically we don't have the current font size of Reference Tooltips in [https://doc.wikimedia.org/codex/latest/design-tokens/font.html#font-size design tokens] that we are recommended to use. Page Previews also use the default font size, 14px.
:::::* ''"I think it would look awkward. At least harder to tell apart from body text"'' – in theory, yes, but in practice, I think, the tooltip content is already well-isolated by border + paddings + shadow. My hypothesis is that you'll quickly get used to the body font size once you enable it. To test this hypothesis, you can add this<syntaxhighlight lang="css">
.rt-overlay.rt-overlay {
font-size: var(--font-size-medium, 14px);
}
</syntaxhighlight>to [[special:mypage/common.css|your common.css]] and, after some time, say how it goes. I added it to mine.
:::::* ''"footnotes are smaller in physical books"'' – obviously [[WP:NOTPAPER]], but if the argument goes "Footnotes are smaller in the reference section itself", the counterargument is "The reference in a tooltip is isolated and doesn't compete for space or attention with anything, so there is no reason to downsize it".
::::: [[User:JWBTH|Jack who built the house]] ([[User:JWBTH|talk]]) 09:52, 14 July 2024 (UTC)
::::::{{tq|1=in theory, yes, but in practice, I think, the tooltip content is already well-isolated by border + paddings + shadow}}<br>If the tooltip content is not enough isolated, we might add a bit more side padding to that end:
::::::{| border=1 cellpadding=4 style="border-collapse: collapse; border-color: var(--border-color-base, #a2a9b1)"
| Increased font size + increased padding
| Current look
|-
| [[File:English Wikipedia Lemniscate elliptic functions 2024-07-14 10-33-47.png|frameless|none]]
| [[File:English Wikipedia Lemniscate elliptic functions 2024-07-14 11-54-45.png|frameless|none]]
|}
::::::More examples with the default text size set to "Small" in the "Appearance" section: [[:File:English Wikipedia Lemniscate elliptic functions 2024-07-14 10-43-32.png|current look]], [[:File:English Wikipedia Lemniscate elliptic functions 2024-07-14 10-48-59.png|increased font size]], [[:File:English Wikipedia Lemniscate elliptic functions 2024-07-14 10-50-25.png|increased font size + increased padding]]. [[User:JWBTH|Jack who built the house]] ([[User:JWBTH|talk]]) 12:07, 14 July 2024 (UTC)
::::::The main reason to make the text in the popup slightly smaller would be to better fit in a narrow text column, since the popup box is narrower than typical skins have for paragraphs of body copy. If the popup used the same font size as the article body that would also be fine though, in my opinion. It shouldn't be larger though. –[[user:jacobolus|jacobolus]] [[User_talk:jacobolus|(t)]] 14:33, 14 July 2024 (UTC)
:::::::As I promised, the popup width in my [[#Update request 14 July 2024|updated version]] is relative to the font size anyway. [[User:JWBTH|Jack who built the house]] ([[User:JWBTH|talk]]) 14:45, 14 July 2024 (UTC)
::{{tq|1=Footnote boxes are the same width as before but now much less text fits on each line}}<br>This actually made me think that probably we should also made the tooltip wider when the user opted for the large font size in ''Vector''. [[User:JWBTH|Jack who built the house]] ([[User:JWBTH|talk]]) 06:57, 10 July 2024 (UTC)
:::Do your updates fix the gadget on Vector 2010? [[User:Traumnovelle|Traumnovelle]] ([[User talk:Traumnovelle|talk]]) 09:26, 14 July 2024 (UTC)
::::Yes, see [[#Update request 14 July 2024]]. [[User:JWBTH|Jack who built the house]] ([[User:JWBTH|talk]]) 09:34, 14 July 2024 (UTC)
== Update request 14 July 2024 ==
{{editprotected|answered=yes}}
This update addresses user complaints voiced in [[MediaWiki talk:Gadget-ReferenceTooltips.js#Update request 9 July 2024]] and includes other changes.
Please update the JS and CSS parts of the gadget:
* Update [[MediaWiki:Gadget-ReferenceTooltips.js]] from [[User:JWBTH/Gadget-ReferenceTooltips.js]] ([https://en.wikipedia.org/wiki/Special:ComparePages?page1=MediaWiki%3AGadget-ReferenceTooltips.js&rev1=&page2=User%3AJWBTH%2FGadget-ReferenceTooltips.js&rev2=&action=&unhide= diff])
* Update [[MediaWiki:Gadget-ReferenceTooltips.css]] from [[User:JWBTH/Gadget-ReferenceTooltips.css]] ([https://en.wikipedia.org/wiki/Special:ComparePages?page1=MediaWiki%3AGadget-ReferenceTooltips.css&rev1=&page2=User%3AJWBTH%2FGadget-ReferenceTooltips.css&rev2=&action=&unhide= diff])
Changes:
* Make the font size in Vector 2010 and MonoBook the same as before the changes. (In the future, Vector 2010 font size should be fixed by placing the overlay inside <code>#mw-teleport-target</code>; see [[phab:T369880]].)
* Make the tooltip width relative to the font size.
* Increase the height of the tooltip tail (anchor) by 1px (it's hard to resize it proportionately as with other values).
* Make a horizontal scrollbar appear when the contents of the tooltip exceed the maximum width and can't be wrapped to the next line ([[Lemniscate elliptic functions#cite note-73|example]]).
* Make the script reusable by other wikis (and synchronizable across wikis). They can now load it from enwiki while setting their own settings and messages.
* Rework the settings dialog: turn the enable/disable radio input into a checkbox, turn the "Cancel" button into a close button, reword the labels.
* Replace a 404 image illustrating the footer link from an extension with a [[:File:MediaWiki footer link ltr.svg|Commons file]]. It appears when the gadget is disabled from its settings.
* Fix the page footer when the gadget is disabled from its settings. A new footer link to reenable the gadget was added each time <code>wikipage.content</code> hook fired on a page.
* Remove old IE fix (IE is [[mw:Compatibility#Browser support matrix|no longer supported]] by MediaWiki).
* Do minor chores and code style fixes.
[[User:JWBTH|Jack who built the house]] ([[User:JWBTH|talk]]) 09:33, 14 July 2024 (UTC)
: {{done}} [[User:Pppery|* Pppery *]] [[User talk:Pppery|<sub style="color:#800000">it has begun...</sub>]] 23:22, 15 July 2024 (UTC)
== Preferences ==
There is a [[phab:T179415|task]] regarding this gadget about setting preferences. [[User:Wargo|Wargo]] ([[User talk:Wargo|talk]]) 13:10, 16 February 2025 (UTC)
| |||