Add debugging query arguments #3448

kienstra · 2019-10-04T21:41:42Z

Summary

Adds query arguments for debugging under the amp_flags query arg. For example:
https://example.com/baz-post/?amp&amp_flags[disable_post_processing]=1

Query argument	Description
`disable_post_processing`	Prevents output buffering and sanitizers from running
`disable_response_cache`	Prevents the response from being cached
`prevent_redirect`	Prevents redirecting from an AMP URL to a non-AMP URL, like if there are unaccepted validation errors in Transitional mode
`reject_all_errors`	Automatically sets all errors to 'ack rejected'
`accept_excessive_css`	Accepts all `excessive_css` errors. Tree shaking still takes place, but no styling is removed because it's over the limit.
`disable_amp`	Disables AMP for the URL
`disable_tree_shaking`	Disables tree shaking

@todo:

Exclude sanitizers (already covered in disable_post_processing)
Add a UI or wiki page, documenting the query arguments (Update: add a UI like this)

Addresses issue #1294

Checklist

My pull request is addressing an open issue (please create one otherwise).
My code is tested and passes existing tests.
My code follows the Engineering Guidelines (updates are often made to the guidelines, check it out periodically).

@todo

- disable_post_processing - disable_response_cache - prevent_redirect - reject_all_errors @todo: add a query arg to exclude sanitizers.

westonruter · 2019-10-04T22:23:31Z

Add a UI or wiki page, documenting the query arguments

I think these would work well as toggles in an submenu item of the AMP admin bar menu item, if the user has the capability to use them. Clicking on a nav menu item can toggle the option on/off as it reloads the page.

westonruter · 2019-10-04T22:25:19Z

includes/class-amp-theme-support.php

@@ -1872,6 +1893,10 @@ public static function start_output_buffering() {
 			newrelic_disable_autorum();
 		}

+		if ( isset( $_GET[ self::DISABLE_POST_PROCESSING_QUERY_VAR ] ) && AMP_Validation_Manager::has_cap() ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended


Instead of introducing these as top-level query parameters, how about putting them all under some amp_flags query var? This would make it easier to scrub them from the URL and it would reduce opportunities for collision. So So here it could be checking isset( $_GET['amp_flags'][ self::DISABLE_POST_PROCESSING_QUERY_VAR ] ).

That's a really good idea.

19363fc adds an amp_flags query var, to access these query vars like you mentioned.

For example:
https://loc.test/your-post/?amp&amp_flags[reject_all_errors]

westonruter · 2019-10-04T22:26:29Z

includes/class-amp-theme-support.php

+					[
+						self::DISABLE_RESPONSE_CACHE_QUERY_VAR,
+						AMP_Validation_Error_Taxonomy::REJECT_ALL_VALIDATION_ERRORS_QUERY_VAR,
+					],


Per above, this could just remove amp_flags.

Sure, I'll apply this also.

Good idea, it's applied here.

westonruter · 2019-10-04T22:37:55Z

includes/validation/class-amp-validation-error-taxonomy.php

@@ -465,6 +472,11 @@ public static function get_validation_error_sanitization( $error ) {
 			$forced = 'with_preview';
 		}

+		if ( isset( $_GET[ self::REJECT_ALL_VALIDATION_ERRORS_QUERY_VAR ] ) && AMP_Validation_Manager::has_cap() ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended


As opposed to adding a new condition here, I suggest using the amp_validation_error_sanitized filter below, since these debug scenarios are outside the normal band of validation.

Good idea, how does this look?

kienstra · 2019-10-04T22:41:19Z

Hi @westonruter,

I think these would work well as toggles in an submenu item of the AMP admin bar menu item, if the user has the capability to use them. Clicking on a nav menu item can toggle the option on/off as it reloads the page.

Ah, interesting. Something like this?

westonruter · 2019-10-04T22:57:47Z

Yes, something like that. I realize that some of the toggles are mutually-exclusive, so that complicates it a bit.

…nditional As Weston mentioned, this can simply use the filter that exists,

kienstra · 2019-10-04T23:19:57Z

Ah, the commit above needs reworking.

…evel var The filter in accept_validation_errors() might not actually run, if get_acceptable_errors() doesn't return anything.

swissspidy · 2019-10-06T09:18:24Z

Should the query vars be prefixed to not cause conflicts with other plugins?

kienstra · 2019-10-06T18:16:18Z

Hi @swissspidy,

Should the query vars be prefixed to not cause conflicts with other plugins?

Good question. 19363fc adds an amp_flags query var, to access these query vars like:

https://loc.test/your-post/?amp&amp_flags[reject_all_errors]

...which is accessed like:

$_GET[ AMP_Theme_Support::AMP_FLAGS_QUERY_VAR ][ self::REJECT_ALL_VALIDATION_ERRORS_QUERY_VAR ] )

This adds a callback for 'amp_validation_error_sanitized', and also checks for the presence of the 'reject_all_errors' query var in that callback. The query var is accessed like: ?amp_flags[accept_excessive_css]

This prevents raising an 'excessive_css' error, and simply prints all of the styling in the <style amp-custom>

This is mainly intended for Standard mode, as it would be strange to have an ?amp query var, then one after it to disable AMP. Still, there's an issue where on redirecting in Transitional mode, the query var is still present in the URL, like: https://example.com/new-post-2/?amp_flags%5Bdisable_amp%5D

… arg It's possible, though probably not common, that a request would have ?amp and the query arg to disable AMP. When in Transitional mode, this will cause a redirect to the non-AMP endpoint. This ensures that the amp_flags query var is stripped from the redirect URL.

This uses React on the front-end, as it will use toggles, and may need to de-select some toggles when certain toggles are selected. It might be a little too much to enqueue React (wp-element) just for this, so I'll have to revisit whether it's necessary.

Remove a test that looks to have caused and undefined index error.

It looks like another function was running on the same filter, and had an error. So remove_remove_all_filters() for that filter.

It looks like these didn't fix the failing Travis builds. So instead, register the 'wp-element' script.

There is still much remaining, including adding the toggles and styling.

Both in the name of the function and the query var. This is to stay consistent with other query vars that have 'disable' in them, like 'disable_amp'

Use the <ToggleControl> from Gutenberg, though this still needs a lot of styling.

kienstra · 2019-10-15T00:42:20Z

The UI for these query vars still needs a lot of work, but here's its current state:

There's a 'View AMP version' link, so it probably makes sense to have these query vars available.

westonruter · 2019-10-16T16:08:41Z

The UI for these query vars still needs a lot of work, but here's its current state:

@kienstra I think the submenu could be made a bit simpler by removing the checkboxes. In other words, each of the nav menu items would be a link which would be preceded by some on/off indicator. Clicking the link would cause the page to reload with the query var update(s), and opening the submenu would then show the toggle indicator had been flipped.

To test the behavior with: &amp_flags[disable_post_processing]=random-string

kienstra · 2019-10-24T16:09:00Z

includes/class-amp-autoloader.php

@@ -101,6 +101,7 @@ class AMP_Autoloader {
 		'AMP_Validation_Callback_Wrapper'    => 'includes/validation/class-amp-validation-callback-wrapper',
 		'AMP_Validated_URL_Post_Type'        => 'includes/validation/class-amp-validated-url-post-type',
 		'AMP_Validation_Error_Taxonomy'      => 'includes/validation/class-amp-validation-error-taxonomy',
+		'AMP_Debug'                          => 'includes/validation/class-amp-debug',


It's debatable whether class-amp-debug.php should be in the validation/ directory. Most of the debugging flags have to do with validation, but some don't, like disable_amp.

For example, &amp_flags[disable_post_processing]=5555

This should help to see how to use this.

schlessera · 2019-10-24T16:39:27Z

With 996157a, the behavior of the debugging query vars is a little different.

What about the flag without value?

&amp_flags[reject_all_errors]

kienstra · 2019-10-24T16:41:36Z

What about the flag without value?

Ah, good question. That'll be false.

kienstra · 2019-10-24T16:48:36Z

Request For Another Round Of Review

Hi @westonruter and @schlessera,
Thanks for your help on this.

When you have a chance, could you please do another round of review?

The table of flags above is still up-to-date.

And here are the values that the query var can have.

schlessera · 2019-10-24T17:17:02Z

Ah, good question. That'll be false.

@kienstra Would it make sense to change this so that no flag value means true?

kienstra · 2019-10-24T17:18:35Z

@kienstra Would it make sense to change this so that no flag value means true?

Sure, that's the behavior for the amp query var.

Now, something like: &amp_flags[disable_amp] will be true.

pierlon

Excellent PR so far @kienstra. The only concern I have right now is that with the use of checkboxes it gives the impression that multiple flags can be assigned at once, which is not so. I would suggest using something similar to the radio input.

Quick mockup of what I'm thinking of:

pierlon · 2019-10-25T06:34:40Z

includes/validation/class-amp-validation-manager.php

+	 */
+	public static function get_debugging_option_title( $title_text, $query_var ) {
+		$checkbox = AMP_Debug::has_flag( $query_var ) ? '☑' : '☐';
+		return sprintf( '<span class="amp-debug-option" style="font-family:Roboto,Oxygen-Sans,sans-serif;font-size:17px">%s</span> %s', $checkbox, esc_html( $title_text ) );


Any reason why this can't be a checkbox input?

Yeah, a checkbox could be good, it'd just add some complexity 😄

There used to be checkboxes in this PR, here are some comments about that.

kienstra · 2019-10-25T16:38:58Z

Excellent PR so far @kienstra. The only concern I have right now is that with the use of checkboxes it gives the impression that multiple flags can be assigned at once, which is not so. I would suggest using something similar to the radio input.

Hi @pierlon,
Thanks a lot for reviewing this.

That's an interesting suggestion. It's possible, though not likely, that 2 debug flags would be present at once.

Still, one would have to manually add those query vars, it's not possible to get 2 debugging flags by simply clicking in the admin bar.

For example:
https://example.com/?amp&amp_flags[reject_all_errors]&amp_flags[prevent_redirect]

…-args-debugging * 'develop' of github.com:ampproject/amp-wp: (163 commits) Remove entries array test after completed. Update dependency core-js to v3.3.4 (#3624) Quick UX fixes (#3611) Fix most pressing RTL issues (#3558) Add test case for broken parent relationship Adapt broken test Throw a _doing_it_wrong() when an expected parent is not found Change template hierarchy query arguments to public Reuse data-set-focus to reliably match twentytwenty keyboard focus management Add tabindex attribute to modals Guess the role of a modal based on its classes Disable Code Editor (#3608) Update dependency postcss to v7.0.20 (#3613) Update dependency autoprefixer to v9.7.0 (#3614) Update dependency browserslist to v4.7.2 (#3612) Add rel=preconnect link for AMP CDN Fix block nav padding and margin (#3610) Adjust Gutenberg / WordPress requirement (#3609) Don't allow multiple CTA / attachment block to be pasted. (#3601) Fix page crashing when duplicating immovable blocks (#3593) ...

westonruter · 2019-10-25T22:16:18Z

That's an interesting suggestion. It's possible, though not likely, that 2 debug flags would be present at once.

Ah, this actually is the intention here, to allow multiple debug flags to be checked at once. A tricky bit, however, is that various debug flags are mutually-exclusively (#3448 (comment)), so there would need to be some logic that removes/disables some of the options based on the state of the others.

westonruter · 2019-10-25T22:28:07Z

@kienstra Let's put this on pause until we can flesh out more of the acceptance criteria and determine how the different options relate to each other, and now those options apply in Standard vs Transitional modes.

kienstra · 2019-10-25T23:18:10Z

Sounds good, thanks

CLAassistant · 2020-11-04T12:50:06Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
1 out of 2 committers have signed the CLA.

✅ westonruter
❌ kienstra
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

Add debugging query arguments

37de1c3

- disable_post_processing - disable_response_cache - prevent_redirect - reject_all_errors @todo: add a query arg to exclude sanitizers.

googlebot added the cla: yes Signed the Google CLA label Oct 4, 2019

westonruter reviewed Oct 4, 2019

View reviewed changes

Use the filter 'amp_validation_error_sanitized' instead of another co…

e738bcf

…nditional As Weston mentioned, this can simply use the filter that exists,

Add a separate filter for 'amp_validation_error_sanitized', add top-l…

19363fc

…evel var The filter in accept_validation_errors() might not actually run, if get_acceptable_errors() doesn't return anything.

kienstra added 2 commits October 8, 2019 15:29

Merge branch 'develop' into add/query-args-debugging

aeeda26

Add a query var to accept 'excessive_css' errors

388de8e

This adds a callback for 'amp_validation_error_sanitized', and also checks for the presence of the 'reject_all_errors' query var in that callback. The query var is accessed like: ?amp_flags[accept_excessive_css]

kienstra mentioned this pull request Oct 11, 2019

Introduce and expose query arguments for debugging AMP content generation #1294

Closed

kienstra added 12 commits October 12, 2019 14:18

Merge branch 'develop' into add/query-args-debugging

17747a4

Add a query var to skip tree shaking

2c0b1d0

This prevents raising an 'excessive_css' error, and simply prints all of the styling in the <style amp-custom>

Address failed PHPUnit test in Travis

fe602ac

Remove a test that looks to have caused and undefined index error.

Attempt to address failed PHPUnit test by removing a filter

405d30d

It looks like another function was running on the same filter, and had an error. So remove_remove_all_filters() for that filter.

Merge branch 'develop' into add/query-args-debugging

39b0e2f

Delete the remove_all_filters() calls, instead register 'wp-element'

e4be908

It looks like these didn't fix the failing Travis builds. So instead, register the 'wp-element' script.

Add the remaining query vars to the submenu

81be395

There is still much remaining, including adding the toggles and styling.

Change skip_tree_shaking to disable_tree_shaking

114e5d8

Both in the name of the function and the query var. This is to stay consistent with other query vars that have 'disable' in them, like 'disable_amp'

Add the toggles for the query vars

2bd69c3

Use the <ToggleControl> from Gutenberg, though this still needs a lot of styling.

kienstra added 2 commits October 15, 2019 13:20

Add the debug options to the admin bar even on non-AMP endpoints

5f186af

There's a 'View AMP version' link, so it probably makes sense to have these query vars available.

Continue with query args.

8b0c96f

Add a test for passing a random string as a query var

d5e2b2d

To test the behavior with: &amp_flags[disable_post_processing]=random-string

kienstra commented Oct 24, 2019

View reviewed changes

kienstra added 2 commits October 24, 2019 11:12

Add another assertion for a numeric string returning false

1d40623

For example, &amp_flags[disable_post_processing]=5555

Add a little documentation for AMP_Debug::has_flag()

42a29d0

This should help to see how to use this.

kienstra requested review from schlessera and pierlon October 24, 2019 16:48

Change the behavior for the query var being present but empty

a1929ab

Now, something like: &amp_flags[disable_amp] will be true.

pierlon reviewed Oct 25, 2019

View reviewed changes

westonruter self-assigned this Oct 25, 2019

westonruter mentioned this pull request Oct 29, 2019

Add paired browsing interface #3656

Merged

10 tasks

schlessera added the On Hold label Nov 15, 2019

amedina added Developer Tools and removed On Hold labels Apr 1, 2020

westonruter linked an issue Apr 16, 2020 that may be closed by this pull request

Introduce and expose query arguments for debugging AMP content generation #1294

Closed

westonruter removed a link to an issue Apr 16, 2020

Introduce and expose query arguments for debugging AMP content generation #1294

Closed

westonruter linked an issue Apr 16, 2020 that may be closed by this pull request

Introduce and expose query arguments for debugging AMP content generation #1294

Closed

westonruter removed a link to an issue Apr 16, 2020

Introduce and expose query arguments for debugging AMP content generation #1294

Closed

schlessera added the WS:Core Work stream for Plugin core label Aug 18, 2020

kienstra closed this Nov 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add debugging query arguments #3448

Add debugging query arguments #3448

kienstra commented Oct 4, 2019 •

edited by westonruter

Loading

westonruter commented Oct 4, 2019

westonruter Oct 4, 2019

kienstra Oct 4, 2019

kienstra Oct 4, 2019

westonruter Oct 4, 2019

kienstra Oct 4, 2019

kienstra Oct 4, 2019

westonruter Oct 4, 2019

kienstra Oct 4, 2019

kienstra commented Oct 4, 2019

westonruter commented Oct 4, 2019

kienstra commented Oct 4, 2019

swissspidy commented Oct 6, 2019

kienstra commented Oct 6, 2019

kienstra commented Oct 15, 2019

westonruter commented Oct 16, 2019

kienstra Oct 24, 2019 •

edited

Loading

schlessera commented Oct 24, 2019

kienstra commented Oct 24, 2019

kienstra commented Oct 24, 2019 •

edited

Loading

schlessera commented Oct 24, 2019

kienstra commented Oct 24, 2019

pierlon left a comment •

edited

Loading

pierlon Oct 25, 2019

kienstra Oct 25, 2019

kienstra commented Oct 25, 2019

westonruter commented Oct 25, 2019

westonruter commented Oct 25, 2019

kienstra commented Oct 25, 2019

CLAassistant commented Nov 4, 2020

Add debugging query arguments #3448

Add debugging query arguments #3448

Conversation

kienstra commented Oct 4, 2019 • edited by westonruter Loading

Summary

Checklist

westonruter commented Oct 4, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kienstra commented Oct 4, 2019

westonruter commented Oct 4, 2019

kienstra commented Oct 4, 2019

swissspidy commented Oct 6, 2019

kienstra commented Oct 6, 2019

kienstra commented Oct 15, 2019

westonruter commented Oct 16, 2019

kienstra Oct 24, 2019 • edited Loading

Choose a reason for hiding this comment

schlessera commented Oct 24, 2019

kienstra commented Oct 24, 2019

kienstra commented Oct 24, 2019 • edited Loading

schlessera commented Oct 24, 2019

kienstra commented Oct 24, 2019

pierlon left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kienstra commented Oct 25, 2019

westonruter commented Oct 25, 2019

westonruter commented Oct 25, 2019

kienstra commented Oct 25, 2019

CLAassistant commented Nov 4, 2020

kienstra commented Oct 4, 2019 •

edited by westonruter

Loading

kienstra Oct 24, 2019 •

edited

Loading

kienstra commented Oct 24, 2019 •

edited

Loading

pierlon left a comment •

edited

Loading