add a layout debug mode that sets background colors #2953

aerickson · 2024-11-15T01:34:49Z

Makes debugging Toga's layout system easier by visually indicating container boundaries. See #2856.

features:

randomized background color (using colors optimized for color-blindness) for boxes
enabled via TOGA_DEBUG_LAYOUT env var

usage:

TOGA_DEBUG_LAYOUT=1 briefcase dev

PR Checklist:

All new features have been tested
All new features have been documented
I have read the CONTRIBUTING.md file
I will abide by the code of conduct

when TOGA_DEBUG_LAYOUT env var is 1, box background will be alternated

aerickson · 2024-11-15T01:36:15Z

Throwing this up for initial feedback, will complete docs and tests once things are looking good.

HalfWhitt · 2024-11-15T03:39:57Z

core/src/toga/widgets/base.py

@@ -33,6 +54,20 @@ def __init__(
        :param style: A style object. If no style is provided, a default style
            will be applied to the widget.
        """
+        # if the object has _USE_DEBUG_BACKGROUND=True and layout debug mode is on, change bg color
+        if hasattr(self, "_USE_DEBUG_BACKGROUND") and self._USE_DEBUG_BACKGROUND:


Hope I'm not butting in here, but a handy thing you may not be aware of: getattr() can take an optional third parameter as a default to supply if the attribute is missing. Dictionaries have a roughly analogous get() method, which returns None or a user-supplied default if the key is missing.

So lines 58 and 59 could do the same thing and be written as:

if getattr(self, "_USE_DEBUG_BACKGROUND", False): if environ.get("TOGA_DEBUG_LAYOUT") == "1":

freakboy3742 · 2024-11-15T04:00:16Z

changes/2953.feature.rst

@@ -0,0 +1 @@
+Added a layout debugging mode that sets containers to random background colors.


The change note is the draft of the release note for the feature, rather than being a commit summary; so - it should be worded in terms of "exiting new feature you can now use!!1!!BBQ!":

Suggested change

Added a layout debugging mode that sets containers to random background colors.

Toga now has a layout debugging mode. If you set ``TOGA_DEBUG_LAYOUT=1`` in your app's runtime environment, widgets will be rendered with different background colors, making it easier to identify how space is being allocated by Toga's layout algorithm.

freakboy3742 · 2024-11-15T04:02:57Z

core/src/toga/widgets/base.py

+                if Widget._debug_color_index == len(debug_background_palette) - 1:
+                    Widget._debug_color_index = 0
+                else:
+                    Widget._debug_color_index += 1
+                style = style if style else Pack()
+                style.background_color = debug_background_palette[
+                    Widget._debug_color_index
+                ]


Suggested change

if Widget._debug_color_index == len(debug_background_palette) - 1:

Widget._debug_color_index = 0

else:

Widget._debug_color_index += 1

style = style if style else Pack()

style.background_color = debug_background_palette[

Widget._debug_color_index

]

Widget._debug_color_index += 1

style = style if style else Pack()

style.background_color = debug_background_palette[

Widget._debug_color_index % len(debug_background_palette)

]

I don't think it would make a difference here, since one blank Pack should be the same as any other, but checking style is not None would be more consistent with other things that will interact with future versions of Travertino...

Edit: to clarify, as of beeware/travertino#143, style objects with no properties set evaluate as falsey.

freakboy3742 · 2024-11-15T04:04:59Z

core/tests/widgets/test_container_debug_mode.py

+def test_button_debug_background():
+    """A Button in layout debug mode has a default background."""
+    # Enable layout debug mode
+    environ["TOGA_DEBUG_LAYOUT"] = "1"


This modifies the global environment, so it will leak into external tests (which means this test can impact on other tests). For something like this, it's a good idea to use monkeypatch.setenv - that will automatically reset the environment variable when the test finishes.

freakboy3742 · 2024-11-15T04:05:34Z

core/tests/widgets/test_container_debug_mode.py

+
+    # need enough for coverage of palette array index rollover
+    box = toga.Box()
+    toga.Box()


for i in range(0, 10): ...

freakboy3742 · 2024-11-15T04:07:06Z

core/tests/widgets/test_container_debug_mode.py

+
+
+# test that a non-container-like widget in layout debug mode has a default background
+def test_button_debug_background():


Good idea testing a widget other than Box; - but also worth adding at test for (a) a container widget, and (b) a widget where the debug background won't be applied.

freakboy3742 · 2024-11-15T04:08:32Z

core/tests/widgets/test_container_debug_mode.py

+
+    # assert that the bg is not default/white
+    assert hasattr(box.style, "background_color")
+    assert not box.style.background_color == rgb(0, 0, 0)


"Not white" can cover a multitude of sins :-)

A better test would be to evaluate the specific colors for all the widgets created in a specific order. The order of allocation should be predictable, once you've found the color of the first box.

freakboy3742

I know this is still marked as a draft, but I couldn't help myself providing some initial feedback. tl;dr - this is all looking very promising; with a couple of fairly minor tweaks, it should be pretty close to merge-ready.

aerickson added 17 commits November 14, 2024 00:59

hack up layout debug mode

7c9a357

when TOGA_DEBUG_LAYOUT env var is 1, box background will be alternated

cleanup, randomize palette

0adb211

wip, move to base.Widget

b3581b2

fixin

e6bebae

undo mysterious change

99f6c45

more cleanup

1021b9c

set attr to false if not defined

1293697

get rid of global

0659f90

cleanup

89a5925

refactoring

4aa512c

set _use_debug_background on compatible widget-based objects

c82a2f8

rename to _USE_DEBUG_BACKGROUND

9c163ed

do better checking

92ab0e1

pre-commit fixes

a427782

narrow imports

21bd0f9

narrow import, rename

665f66e

simplify if block

dd2f9db

aerickson added 7 commits November 14, 2024 17:41

add towncrier note

01a819b

towncrier note: wording tweak

1cccdb6

fix coverage

c6d6ec3

test at a lower level

2654767

improve test

7043687

test the bg on a normal box

e9f9727

coverage fix attempt 99

4059931

HalfWhitt reviewed Nov 15, 2024

View reviewed changes

freakboy3742 reviewed Nov 15, 2024

View reviewed changes

freakboy3742 requested changes Nov 15, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add a layout debug mode that sets background colors #2953

add a layout debug mode that sets background colors #2953

aerickson commented Nov 15, 2024 •

edited

Loading

aerickson commented Nov 15, 2024

HalfWhitt Nov 15, 2024

freakboy3742 Nov 15, 2024

freakboy3742 Nov 15, 2024

HalfWhitt Nov 15, 2024 •

edited

Loading

freakboy3742 Nov 15, 2024

freakboy3742 Nov 15, 2024

freakboy3742 Nov 15, 2024

freakboy3742 Nov 15, 2024

freakboy3742 left a comment

		@@ -0,0 +1 @@
		Added a layout debugging mode that sets containers to random background colors.

	Added a layout debugging mode that sets containers to random background colors.
	Toga now has a layout debugging mode. If you set ``TOGA_DEBUG_LAYOUT=1`` in your app's runtime environment, widgets will be rendered with different background colors, making it easier to identify how space is being allocated by Toga's layout algorithm.



		# test that a non-container-like widget in layout debug mode has a default background
		def test_button_debug_background():

add a layout debug mode that sets background colors #2953

Are you sure you want to change the base?

add a layout debug mode that sets background colors #2953

Conversation

aerickson commented Nov 15, 2024 • edited Loading

PR Checklist:

aerickson commented Nov 15, 2024

HalfWhitt Nov 15, 2024

Choose a reason for hiding this comment

freakboy3742 Nov 15, 2024

Choose a reason for hiding this comment

freakboy3742 Nov 15, 2024

Choose a reason for hiding this comment

HalfWhitt Nov 15, 2024 • edited Loading

Choose a reason for hiding this comment

freakboy3742 Nov 15, 2024

Choose a reason for hiding this comment

freakboy3742 Nov 15, 2024

Choose a reason for hiding this comment

freakboy3742 Nov 15, 2024

Choose a reason for hiding this comment

freakboy3742 Nov 15, 2024

Choose a reason for hiding this comment

freakboy3742 left a comment

Choose a reason for hiding this comment

aerickson commented Nov 15, 2024 •

edited

Loading

HalfWhitt Nov 15, 2024 •

edited

Loading