-
-
Notifications
You must be signed in to change notification settings - Fork 9.6k
[WebProfilerBundle] Fix AJAX panel width for long URLs #20715
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.
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
[WebProfilerBundle] Fix AJAX panel width for long URLs #20715
Conversation
Unbelievable! I researched this (12hr ago) before creating the PR 😢 |
@chalasr Thanks for the warning. I have no problem with close this PR as duplicated, however I will keep it open, since this one must be done in 2.8 and I propose another solution, later the @symfony/deciders will take the right desision. |
I don't have any issue using 3.2. I think it has been fixed silently in #19576, which match your solution (but slightly different value). So 👍 for this one by using the same value if coherent. BTW, the diff between 2.8 and 3.2diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig
index d87e813..1b7b2f5 100644
--- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig
+++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig
@@ -26,6 +26,15 @@
display: inline;
}
+.sf-toolbar-clearer {
+ clear: both;
+ height: 36px;
+}
+
+.sf-display-none {
+ display: none;
+}
+
.sf-toolbarreset * {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
@@ -36,7 +45,7 @@
.sf-toolbarreset {
background-color: #222;
bottom: 0;
- box-shadow: 0 -1px 0px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
color: #EEE;
font: 11px Arial, sans-serif;
left: 0;
@@ -139,7 +148,7 @@
.sf-toolbar-block .sf-toolbar-info-piece .sf-toolbar-status {
padding: 2px 5px;
- margin-bottom: 0px;
+ margin-bottom: 0;
}
.sf-toolbar-block .sf-toolbar-info-piece .sf-toolbar-status + .sf-toolbar-status {
margin-left: 4px;
@@ -233,6 +242,16 @@
.sf-toolbar-block-request .sf-toolbar-info-piece a:hover {
text-decoration: underline;
}
+.sf-toolbar-block-request .sf-toolbar-redirection-status {
+ font-weight: normal;
+ padding: 2px 4px;
+ line-height: 18px;
+}
+.sf-toolbar-block-request .sf-toolbar-info-piece span.sf-toolbar-redirection-method {
+ font-size: 12px;
+ height: 17px;
+ line-height: 17px;
+}
.sf-toolbar-status-green .sf-toolbar-label,
.sf-toolbar-status-yellow .sf-toolbar-label,
@@ -315,7 +334,7 @@
padding: 4px;
}
.sf-ajax-request-url {
- max-width: 300px;
+ max-width: 250px;
line-height: 9px;
overflow: hidden;
text-overflow: ellipsis;
@@ -381,7 +400,7 @@
.sf-toolbarreset {
bottom: auto;
- box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
top: 0;
}
@@ -451,9 +470,15 @@
padding-left: 0;
padding-right: 0;
}
- .sf-toolbar-block-request .sf-toolbar-status + .sf-toolbar-label {
- margin-left: 4px;
+ .sf-toolbar-block-request .sf-toolbar-label {
+ margin-left: 5px;
+ }
+ .sf-toolbar-block-request .sf-toolbar-status + svg {
+ margin-left: 5px;
}
+ .sf-toolbar-block-request .sf-toolbar-icon svg + .sf-toolbar-label {
+ margin-left: 0;
+ }
.sf-toolbar-block-request .sf-toolbar-label + .sf-toolbar-value {
margin-right: 10px;
} |
Analyzing it again, it depends of current What do you think about possible solution (1) or (2) preferably ? |
(1) Ok, but that's not much different from the current solution 😕 |
c825a94
to
b0a8f8e
Compare
Well, anyway a smaller value should cover the issue currently, so I fixed the value to |
Actually I think the issue only exists after #17540 (which has been merged in 3.1) and adds the HTTP status code, which explains the width issue as the css wasn't updated. So this should probably target 3.1. |
Nope! I don't have any CSS, to reproduce it in 2.8, just adds |
@ogizanagi , yes, in 3.1 I have this issue with the same code @yceruto 2.8, with sleep(10) with valid response : |
@yceruto : Even having a request with a time faked to |
Right, it's an extra point, but the issue is possible since 2.8 even when my screenshots were taken in 3.1 2.8 screenshot: We can see "apparently" no padding-right. |
@ogizanagi, @NicolasPion You can reproduce it with |
@yceruto yes, I think you can reproduce this bug only if you have many 000000 in the time, and using a sleep(100) in PHP + using "OPTIONS" method in Ajax In my exemple I have some margin to the right because 556 is smaller than 000 |
@NicolasPion, @ogizanagi However, do you think it's worth fixing it at 2.8? Or do you really think that the problem is more serious from 3.1? |
@yceruto : Sorry, I forgot to answer you last time. No I think it's ok in 2.8 even with |
@yceruto : imo, in 2.8 this is not really a "bug" and it is very difficult to reproduce :
But in 3.1 why not, the only requirement to reproduce this is to have a long URL |
Agreed, changed to 3.1 base branch. |
Thank you @yceruto. |
…yceruto) This PR was merged into the 3.1 branch. Discussion ---------- [WebProfilerBundle] Fix AJAX panel width for long URLs | Q | A | ------------- | --- | Branch? | 3.1 | Bug fix? | yes | New feature? | no | BC breaks? | no | Deprecations? | no | Tests pass? | yes | Fixed tickets | - | License | MIT | Doc PR | - When the AJAX url path is very long, the **profile ``<td>``** token value is not fully displayed. ### Before  ### After  ### Other Possible Solutions 1. Fix ``max-width`` from ``.sf-toolbar-block:hover .sf-toolbar-info`` class to ``512px``. (same result but the AJAX panel is a bit longer) 2. Fix ``max-width`` from ``.sf-toolbar-block:hover .sf-toolbar-info`` class to ``none`` or remove it. It would avoid future issues (mainly with third bundles) with children width greater than ``480px``. (Promising) ? //cc @javiereguiluz Commits ------- b0a8f8e Fixed max width from ajax request url element (td)
… URLs (yceruto) This PR was merged into the 3.1 branch. Discussion ---------- [WebProfilerBundle] Fix AJAX panel width for long URLs | Q | A | ------------- | --- | Branch? | 3.1 | Bug fix? | yes | New feature? | no | BC breaks? | no | Deprecations? | no | Tests pass? | yes | Fixed tickets | - | License | MIT | Doc PR | - When the AJAX url path is very long, the **profile ``<td>``** token value is not fully displayed. ### Before  ### After  ### Other Possible Solutions 1. Fix ``max-width`` from ``.sf-toolbar-block:hover .sf-toolbar-info`` class to ``512px``. (same result but the AJAX panel is a bit longer) 2. Fix ``max-width`` from ``.sf-toolbar-block:hover .sf-toolbar-info`` class to ``none`` or remove it. It would avoid future issues (mainly with third bundles) with children width greater than ``480px``. (Promising) ? //cc @javiereguiluz Commits ------- b0a8f8e Fixed max width from ajax request url element (td)
When the AJAX url path is very long, the profile
<td>
token value is not fully displayed.Before
After
Other Possible Solutions
max-width
from.sf-toolbar-block:hover .sf-toolbar-info
class to512px
. (same result but the AJAX panel is a bit longer)max-width
from.sf-toolbar-block:hover .sf-toolbar-info
class tonone
or remove it. It would avoid future issues (mainly with third bundles) with children width greater than480px
. (Promising) ?//cc @javiereguiluz