[5.3] Composer update debugbar to 2.1.1 and fix CSS for dark mode

[richard67]

Pull Request for Issue # .

Summary of Changes

This pull request (PR) updates the composed dependency "php-debugbar/php-debugbar" from version 2.1.0 to version 2.1.1.

This fixes a bug which might not be relevant for the CMS core but maybe for 3rd party extensions, but it should not do harm to be at the latest version with 5.3.0-beta1.

In addition, it adjust the build/media_source/plg_system_debug/css/debug.css file to the dark mode which was introduced with debugbar version 2.0.0 and PR #44806 and to show our Joomla icon again. Thanks @brianteeman for this.

Note that the dark mode of the debugbar is not controlled by the dark mode setting of the Atum template. It follows the OS or browser setting.
Release notes: https://github.com/php-debugbar/php-debugbar/releases/tag/v2.1.1

There is another PR for 5.2-dev, PR #44901 , which is different to this one here as with version 2 the composer package was renamed.

This will cause merge conflicts for the upmerge after the 2 PRs will be merged, which have to be resolved by keeping the version from 5.3-dev.

Testing Instructions

Enable "Debug System" in Global Configuration and set "Error Reporting" to "Maximum".

Then use all features of the debug bar.

Change some option of the "System - Debug" plugin, e.g. enable previously disabled options or vice versa, and check the result in the debug bar.

Test both light and dark mode of your OS (or use browser settings if the browser has that).

Actual result BEFORE applying this Pull Request

Debug bar works.

Expected result AFTER applying this Pull Request

Debug bar works as before.

In addition, when the OS or the browser are set to dark mode, the new dark mode of the debugbar introduced with #44806 has the right colors for the title bar.

Link to documentations

Please select:

• Documentation link for docs.joomla.org:

• No documentation changes for docs.joomla.org needed

• Pull Request link for manual.joomla.org:

• No documentation changes for manual.joomla.org needed

[alikon]

I have tested this item ✅ successfully on d3f9699

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/44902.}

[viocassel]

I have tested this item ✅ successfully on d3f9699

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/44902.}

[richard67]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/44902.}

[LadySolveig]

I have tested this item 🟢 successfully on d3f9699

Not readable if browser settings dark mode (tested in firefox).

However, this was already introduced in PR #44806 and is only indirectly related to this change.
I have checked the functionality and it works as expected.

New light

New Dark

Old

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/44902.}

[bembelimen]

Remove RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/44902.}

[richard67]

@LadySolveig Is that the case also without this PR? Looking at the change history of the debugbar they fixed only a small bug. So I would not expect this PR to introduce that issue.

[richard67]

@LadySolveig As I just tested, the issue happens also on a clean, current 5.3-dev branch without this PR here. On 5.2-dev we don't have it, so it was very likely introduced with the previous, bigger update of the debugbar with my PR #44806 .

[brianteeman]

no dark mode problems with chrome on windows

[brianteeman]

in my test the code for the debugbar never changes to use dark mode. It always stays as

<div class="phpdebugbar" data-bodymarginbottom="true" data-theme="light" data-openbtnposition="bottomLeft" data-hideemptytabs="false">

I have to manually change that line to data-theme="dark" to achieve the reported results.

[richard67]

@brianteeman It happens when you change to dark presentation setting in firefox settings. The data-theme attribute changes to "dark" in this case.

When switching to dark mode in the backend in the user menu, the debugbar indeed stays in bright mode.

[brianteeman]

found it. It uses dark mode when you set the OS to dark not just when you set joomla admin template to dark

[brianteeman]

found the cause of the problem

https://github.com/joomla/joomla-cms/blob/5.2-dev/build/media_source/plg_system_debug/css/debug.css

Looks like the changes in this file are causing the dark mode issues AND they arent even needed any more for light mode

[richard67]

@brianteeman Could that CSS also be the reason why the debugbar now has its own icon and not the Joomla icon?

[brianteeman]

yes. the css in that file needs to be changed. I will prepare a patch to your pr

[alikon]

just my silly experiment as a css dumb

removing

div.phpdebugbar-header, a.phpdebugbar-restore-btn {
  background: #efefef url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 149.7 149.6' width='30px' height='30px'><path fill='rgb(40,70,106)' d='M141.4 42v.5H140V46h-.5v-3.5h-1.3V42h3.2z'/><path fill='rgb(40,70,106)' d='M141.8 42h.8l1.1 3.3 1.1-3.3h.8v3.9h-.5v-2.3-.4-.6l-1.1 3.3h-.5l-1.1-3.3V45.8h-.5V42z'/><g><path d='M27 75.5l-2.9-2.9c-8.9-8.9-11.7-21.7-8.3-33C6.9 37.6.2 29.6.2 20.1c0-11.1 9-20 20-20 10 0 18.2 7.3 19.8 16.8 10.8-2.5 22.6.4 31.1 8.8l1.2 1.2-14.9 14.7-1.1-1.2c-4.8-4.8-12.6-4.8-17.4 0-4.8 4.8-4.8 12.6 0 17.4l2.9 2.9 14.8 14.8 15.6 15.6-14.8 14.8-15.6-15.7L27 75.5z' fill='rgb(40,70,106)'/><path d='M43.5 58.9l15.6-15.6 14.8-14.8 2.9-2.9c8.9-8.9 21.6-11.7 32.8-8.4C111 7.5 119.4 0 129.5 0c11.1 0 20 9 20 20 0 10.2-7.6 18.6-17.4 19.9 3.2 11.2.4 23.8-8.4 32.7l-1.2 1.2L107.7 59l1.1-1.1c4.8-4.8 4.8-12.6 0-17.4-4.8-4.8-12.5-4.8-17.4 0l-2.9 2.9-14.6 14.7-15.6 15.6-14.8-14.8z' fill='rgb(40,70,106)'/><path d='M110.1 133.5c-11.4 3.5-24.2.7-33.2-8.3l-1.1-1.1 14.8-14.8 1.1 1.1c4.8 4.8 12.6 4.8 17.4 0 4.8-4.8 4.8-12.5 0-17.4l-2.9-2.9-14.9-14.6-15.6-15.7L90.5 45l15.6 15.6 14.8 14.8 2.9 2.9c8.5 8.5 11.4 20.5 8.8 31.3 9.7 1.4 17.2 9.7 17.2 19.8 0 11.1-9 20-20 20-9.8.2-17.9-6.7-19.7-15.9z' fill='rgb(40,70,106)'/><path d='M104.3 92l-15.6 15.6-14.8 14.8-2.9 2.9c-8.5 8.5-20.6 11.4-31.5 8.7-2 8.9-10 15.5-19.5 15.5-11.1 0-20-9-20-20 0-9.5 6.6-17.4 15.4-19.5-2.8-11 .1-23.1 8.7-31.7l1.1-1.1L40 92l-1.1 1.1c-4.8 4.8-4.8 12.6 0 17.4 4.8 4.8 12.6 4.8 17.4 0l2.9-2.9L74 92.8l15.6-15.6L104.3 92z' fill='rgb(40,70,106)'/></g></svg>")  no-repeat 5px 4px / 20px 20px !important;
}

from our css override of debug.css

i'll re-test when @brianteeman patch will be in the pr

[brianteeman]

the correct fix is to change all the content of that css file as follows (sorry wont let me submit a pr)

/**
 * @copyright  (C) 2012 Open Source Matters, Inc. <https://www.joomla.org>
 * @license    GNU General Public License version 2 or later; see LICENSE.txt
 */

/* Debug Bar Joomla Logo */
a.phpdebugbar-restore-btn:after {
  background: #efefef url("data:image/svg+xml;utf8,<svg fill='var(--debugbar-accent)' width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M16.719 14.759 14.22 17.26l-2.37 2.37-.462.466a5.33 5.33 0 0 1-5.047 1.397 3.21 3.21 0 1 1-3.872-3.844 5.32 5.32 0 0 1 1.396-5.08l.179-.18 2.37 2.37-.184.181a1.974 1.974 0 0 0 0 2.789c.771.78 2.022.78 2.787 0l.465-.465 2.367-2.371 2.502-2.506zm.924 6.652a5.32 5.32 0 0 1-5.328-1.318l-.18-.185 2.365-2.369.18.184a1.974 1.974 0 0 0 2.787 0 1.965 1.965 0 0 0-.004-2.781l-.466-.465-2.365-2.37-2.502-2.503 2.37-2.369 2.499 2.505 2.367 2.37.464.464a5.28 5.28 0 0 1 1.411 5.021A3.215 3.215 0 0 1 24 20.775a3.204 3.204 0 0 1-3.209 3.21 3.19 3.19 0 0 1-3.135-2.565zM6.975 9.461l2.508-2.505 2.37-2.369.462-.461A5.3 5.3 0 0 1 17.58 2.79 3.215 3.215 0 0 1 20.759.015a3.211 3.211 0 0 1 .421 6.395 5.31 5.31 0 0 1-1.35 5.234l-.182.184-2.369-2.369.184-.184a1.967 1.967 0 1 0-2.781-2.78l-.462.461-2.37 2.369-2.505 2.502zm-2.653 2.647-.461-.462a5.31 5.31 0 0 1-1.332-5.288A3.22 3.22 0 0 1 .03 3.224C.03 1.454 1.47.015 3.24.015a3.215 3.215 0 0 1 3.17 2.691 5.32 5.32 0 0 1 4.979 1.415l.184.185-2.37 2.37-.183-.181a1.977 1.977 0 0 0-2.785 0 1.977 1.977 0 0 0-.005 2.79l.465.466 2.37 2.369 2.505 2.505-2.367 2.37-2.51-2.505-2.371-2.37z'/></svg>")  no-repeat 5px 4px / 20px 20px !important;
}

this will produce

[richard67]

the correct fix is to change all the content of that css file as follows (sorry wont let me submit a pr)

@brianteeman How have you tried to create the PR? On GitHub? If so: No idea why that doesn't work. But I assume right that your change does not make the debugbar follow the backend template setting regarding dark mode, right?

[richard67]

@alikon @viocassel @LadySolveig The PR has received a CSS change for the dark mode. See also the changed description of this PR. Could you test again? Thanks in advance.

@LadySolveig @bembelimen Please if possible make sure that Brian is mentioned as co-author in the commit description when merging this PR. This can be achieved by adding the following at the bottom of the commit description:

---------

Co-authored-by: Brian Teeman <brian@teeman.net>

[LadySolveig]

I have tested this item ✅ successfully on d48bb4f

Dark/Light Mode arre now displayed correctly.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/44902.}

[bembelimen]

I have tested this item ✅ successfully on 2d11214

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/44902.}

[bembelimen]

Thanks for the fix @richard67 & @brianteeman and thanks for testing @LadySolveig & @alikon & @viocassel

[richard67]

Yes, thanks all.