diff options
| author | Matthias Clasen <mclasen@redhat.com> | 2021-01-16 12:38:24 -0500 |
|---|---|---|
| committer | Matthias Clasen <mclasen@redhat.com> | 2021-01-16 12:38:24 -0500 |
| commit | 691b6b88ead6abfe8d675e42bc24c07a7df9a579 (patch) | |
| tree | 673fcf004feba241df99666596fcbf3f09746436 | |
| parent | 2ee1a00177b06fbc40faa4f6e2b88b11a3a2a3e8 (diff) | |
| download | gtk+-691b6b88ead6abfe8d675e42bc24c07a7df9a579.tar.gz | |
inspector: Add a legend for the layout overlay
Colors are more useful if you know what they represent.
| -rw-r--r-- | gtk/inspector/inspector.css | 24 | ||||
| -rw-r--r-- | gtk/inspector/visual.ui | 112 |
2 files changed, 130 insertions, 6 deletions
diff --git a/gtk/inspector/inspector.css b/gtk/inspector/inspector.css index 151cbb92ca..ba14df0ed3 100644 --- a/gtk/inspector/inspector.css +++ b/gtk/inspector/inspector.css @@ -59,3 +59,27 @@ picture.dark { picture.light { background: white; } + +#css-padding-color { + background-color: rgba(70%, 0%, 70%, 0.6); + min-width: 10px; + min-height: 10px; +} + +#css-border-color { + background-color: rgba(0, 0, 0, 0.0); + min-width: 10px; + min-height: 10px; +} + +#css-margin-color { + background-color: rgba(70%, 70%, 0%, 0.6); + min-width: 10px; + min-height: 10px; +} + +#widget-margin-color { + background-color: rgba(70%, 0%, 0%, 0.6); + min-width: 10px; + min-height: 10px; +} diff --git a/gtk/inspector/visual.ui b/gtk/inspector/visual.ui index fc221b8fd1..f919cf541e 100644 --- a/gtk/inspector/visual.ui +++ b/gtk/inspector/visual.ui @@ -480,11 +480,111 @@ <object class="GtkBox"> <property name="spacing">40</property> <child> - <object class="GtkLabel" id="layout_label"> - <property name="label" translatable="yes">Show Layout Borders</property> - <property name="halign">start</property> - <property name="valign">baseline</property> - <property name="xalign">0.0</property> + <object class="GtkBox" id="layout_label_box"> + <property name="spacing">6</property> + <child> + <object class="GtkLabel" id="layout_label"> + <property name="label" translatable="yes">Show Layout Borders</property> + <property name="halign">start</property> + <property name="valign">baseline</property> + <property name="xalign">0.0</property> + </object> + </child> + <child> + <object class="GtkMenuButton"> + <property name="icon-name">dialog-question-symbolic</property> + <property name="popover"> + <object class="GtkPopover"> + <child> + <object class="GtkGrid"> + <property name="margin-top">10</property> + <property name="margin-bottom">10</property> + <property name="margin-start">10</property> + <property name="margin-end">10</property> + <property name="row-spacing">4</property> + <property name="column-spacing">4</property> + <child> + <object class="GtkDrawingArea"> + <property name="name">css-padding-color</property> + <layout> + <property name="column">0</property> + <property name="row">0</property> + </layout> + </object> + </child> + <child> + <object class="GtkDrawingArea"> + <property name="name">css-border-color</property> + <layout> + <property name="column">0</property> + <property name="row">1</property> + </layout> + </object> + </child> + <child> + <object class="GtkDrawingArea"> + <property name="name">css-margin-color</property> + <layout> + <property name="column">0</property> + <property name="row">2</property> + </layout> + </object> + </child> + <child> + <object class="GtkDrawingArea"> + <property name="name">widget-margin-color</property> + <layout> + <property name="column">0</property> + <property name="row">3</property> + </layout> + </object> + </child> + <child> + <object class="GtkLabel"> + <property name="label" translatable="yes">CSS Padding</property> + <property name="xalign">0</property> + <layout> + <property name="column">1</property> + <property name="row">0</property> + </layout> + </object> + </child> + <child> + <object class="GtkLabel"> + <property name="label" translatable="yes">CSS Border</property> + <property name="xalign">0</property> + <layout> + <property name="column">1</property> + <property name="row">1</property> + </layout> + </object> + </child> + <child> + <object class="GtkLabel"> + <property name="label" translatable="yes">CSS Margin</property> + <property name="xalign">0</property> + <layout> + <property name="column">1</property> + <property name="row">2</property> + </layout> + </object> + </child> + <child> + <object class="GtkLabel"> + <property name="label" translatable="yes">Widget Margin</property> + <property name="xalign">0</property> + <layout> + <property name="column">1</property> + <property name="row">3</property> + </layout> + </object> + </child> + </object> + </child> + </object> + </property> + </object> + </child> </object> </child> <child> @@ -612,7 +712,7 @@ <widget name="updates_label"/> <widget name="fallback_label"/> <widget name="baselines_label"/> - <widget name="layout_label"/> + <widget name="layout_label_box"/> <widget name="focus_label"/> <widget name="touchscreen_label"/> <widget name="software_gl_label"/> |