10000 using var-dumper as standalone, expand or collapse not working · Issue #50487 · symfony/symfony · GitHub
[go: up one dir, main page]
Skip to content

using var-dumper as standalone, expand or collapse not working #50487

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
anovsiradj opened this issue May 31, 2023 · 14 comments
Closed

using var-dumper as standalone, expand or collapse not working #50487

anovsiradj opened this issue May 31, 2023 · 14 comments
Labels
Bug Status: Needs Review VarDumper

Comments

@anovsiradj
Copy link
anovsiradj commented May 31, 2023 •
edited
Loading

Symfony version(s) affected

n/a

Description

after upgrading var-dumper to 6.3, when using dump() or dd(), expand or collapse for object/array/string suddenly not working.

image
Recording.2023-05-31.074847.mp4

How to reproduce

  • composer init then install symfony/var-dumper v6.3
  • open index.php in browser
  • expand or collapse not working

composer.json.txt
index.php.txt

Possible Solution

No response

Additional Context

  • browser: Chrome
  • platform: Windows
  • user agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36
@anovsiradj anovsiradj added the Bug label May 31, 2023
@nicolas-grekas
Copy link
Member

This might be related to #49977. WDYT @ohader?

@ohader
Copy link
Contributor
ohader commented May 31, 2023

This might be related to #49977. WDYT @ohader?

It is, since that change expected the generated markup to be embedded in <html><body>...</body></html>.

https://github.com/symfony/symfony/pull/49977/files#diff-0cc0f96ad1dd7b1ff438e1754a4cbc1020d242586ef3cb407f1523656230bd11R152-R154

@nicolas-grekas
Copy link
Member

Any way to remove this expectation?

@MatTheCat
Copy link
Contributor

I don’t know if <body> was chosen for a specific reason? If not you can add the sf-js-enabled class on <html> (using doc.documentElement).

@ohader
Copy link
Contributor
ohader commented May 31, 2023

This should do the trick...

diff --git a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
index 345a89cf72..8a2570b2c4 100644
--- a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
+++ b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php
@@ -163,9 +163,7 @@ class HtmlDumper extends CliDumper
 <script>
 Sfdump = window.Sfdump || (function (doc) {

-if (doc.body instanceof HTMLElement) {
-    doc.body.classList.add('sf-js-enabled');
-}
+doc.documentElement.classList.add('sf-js-enabled');

 var rxEsc = /([.*+?^${}()|\[\]\/\\])/g,
     idRx = /\bsf-dump-\d+-ref[012]\w+\b/,

@anovsiradj
Copy link
Author

based on previous comments, i came up with a temporary workaround.
by override the function and echo <html><body> on first run 😳

function dump(...$vars)
{
	static $first = true;
	if ($first) {
		$first = false;
		echo '<html><body>';
	}
	foreach ($vars as $var) {
		\Symfony\Component\VarDumper\VarDumper::dump($var);
	}
}
function dd(...$vars)
{
	dump(...$vars);
	exit(1);
}

@MatTheCat
Copy link
Contributor

@anovsiradj doesn’t #50487 (comment) work for you?

@anovsiradj
Copy link
Author

@anovsiradj doesn’t #50487 (comment) work for you?

i just try it, yes it is work.

ohader added a commit to ohader/symfony that referenced this issue May 31, 2023
@ohader
bug symfony#50487 [VarDumper] Use documentElement instead of body for…
35f724b 
… JS flag

Using `document.documentElement` allows to use the dumper
outside of a `<html><body>...</body></html>` scenario.

Fixes: symfony#50487
@ohader ohader mentioned this issue May 31, 2023
Merged
ohader added a commit to ohader/symfony that referenced this issue May 31, 2023
@ohader
[VarDumper] Use documentElement instead of body for JS flag
1cd8384 
Using `document.documentElement` allows to use the dumper
outside of a `<html><body>...</body></html>` scenario.

Fixes: symfony#50487
ohader added a commit to ohader/symfony that referenced this issue May 31, 2023
@ohader
[VarDumper] Use documentElement instead of body for JS flag
91e6e57 
Using `document.documentElement` allows to use the dumper
outside of a `<html><body>...</body></html>` scenario.

Fixes: symfony#50487
nicolas-grekas added a commit that referenced this issue May 31, 2023
@nicolas-grekas
bug #50493 [VarDumper] Use documentElement instead of body for JS fla…
c31276b 
…g (ohader)

This PR was merged into the 6.3 branch.

Discussion
----------

[VarDumper] Use documentElement instead of body for JS flag

| Q             | A
| ------------- | ---
| Branch?       | 6.3
| Bug fix?      | yes
| New feature?  | no
| Deprecations? | no
| Tickets       | Fix #50487
| License       | MIT
| Doc PR        | ---

Fixes: #50487

Using `document.documentElement` allows to use the dumper outside of a `<html><body>...</body></html>` scenario.

Commits
-------

91e6e57 [VarDumper] Use documentElement instead of body for JS flag
@xabbuh xabbuh mentioned this issue Jun 5, 2023
Closed
@cryank
Copy link
cryank commented Oct 3, 2023

Hi @nicolas-grekas @ohader,

I am not sure if this change brings back the JavaScript issue mentioned in #39394.
image

I noticed that the HTML was rendered with the CSS style display: none. I reverted the change below and was able to show the value of #items again.

-if (doc.body instanceof HTMLElement) {
-    doc.body.classList.add('sf-js-enabled');
-}

+doc.documentElement.classList.add('sf-js-enabled');

Since the issue mentioned was in v5.2, and the code changes in #39525 are very different in v6.3, would you mind taking a look to see if this is related?

Thank you so much.

@ohader
Copy link
Contributor
ohader commented Oct 4, 2023

@cryank Actually the CSS class sf-js-enabled is applied by JavaScript, and only then display: none would be applied (commit 53046a3 was the corresponding change).

Can you please past the complete CSS rule that shows, why display: none was used?

@cryank
Copy link
cryank commented Oct 4, 2023 •
edited
Loading

@ohader
did you mean this ?
image

I noticed that the expand/collapse arrow button is missing too.

@ohader
Copy link
Contributor
ohader commented Oct 4, 2023

That's strange. I was not able to reproduce that (using latest commit 9767270 of the 6.4 branch).

Screenshot 2023-10-04 at 11 32 07

Can you share the created HTML markup and the PHP source that was used to create the output? Maybe referenced in a separate Gist to avoid blowing up this issue? Thx in advance!

@cryank
Copy link
cryank commented Oct 4, 2023 •
edited
Loading

I added dd() in an api call, and response like https://gist.github.com/cryank/b3ebe7d6af2406edd77344e49fe8e9f1

when the ajax call is 500, I checked if the response data includes <script> Sfdump = window.Sfdump and emit a modal to display the dd response on the front-end

However when I created a static page to dd the same array, everything just looks fine

@ohader
Copy link
Contributor
ohader commented Oct 6, 2023

I'm glad to hear, that it works on static pages (phew 😅). Thus, this seems to be an edge case with those modals, and how content is applied in your custom JavaScript.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Bug Status: Needs Review VarDumper
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@nicolas-grekas @ohader @MatTheCat @xabbuh @cryank @anovsiradj @carsonbot
0