diogo/symfony
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bug #22968 [Profiler] Fix text selection & click on file links on exception pages (ogizanagi)

Browse Source 
This PR was squashed before being merged into the 3.3 branch (closes #22968).

Discussion
----------

[Profiler] Fix text selection & click on file links on exception pages

| Q             | A
| ------------- | ---
| Branch?       | 3.3 <!-- see comment below -->
| Bug fix?      | yes
| New feature?  | no <!-- don't forget updating src/**/CHANGELOG.md files -->
| BC breaks?    | no
| Deprecations? | no <!-- don't forget updating UPGRADE-*.md files -->
| Tests pass?   | yes
| Fixed tickets | #22957, #22978 <!-- #-prefixed issue number(s), if any -->
| License       | MIT
| Doc PR        | N/A

I don't really know the purpose of this css rule here, but I admit it's quite frustrating not to be able to select something here.

This PR also prevents the following annoying behavior (selecting text collapses/uncollapses traces):
![mai-30-2017 18-26-29](https://cloud.githubusercontent.com/assets/2211145/26593977/3afbc510-4566-11e7-9114-8934ba6126a2.gif)

About the trick used, I think the browser support is safe enough: https://caniuse.com/#search=window.getSelection

EDIT: new commit added which allows to fix #22978

Commits
-------

8618399e42 [Profiler] Fix clicking on links inside toggle
ff6151b15f [Profiler] Fix text selection on exception pages
This commit is contained in:
Fabien Potencier 2017-05-31 10:44:02 -07:00
commit 9724e8b22f
4 changed files with 26 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/Symfony/Bundle/TwigBundle/Resources/views/base_js.html.twig
View File

@ -478,6 +478,11 @@
addEventListener(toggles[i], 'click', function(e) {
e.preventDefault();
if ('' !== window.getSelection().toString()) {
/* Don't do anything on text selection */
return;
}
var toggle = e.target || e.srcElement;
/* needed because when the toggle contains HTML contents, user can click */
@ -507,6 +512,14 @@
var altContent = toggle.getAttribute('data-toggle-alt-content');
toggle.innerHTML = currentContent !== altContent ? altContent : originalContent;
});
/* Prevents from disallowing clicks on links inside toggles */
var toggleLinks = document.querySelectorAll('.sf-toggle a');
for (var i = 0; i < toggleLinks.length; i++) {
addEventListener(toggleLinks[i], 'click', function(e) {
e.stopPropagation();
});
}
}
}
};

1
src/Symfony/Bundle/TwigBundle/Resources/views/exception.css.twig
View File

@ -89,7 +89,6 @@ header .container { display: flex; justify-content: space-between; }
.exception-illustration { flex-basis: 111px; flex-shrink: 0; height: 66px; margin-left: 15px; opacity: .7; }
.trace + .trace { margin-top: 30px; }
.trace-head { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.trace-head .trace-class { color: #222; font-size: 18px; font-weight: bold; line-height: 1.3; margin: 0; position: relative; }
.trace-head .trace-namespace { color: #999; display: block; font-size: 13px; }
.trace-head .icon { position: absolute; right: 0; top: 0; }

13
src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig
View File

@ -478,6 +478,11 @@
addEventListener(toggles[i], 'click', function(e) {
e.preventDefault();
if ('' !== window.getSelection().toString()) {
/* Don't do anything on text selection */
return;
}
var toggle = e.target || e.srcElement;
/* needed because when the toggle contains HTML contents, user can click */
@ -508,6 +513,14 @@
toggle.innerHTML = currentContent !== altContent ? altContent : originalContent;
});
}
/* Prevents from disallowing clicks on links inside toggles */
var toggleLinks = document.querySelectorAll('.sf-toggle a');
for (var i = 0; i < toggleLinks.length; i++) {
addEventListener(toggleLinks[i], 'click', function(e) {
e.stopPropagation();
});
}
}
};
})();

1
src/Symfony/Component/Debug/ExceptionHandler.php
View File

@ -316,7 +316,6 @@ EOF;
.exception-illustration { flex-basis: 111px; flex-shrink: 0; height: 66px; margin-left: 15px; opacity: .7; }
.trace + .trace { margin-top: 30px; }
.trace-head { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.trace-head .trace-class { color: #222; font-size: 18px; font-weight: bold; line-height: 1.3; margin: 0; position: relative; }
.trace-message { font-size: 14px; font-weight: normal; margin: .5em 0 0; }