bug #22968 [Profiler] Fix text selection & click on file links on exception pages (ogizanagi)
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 toggleff6151b15f
[Profiler] Fix text selection on exception pages
This commit is contained in:
commit
9724e8b22f
@ -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();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -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; }
|
||||
|
@ -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();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
@ -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; }
|
||||
|
Reference in New Issue
Block a user