WordPress.org

Make WordPress Core

Opened 5 months ago

Closed 4 months ago

Last modified 4 months ago

#40579 closed defect (bug) (fixed)

Plugin names no longer showing up in core views

Reported by: Otto42 Owned by: melchoyce
Milestone: 4.8 Priority: normal
Severity: normal Version:
Component: Plugins Keywords: has-patch has-screenshots
Focuses: administration Cc:

Description

https://cloudup.com/c9HlsBPpwcZ

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

Attachments (4)

40579.PNG (235.4 KB) - added by SergeyBiryukov 5 months ago.
40579.diff (2.0 KB) - added by afercia 5 months ago.
40579.2.diff (1.5 KB) - added by mrwweb 4 months ago.
40579.3.diff (2.0 KB) - added by mrwweb 4 months ago.

Download all attachments as: .zip

Change History (32)

@SergeyBiryukov
5 months ago

#1 @SergeyBiryukov
5 months ago

  • Component changed from General to Plugins
  • Focuses administration added

Can't reproduce here: 40579.PNG.

#2 @Otto42
5 months ago

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.

#3 @SergeyBiryukov
5 months ago

  • Milestone changed from Awaiting Review to 4.7.5

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

#4 @SimonRWaters
5 months ago

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.

#5 @afercia
5 months ago

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
5 months ago

#6 @afercia
5 months ago

  • Keywords has-patch has-screenshots added

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 :)

#7 @afercia
5 months ago

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

https://cldup.com/kepr-srz32.png

#8 @afragen
5 months ago

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.

Last edited 5 months ago by afragen (previous) (diff)

#9 @afercia
5 months ago

  • Milestone changed from 4.7.5 to 4.8

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

This ticket was mentioned in Slack in #core by ocean90. View the logs.


4 months ago

This ticket was mentioned in Slack in #meta by otto42. View the logs.


4 months ago

#12 @Presskopp
4 months ago

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.

#13 @mrwweb
4 months ago

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
4 months ago

#14 @mrwweb
4 months ago

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.)

#15 @mrwweb
4 months ago

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

#16 @afercia
4 months ago

@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:

https://cldup.com/ftHNGOcWEA.png

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.

https://cldup.com/_qqI4cyQk5.png

#17 @mrwweb
4 months ago

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.

#18 @afercia
4 months ago

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
4 months ago

#19 @mrwweb
4 months ago

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%.

#20 @afercia
4 months ago

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 !

This ticket was mentioned in Slack in #core by afercia. View the logs.


4 months ago

This ticket was mentioned in Slack in #forums by otto42. View the logs.


4 months ago

This ticket was mentioned in Slack in #forums by mrwweb. View the logs.


4 months ago

This ticket was mentioned in Slack in #core by mrwweb. View the logs.


4 months ago

#25 @melchoyce
4 months ago

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.

This ticket was mentioned in Slack in #core by melchoyce. View the logs.


4 months ago

#27 @melchoyce
4 months ago

  • Owner set to melchoyce
  • Resolution set to fixed
  • Status changed from new to closed

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.

#28 @melchoyce
4 months ago

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

Note: See TracTickets for help on using tickets.