[gtk/matthiasc/for-master] inspector: Add a legend for the layout overlay

[Matthias Clasen <matthiasc src gnome org>]

commit 691b6b88ead6abfe8d675e42bc24c07a7df9a579
Author: Matthias Clasen <mclasen redhat com>
Date:   Sat Jan 16 12:38:24 2021 -0500

    inspector: Add a legend for the layout overlay
    
    Colors are more useful if you know what they represent.

 gtk/inspector/inspector.css |  24 ++++++++++
 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"/>