Consistent submenu item spacing when count indicator is present

[pauldechov]

The "awaiting-mod" count indicator looks good and doesn't affect top-level menu items, but causes inconsistent spacing with submenu items: ​https://cloudup.com/cF_VyRXScwF

https://core.trac.wordpress.org/browser/trunk/src/wp-admin/css/admin-menu.css#L527

Possible fix:

#adminmenu .wp-submenu .awaiting-mod,
#adminmenu .wp-submenu .update-plugins {
    margin-top: 0;
    margin-bottom: -2px;
}

Results in consistent spacing among submenu items: ​https://cloudup.com/cr4DtYq4lWS

[afercia]

Yep, this is clearly visible also in the "Updates" menu sub-item. However, since the introduction of system-fonts, the actual rendering is different across platforms because the font metrics are different... also different rendering engines matter.
In the screenshot below, the counters how they appear on Windows 10, Chrome, IE11, and Edge:

Since the font is different, the sub-item count ("Updates") is better aligned, while the counts in the top-level items are slightly moved to the top. Any change here should take into account different platforms and browsers. Also, notice how the counters are not perfect circles, depending on the actual number and how much space the number takes.

[JDTrower]

Here is a patch with a first pass at adjusting the CSS for the update "awaiting-mod" indicators. I have tested it on a Windows 10 computer in the latest versions of IE11, Microsoft Edge, Opera, Firefox, and Chrome.

Below are before and after screenshots for each browser.

Chrome - ​https://cloudup.com/cv2z6IhlduR

Firefox - ​https://cloudup.com/cbhDPg3lkSt

IE11 - ​https://cloudup.com/cnQAVyxqTdK

Microsoft Edge - ​https://cloudup.com/cjDB2x1kk7G

Opera - ​https://cloudup.com/chczeWBo-xX

This patch would need to be tested on other platforms to make sure the indicators are centered better on those platforms. Feedback is also welcome.

[afercia]

Let's try this for 4.9.

[afercia]

Seems to me it would be better to consider the real reason why the counters vertical alignment looks different. I think it's because of the different line-height value of the parent element. The font size and line-height for the top level items are:

font-size: 14px;
line-height: 18px;

while for sub-items are:

font-size: 13px;
line-height: 1.2; <-- 15.6 pixels

To double check, I've tried to make the sub items font size and line height the same as the top level items and then the alignment looks identical:

Of course, it's not possible to change the font-size but it is possible to change the line-height and then compensate the total item height adjusting the padding. While the ​WordPress CSS coding standards recommend to use unit-less values for line-height, they also say "unless necessary to be defined as a specific pixel value". I'd probably try to set the same value in pixels for the top level items and sub items, then adjust as necessary.

To improve the "roundness" of the counters, I'd suggest to have a look at the red comment counts in the posts list.

[afercia]

41317.diff​ uses the same line-height for the top level items and sub-items. Also:

• removes the font weight bold for consistency with other counters
• improves the "roundness" of the counters using the same style used for the counters in the List tables. For reference:

Screenshots with the alignments before (left) and after (right) in Chrome macOS:

Also, changes the background red from #d54e21 to #ca4a1f to make the color contrast ratio higher than the 4.5:1 required by the WCAG at level AA (note: this change is not visible in the screenshot above).

[afercia]

41317.2.diff​ adds a couple comments.

[afercia]

In 41362:

Administration: Admin menu: Improve vertical spacing and alignment of menu items with counters.

Props pauldechov, JDTrower.

Fixes #41317.