Plugin names no longer showing up in core views

[Otto42]

​https://cloudup.com/c9HlsBPpwcZ

Just the ellipsis, no names appearing. No idea why. Trunk, Latest Chrome.

[SergeyBiryukov]

Can't reproduce here: 40579.PNG​.

[Otto42]

Hmm. Must be something browser specific then. This was reported to the plugins team email, which was the only reason I noticed it.

Happens in Chrome Version 59.0.3071.16 (Official Build) dev (64-bit) on Windows 10.

[SergeyBiryukov]

Confirmed after updating Chrome to 58.0.3029.81 (previously used 57.0.2987.133).

[SimonRWaters]

I found it in Chrome Version 58.0.3029.81 (64-bit) for Mac, so would be consistent with a Chrome change, not platform specific. Not reproduced in Firefox.

[afercia]

Confirmed after updating Chrome to 58.0.3029.81 (previously used 57.0.2987.133).

Same here. The CSS for the plugin name could benefit from some improvements though.

[afercia]

First pass for a patch. Some testing would be nice :)

I'd suggest to test opening the detail modal of a plugin with an insanely long name, for example:
/wp-admin/plugin-install.php?s=OptinMonster+%E2%80%93+Best+WordPress+Popup+and+Lead+Generation+Plugin&tab=search&type=term

• test in the desktop and responsive view
• test other plugins with no banner (or remove the class with-banner using your browser's inspector); for example, some of the Beta Testing plugin have no banner
• if you want to have fun, using your browser's inspector add contenteditable to the plugin name h2 and edit the name to shorten it or make it longer :)

[afercia]

For the records, this is what's happening on Chrome 58.0.3029.81:

[afragen]

This was working correctly in MacOS Version 57.0.2987.133 (64-bit), but just had a Chrome update to Version 58.0.3029.81 (64-bit) and it now fails.

Definitely a Chrome bug. Digging into the return and looking at the source show the name is present.

[afercia]

I'd say this should be fixed for 4.8. Some testing would be nice.

[Presskopp]

This is still in 58.0.3029.110 (64-bit). Unchecking the

#plugin-information-title.with-banner div.vignette {

[ ] width: 772px; uncheck or set to max-width

solves the issue.

[mrwweb]

This is a really odd bug. It took me a long time, but I was finally able to work up a reduced text case: ​https://codepen.io/mrwweb/pen/BRYzeG?editors=1100#0

To try to summarize as best I can figure: The .plugin-information-title uses white-space: nowrap; for layout so the floated vignette and title can overlap. It also has overflow: hidden; to "crop" the vignette. However, I think the browser sees that the floated vignette should be "pushing the title out of the way" due to the parent's overflow: hidden and so triggers the text-overflow ellipsis. I'm not even sure this is a bug, though I'll probably report it just in case.

Note in the test case the text-overflow on the plugin name isn't the problem, it's the text-overflow on the parent!

I see in Chrome that the vignette is also too wide when there's a scroll bar on the modal, so refactoring the position similar to what @afercia did seems like the right approach. I noticed a couple spacing things with the first patch, so I'll try to work a v2 up soon.

[mrwweb]

Just uploaded my attempt at a patch. It does the following:

• Only use text-overflow on the title element itself, no need for it on parents
• Absolutely positions vignette div with correct width
• Adjust padding/margin/max-width to ensure title is centered when full width and with RTL languages

(As noted above, I'd add testing any path with dir="rtl" to ensure it behave correctly for non-LTR languages.)

[mrwweb]

Reported chrome bug may be useful for following: ​https://bugs.chromium.org/p/chromium/issues/detail?id=720377

[afercia]

@mrwweb excellent codepen and testing :) A few considerations:

the previous patch was removing also the top right left used for position relative, because as far as I know they don't do absolutely anything when set to 0 :)

position: relative;
top: 0;
right: 0;
left: 0;

I'd consider to remove them.

Couldn't get the math behind max-width: 665px; seems to me theres a bit more space and it should be max-width: 680px;

The previous patch was also fixing the vignette in the responsive view, since seems to me width value of 800% is a bit too much. The vignette extends to the right and the shadow effect is lost, this should be fixed:

There is an edge case when the modal height is very small, the toolbar and the plugin name may overlap the footer because of their z-index. This is a pre-existing issue and I'm not sure it should be fixed in this ticket, or fixed at all.

[mrwweb]

Thanks @afercia. I was running into some weird issues when I removed those top/left/right values, but I'll go back in and take a look. I'm trying to change as little as possible since the whole setup feels a little rickety and deserving of a bigger overhaul. That overlap issues feels like a separate bug to me.

I think our math may be coming out differently due to scrollbar issues. Let me see if I can just get rid of the magic number altogether.

[afercia]

I think our math may be coming out differently due to scrollbar issues.

Ah right if you're testing on Windows the scrollbar takes some space.

[mrwweb]

New patch:

• Gets rid of that code @afercia ditched in first patch. Should've caught that.
• Adjust #plugin-information-title padding to match modal content padding.
• Allows us to use max-height: 100%; for title h2 and avoid need for magic number. (Also avoids inconsistent application of margin between browsers.)

On Windows 10 I've tested Chrome 58.0.3029.96 and Firefox 53.0.2. Both look good to me at narrow- and full-width. More testing would be appreciated.

I see that narrow screens were limiting the title to 85%. I don't know if we want to keep that at large screens instead of 100%.

[afercia]

Yep, 85% is also a magic number but I wouldn't be so worried about that :) Will ping in #core to ask for more testing, thanks @mrwweb !

[melchoyce]

Tested 40579.3.diff​ and it looks good on Chrome 58.0.3029.96 on multiple screen sizes, and in Firefox 48.0 and Safari 10.1 (12603.1.30.0.34) too. Would be good to get someone to test on Android and iPhone to confirm.

[melchoyce]

In 40672:

Plugins: Fix plugin name display on Chrome 58 and above.

On Chrome 58 and above, plugin names within the plugin details modal were collapsed down into an ellipsis. This fix rewrites the CSS to make sure the titles are always shown.

Props mrwweb, afercia, Presskopp.
Fixes #40579.

[melchoyce]

If there's problems on mobile, we can re-open this ticket.