Show notice on frontend when there is excessive CSS

[westonruter]

In addition to automatically disabling the admin bar when there is excessive CSS (#1800), there should be an additional message displayed to the logged-in site administrator on the frontend when there is still excessive CSS. At the moment the ways for a user to know that there is excessive CSS are:

• Notice broken styling.
• See an AMP validation error when saving a post.
• Look at the page source for the amp-custom style manifest to see the excessive CSS message.

In addition to these, the plugin could display a message about the excessive CSS along with some suggestions for how to fix. For developers, fixing may involve rewriting CSS. For implementors, fixing may involving switching to a different theme or using alternative plugins. For other users, the fix may be to switch back to Classic/Legacy mode until the ecosystem better supports AMP.

The admin bar would be a good location to show this message:

[westonruter]

It would also be useful to show a <meter> element indicating the percentage of how much of the CSS budget they've used on the current page. Clicking the progress bar can then take the user to view the CSS manifest in the Validated URL screen (#2169).

[pierlon]

Would the progress meter be a top-level menu item in the admin bar?

[schlessera]

In my opinion, it should be a submenu under the main AMP top-level entry. Otherwise, we'll take up too much space to show a metric that will often be irrelevant.

[westonruter]

Agreed. It should be a submenu item of the AMP admin bar.

I think this issue should be put on hold for now because it is closely related to #2169, and I think some more pieces need to be put in place before we can move forward with it.

[westonruter]

It would also be useful to show a <meter> element indicating the percentage of how much of the CSS budget they've used on the current page. Clicking the progress bar can then take the user to view the CSS manifest in the Validated URL screen (#2169).

I think optimum="50" low="75" high="99" attributes work well for meter works:

<meter min="0" optimum="50" low="75" high="100" max="101" value="50">50%</meter>
<meter min="0" optimum="50" low="75" high="100" max="101" value="80">80%</meter>
<meter min="0" optimum="50" low="75" high="100" max="101" value="101">100%</meter>

• If the CSS on the page is using 75% or less of the 50KB budget used, then the color is green.
• If more than 75% is used, then the color is yellow.
• If more than 100% is used, then the color is red.

[westonruter]

While I like the idea of the meter element:

In practice I think just plain text will be more clear:

When using 80% or more:

vs.

And when using more than 100%:

vs.

There's probably some way to combine the meter with the text label, but then that would seem to just be getting verbose.

Code for meter if we decide to revisit:

$meter_element = $this->dom->createElement( 'meter' );
$meter_element->setAttribute( 'min', '0' );
$meter_element->setAttribute( 'optimum', $this->style_custom_cdata_spec['max_bytes'] * 0.5 );
$meter_element->setAttribute( 'low', $this->style_custom_cdata_spec['max_bytes'] * 0.75 );
$meter_element->setAttribute( 'high', $this->style_custom_cdata_spec['max_bytes'] );
$meter_element->setAttribute( 'max', $this->style_custom_cdata_spec['max_bytes'] + 1 );
$meter_element->setAttribute( 'value', $total_size );
$meter_element->setAttribute( 'style', 'height:1em; width:100%;' );

[csossi]

Verified in QA