UI refinements #1601

nckrtl · 2024-04-01T21:48:59Z

This PR contains a lot of little refinements for the ui as discussed in #1593. As I was going through the queries tab and applying changes for the spacings I noticed I couldn't let the other tabs untouched as the changes also affected those.

So I went through all the tabs and made sure everything is well aligned there as well. This results in the PR being a bit hard to review by looking at the CSS changes. Probably better to checkout the branch and compare side by side. I know you mentioned to also apply changes in the base package if applicable but I haven't checked that yet. If you like the changes in this PR I could take another look to see if anything from this PR could be extracted to the base package.

Below are screenshots of dark mode but I made sure light mode also renders correctly.

The percentages bars were being displayed with table borders but I thought it would make sense to diplay them in light/dark background as the lines in Requests tabs are displayed as well. Making it a bit more consistent.

Updated spacing and line height of the lines in the error for bit better readability

I changed the color of the 1px line of the timeline measurement to blue to match the color that is being used on the timeline tab, felt more consistent like this. Also line height has been increased slightly for the table that contains the backtrace. Probably best to compare side by side

On the requests tab the background of the key items was not extending to the bottom of the of value items. This is now fixed and look a bit cleaner I think.

Adjust colours slightly and the table is moved up slightly to reduce the gap between the filters and the table

Slight spacing improvements and removed paddings. I could make it so that only the table will scroll and not the whole modal/popup content but will need to make a change in the base package I think.

If there is anything you don't like let me know and I'll take a look.

…into ui-refinements

parallels999 · 2024-04-01T22:16:07Z

src/Resources/laravel-debugbar.css

 div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar {
-    width: calc(100% - 20px);


Normally these -20 px were added when there is a lot of data the scrollbar appears, then a presentation problem occurred in the toolbar, maybe is a regression

Perhaps many of these changes should be applied first to maximebf/php-debugbar

Do you know perhaps of a specific tab that caused scrolling issues? And we're talking about an unwanted horizontal scrollbar right? I did get a horizontal scrollbar with the change you marked but I applied more changes to get rid of it.

I can certainly extract changes to the base package. I was just so far in with the changes that I thought it might make more sense to first gather feedback and then extract (if people would agree with it).

parallels999 · 2024-04-01T22:56:49Z

Updated spacing and line height of the lines in the error for bit better readability

You break it

parallels999 · 2024-04-01T22:59:21Z

The percentages bars were being displayed with table borders but I thought it would make sense to diplay them in light/dark background as the lines in Requests tabs are displayed as well. Making it a bit more consistent.

In this way, the final results can no longer be differentiated much from the timeline waterfall.
They can be confused as concurrent(yes could be concurrent, try views timeline)

parallels999 · 2024-04-01T23:02:18Z

With specific changes in different PRs it would be easier to review

…e exception tab

This prevented the first item to be able to expand properly

nckrtl · 2024-04-02T07:32:25Z

Updated spacing and line height of the lines in the error for bit better readability

You break it

Fixed

The percentages bars were being displayed with table borders but I thought it would make sense to diplay them in light/dark background as the lines in Requests tabs are displayed as well. Making it a bit more consistent.

In this way, the final results can no longer be differentiated much from the timeline waterfall. They can be confused as concurrent(yes could be concurrent, try views timeline)

Brought back table borders:

With specific changes in different PRs it would be easier to review

I could separate the changes in different PR's. Will need to extract some changes to the base package anyways as you mentioned that'd make more sense. But will do that once it's clear that these changes are considered an improvement. Waiting for more feedback for now.

barryvdh · 2024-04-02T09:12:03Z

I really like the query change, so that it's not the entire background :)

There seems to be some weird spacing if an item has multiple lines. Also visible on your screenshot, in the request_headers row.

On the requests tab the background of the key items was not extending to the bottom of the of value items. This is now fixed and look a bit cleaner I think.

Same with multiple middleware:

I see you changed the icons, but the close and browse icons still feel 'fuzzy' vs the other icons

Not sure if that was intended to change or not.

nckrtl · 2024-04-02T09:52:20Z

Thanks for the feedback and giving it a spin. Regarding the spacing you mean these spacings/indent right?

Seems it also has weird indents/spacing in the current version but my changes seem to have intensified the spacing. Will take a look at it. The middleware example is clear, will try and reproduce this.

I didn't change the icons actually. I adjusted the positioning but as the change happened on the same line as the base64 encoded value the whole line is seen by git to be updated I think. The fuzziness is being caused by the icons being base64 enconded PNG's, not SVGs. I can replace them for svg's which should solve the fuzziness.

barryvdh · 2024-04-02T10:23:45Z

Yeah I mean those indents.

I'll look at the icons myself then, maybe I can just fix it upstream.

Also seeing a lot of '!important` overrides, maybe it would be easier to change that in https://github.com/maximebf/php-debugbar/blob/master/src/DebugBar/Resources/debugbar.css ?

nckrtl · 2024-04-02T10:59:16Z

Yeah will give it a try moving some of the changes to that package. Will take a look at it later tonight. To be continued :)

barryvdh · 2024-04-02T12:55:25Z

Thanks!
For icons, I created maximebf/php-debugbar#644 which replaces the svgs with font-awesome icons, so it's more inline with the rest (and easier to change color)

nckrtl · 2024-04-03T07:56:47Z

Thanks for the feedback and giving it a spin. Regarding the spacing you mean these spacings/indent right? Seems it also has weird indents/spacing in the current version but my changes seem to have intensified the spacing. Will take a look at it. The middleware example is clear, will try and reproduce this.

I didn't change the icons actually. I adjusted the positioning but as the change happened on the same line as the base64 encoded value the whole line is seen by git to be updated I think. The fuzziness is being caused by the icons being base64 enconded PNG's, not SVGs. I can replace them for svg's which should solve the fuzziness.

Fixed, only applies to Laravel debugbar. It was caused by a width/margin/padding combination of value and key element.

barryvdh · 2024-04-03T08:22:42Z

Thanks! Looks better. Should I merge #1603 first or is that conflicting?

I also see that the active/highlight color is too short, but I think that was already the case 🤔

nckrtl · 2024-04-03T08:26:25Z

If you merge #1603 il take a look at the active/highlight height in this PR

barryvdh · 2024-04-03T08:32:26Z

Okay merged it :)

…nto ui-refinements

nckrtl · 2024-04-03T09:53:48Z

My latest commit is a bit messy but did the following things:

Replaced the Laravel icon for an SVG version, just to be more consistent with the other icon formats
Fixed the active tab height. Also no more gap between bottom header bar and other header items/tabs:

- Also applied some more alignment of the logo to better align with tab content - Text is also visually more centered in the tabs in combination with the pills/counters

barryvdh · 2024-04-03T09:58:18Z

Hmm it slight different with me. This is with dev-master of php-debugbar right?

On the right side it's correct

Only the dropdown is a bit crushed

nckrtl · 2024-04-03T10:34:24Z

@barryvdh Yeah, looking good for me in chrome and safari. What browser are you using? Do you still have the issue? I pushed some updates to better align the dropdown in different browsers

barryvdh · 2024-04-03T11:19:39Z

The dropdown is because of Filament, but I can fix that by forcing the line-height to 1em on the select.

The tabs are still a bit weird, but I can add height:100% to them and it's fixed.

Rest looks good, is this ready to go?

nckrtl · 2024-04-03T11:40:38Z

Alright. Yeah about the dropdown, I had something similar with a specific project that had styling for select elements. The base package could benefit from having dedicated select styling, so other projects won't affect it. Will look into it.

I think its ready to go yeah :)

barryvdh · 2024-04-03T11:48:31Z

Thanks, fixed the height in maximebf/php-debugbar@424be4f
Not sure why the 16px was needed, because it conflicted for me and doesn't seem to be required.

barryvdh · 2024-04-03T11:54:00Z

Looks good. It's tagged now on both versions just let's see what pops up :)

nckrtl · 2024-04-03T12:11:30Z

Thanks, fixed the height in maximebf/php-debugbar@424be4f Not sure why the 16px was needed, because it conflicted for me and doesn't seem to be required.

It was added to remove a 1px gap between some of the tab items and the bottom border of the header but your change also seems to do the trick, looking good at my end :)

If anything arises feel free to tag me, happy to take a look.

erikn69 · 2024-04-03T14:29:23Z

src/Resources/laravel-debugbar.css

@@ -579,6 +597,10 @@ ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item .phpdebugbar-widget
    max-width: 100%;
 }

+ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item {
+    line-height: 20px;


After this change seems like messages list grows too much on gate tab, and the icons are misaligned

Same on messages tab

Why don't just normal line height??

Also with the padding, it grows to 50px each item list on some tabs, Is it the expected behavior?

laravel-debugbar/src/Resources/laravel-debugbar.css

Lines 547 to 548 in 2f046cb

ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item {

padding: 7px 10px;

Definitely not expected behaviour, will see if I can replicate it somehow as it looks fine for me. Only thing that stands out to me is that your mono font being used is different compared to mine. Could also be a browser thing as well, could you share what you're using?

Edit: I seem to have it as well but less noticeable. Taking a look for a fix atm.

Try #1604, item list down to 35px for me, but I don't know how much the expected height is
On request an other tabs i have 29px height items,
There is no longer the consistency that there was before

I'm using brave

parallels999 · 2024-04-03T15:51:20Z

src/Resources/laravel-debugbar.css

@@ -307,13 +314,17 @@ dl.phpdebugbar-widgets-kvlist dd.phpdebugbar-widgets-value.phpdebugbar-widgets-p
 }

 dl.phpdebugbar-widgets-kvlist dt {
-    width: 25%;
+    width: calc(25%-10px);


Seems like this does'nt work,
It seems strange to me, take a look https://jsfiddle.net/o5uexhvd/

I thought it helped to better align these items:

Fixed, only applies to Laravel debugbar. It was caused by a width/margin/padding combination of value and key element.

But you're right that's not doing anything indeed, will put it on the list to undo. The alignment of the items must've been fixed by another change.

It seems that this should not be removed

#1605 (comment)

erikn69 · 2024-04-03T15:59:21Z

src/Resources/laravel-debugbar.css

 div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar {
-    width: calc(100% - 20px);


This is a regression,
the -20px was there to prevent the toolbar from obstructing the vertical scrollbar, on all the tabs extending messages

The same goes for the close button then? I expect you have this issue as well with the base package? http://phpdebugbar.com. On Mac the scrollbars hide or are half translucent when scrolling so I didn't encountered this. Is this IE or something?

Edit: Now I look at it again there is a scroll bar within your debugbar, got it.

barryvdh · 2024-04-03T17:05:24Z

So I've merged both your PR's. Anything missing?

nckrtl · 2024-04-03T17:10:53Z

Not from my end, all good. Are the issue fixed for you @parallels999 and @erikn69 ?

barryvdh · 2024-04-03T17:12:30Z

I do see that the color is off, not sure why that is:

And this link is not readable

nckrtl · 2024-04-03T17:48:32Z

Hmm can't seem to reproduce this, what looks like for me on the latest version and on master:

On page load I do see "View in Telescope" in blue for a split second and then it goes to the correct color.

nckrtl · 2024-04-03T17:50:34Z

Do you have it in other apps as well. All my local apps seem to render the texts correctly

erikn69 · 2024-04-03T18:18:57Z

I do see that the color is off, not sure why that is:

On some places, me too, there is a new text shadow or is it my imagination?

erikn69 · 2024-04-03T18:19:54Z

src/Resources/laravel-debugbar-dark-mode.css

@@ -31,8 +31,11 @@ div.phpdebugbar code.phpdebugbar-widgets-sql span.hljs-keyword,
 div.phpdebugbar-openhandler .phpdebugbar-openhandler-header,
 div.phpdebugbar-openhandler .phpdebugbar-openhandler-header a {
    color: var(--color-gray-200);
+    text-shadow: 1px 1px #000;


Maybe here??

Yeah I added that to make the text in the timeline waterfall better readable on blue background:

With the text shadow:

But quite some elements are affected by that change, perhaps too many:

I added that to make the text in the timeline waterfall better readable

Since there are many classes involved(also main div.phpdebugbar), I saw it everywhere.

barryvdh · 2024-04-03T19:39:32Z

Ah the color was because of quirks mode; https://stackoverflow.com/questions/24258380/font-color-in-a-table-doesnt-inherit-from-parent-div
maximebf/php-debugbar#646

erikn69 · 2024-04-03T19:43:27Z

@barryvdh is this expected? Seems hard to read

barryvdh · 2024-04-03T20:01:17Z

Hmm no, is that because of the color inherit?

erikn69 · 2024-04-03T20:06:26Z

is that because of the color inherit?

No, it seems that it was already there, it happens in dark theme

If you add color: white; there

parallels999 · 2024-04-12T17:34:51Z

Still not 100% aligned

Needs padding-top: 0;

UPDATE: fix on 1c80f3e

nckrtl added 5 commits April 1, 2024 21:02

wip

282b8b3

Merge branch 'master' of https://github.com/barryvdh/laravel-debugbar …

c6745a0

…into ui-refinements

additional tweaks

2ad2ade

wip

32aa7bf

add backgorund on odd rows in light mode for timeline tab

2665aaa

parallels999 reviewed Apr 1, 2024

View reviewed changes

nckrtl added 3 commits April 2, 2024 08:59

Bring back table borders for the timeline tab + fix line height in th…

7d35ace

…e exception tab

Remove fixed height of first child of the list item

6a05cd6

This prevented the first item to be able to expand properly

remove odd background color for table rows at the timeline

73fdd64

nckrtl mentioned this pull request Apr 2, 2024

Improve align of icons in the header on the right side maximebf/php-debugbar#645

Merged

Fix alignment of arrays and text in key value lists

7c08050

barryvdh mentioned this pull request Apr 3, 2024

Align SVG items #1603

Merged

undo change regarding laravel icon

0e8669d

nckrtl added 2 commits April 3, 2024 11:11

Merge branch 'master' of https://github.com/nckrtl/laravel-debugbar i…

10ee2a4

…nto ui-refinements

additional tweaks

10849a1

nckrtl added 2 commits April 3, 2024 12:21

css cleanup + bring back laravel icon in debugbar popup / open window

e37b451

better center alignment of the phpdebugbar-header-right items

edb2ef9

cleanup changes that can be moved to the base package

9418bfe

barryvdh merged commit 2f046cb into barryvdh:master Apr 3, 2024
25 checks passed

erikn69 reviewed Apr 3, 2024

View reviewed changes

erikn69 mentioned this pull request Apr 3, 2024

Fix css #1604

Merged

parallels999 reviewed Apr 3, 2024

View reviewed changes

erikn69 reviewed Apr 3, 2024

View reviewed changes

nckrtl mentioned this pull request Apr 3, 2024

Cleanup + fix for regression since UI refinement branch #1605

Merged

erikn69 reviewed Apr 3, 2024

View reviewed changes

nckrtl mentioned this pull request Apr 3, 2024

Reduce text shadow use #1606

Merged

erikn69 mentioned this pull request Apr 3, 2024

Fix dataset select #1607

Merged

parallels999 mentioned this pull request Apr 12, 2024

Fix forget cache button position on cache collector #1617

Merged

		div.phpdebugbar-widgets-messages div.phpdebugbar-widgets-toolbar {
		width: calc(100% - 20px);

	ul.phpdebugbar-widgets-list li.phpdebugbar-widgets-list-item {
	padding: 7px 10px;

UI refinements #1601

UI refinements #1601

Conversation

nckrtl commented Apr 1, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

parallels999 commented Apr 1, 2024

parallels999 commented Apr 1, 2024 • edited

parallels999 commented Apr 1, 2024

nckrtl commented Apr 2, 2024

barryvdh commented Apr 2, 2024

nckrtl commented Apr 2, 2024

barryvdh commented Apr 2, 2024

nckrtl commented Apr 2, 2024

barryvdh commented Apr 2, 2024

nckrtl commented Apr 3, 2024

barryvdh commented Apr 3, 2024

nckrtl commented Apr 3, 2024

barryvdh commented Apr 3, 2024

nckrtl commented Apr 3, 2024

barryvdh commented Apr 3, 2024

nckrtl commented Apr 3, 2024

barryvdh commented Apr 3, 2024

nckrtl commented Apr 3, 2024

barryvdh commented Apr 3, 2024

barryvdh commented Apr 3, 2024

nckrtl commented Apr 3, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nckrtl Apr 3, 2024 • edited

Choose a reason for hiding this comment

erikn69 Apr 3, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nckrtl Apr 3, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nckrtl Apr 3, 2024 • edited

Choose a reason for hiding this comment

barryvdh commented Apr 3, 2024

nckrtl commented Apr 3, 2024

barryvdh commented Apr 3, 2024

nckrtl commented Apr 3, 2024

nckrtl commented Apr 3, 2024

erikn69 commented Apr 3, 2024

Choose a reason for hiding this comment

nckrtl Apr 3, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

barryvdh commented Apr 3, 2024

erikn69 commented Apr 3, 2024

barryvdh commented Apr 3, 2024

erikn69 commented Apr 3, 2024 • edited

parallels999 commented Apr 12, 2024 • edited

parallels999 commented Apr 1, 2024 •

edited

nckrtl Apr 3, 2024 •

edited

erikn69 Apr 3, 2024 •

edited

nckrtl Apr 3, 2024 •

edited

nckrtl Apr 3, 2024 •

edited

nckrtl Apr 3, 2024 •

edited

erikn69 commented Apr 3, 2024 •

edited

parallels999 commented Apr 12, 2024 •

edited