[gtk/wip/otte/listview: 106/169] expander: Rename CSS nodes

[Benjamin Otte <otte src gnome org>]

commit 6d20fe0bf9f00e01a5545a26fde3637edd262edc
Author: Benjamin Otte <otte redhat com>
Date:   Sun Oct 13 21:00:40 2019 +0200

    expander: Rename CSS nodes
    
    The expander icon is renamed from "arrow" to "expander".
    The expander widget itself is renamed from "expander" to
    "expander-widget" (Better ideas welcome).
    
    This makes it possible to have an "expander" icon in more places then
    the GtkExpander widget (in particular in tree lists) and not
    confuse it with arrows.

 gtk/gtkexpander.c                                |  4 ++--
 gtk/theme/Adwaita/_common.scss                   | 22 ++++++++++------------
 gtk/theme/Adwaita/gtk-contained-dark.css         | 12 ++++++------
 gtk/theme/Adwaita/gtk-contained.css              | 12 ++++++------
 gtk/theme/HighContrast/_common.scss              | 20 +++++++++-----------
 gtk/theme/HighContrast/gtk-contained-inverse.css | 16 ++++++++--------
 gtk/theme/HighContrast/gtk-contained.css         | 16 ++++++++--------
 testsuite/css/nodes/expander.ltr.nodes           |  4 ++--
 testsuite/css/nodes/expander.rtl.nodes           |  4 ++--
 9 files changed, 53 insertions(+), 57 deletions(-)
---
diff --git a/gtk/gtkexpander.c b/gtk/gtkexpander.c
index 28cd5fe9ee..7b484f10ba 100644
--- a/gtk/gtkexpander.c
+++ b/gtk/gtkexpander.c
@@ -342,7 +342,7 @@ gtk_expander_class_init (GtkExpanderClass *klass)
                   G_TYPE_NONE, 0);
 
   gtk_widget_class_set_accessible_type (widget_class, GTK_TYPE_EXPANDER_ACCESSIBLE);
-  gtk_widget_class_set_css_name (widget_class, I_("expander"));
+  gtk_widget_class_set_css_name (widget_class, I_("expander-widget"));
 }
 
 static void
@@ -370,7 +370,7 @@ gtk_expander_init (GtkExpander *expander)
                                      NULL);
   gtk_container_add (GTK_CONTAINER (priv->box), priv->title_widget);
 
-  priv->arrow_widget = gtk_icon_new ("arrow");
+  priv->arrow_widget = gtk_icon_new ("expander");
   gtk_style_context_add_class (gtk_widget_get_style_context (priv->arrow_widget),
                                GTK_STYLE_CLASS_HORIZONTAL);
   gtk_container_add (GTK_CONTAINER (priv->title_widget), priv->arrow_widget);
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 8bd7f993ce..b96dc9a631 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -3798,21 +3798,19 @@ row {
  * Expanders *
  *************/
 expander {
-  title > arrow {
-    min-width: 16px;
-    min-height: 16px;
-    -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
-    &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
+  min-width: 16px;
+  min-height: 16px;
+  -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+  &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
 
-    &:disabled { color: $insensitive_fg_color; }
-    &:disabled:backdrop { color: $backdrop_insensitive_color; }
-  }
+  &:disabled { color: $insensitive_fg_color; }
+  &:disabled:backdrop { color: $backdrop_insensitive_color; }
 
-  title > arrow:checked, title:checked > arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+  &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
+}
 
-  title:hover > arrow {
-    color: lighten($fg_color,30%); //only lightens the arrow
-  }
+expander-widget title:hover > expander {
+  color: lighten($fg_color,30%); //only lightens the icon 
 }
 
 
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index e0dfd79c20..04a4c1303d 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1655,17 +1655,17 @@ row.activatable:selected:backdrop { background-color: #15539e; }
 .app-notification border, .app-notification.frame border { border: none; }
 
 /************* Expanders * */
-expander title > arrow { min-width: 16px; min-height: 16px; -gtk-icon-source: 
-gtk-icontheme("pan-end-symbolic"); }
+expander { min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
 
-expander title > arrow:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); }
+expander:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); }
 
-expander title > arrow:disabled { color: #919190; }
+expander:disabled { color: #919190; }
 
-expander title > arrow:disabled:backdrop { color: #5b5b5b; }
+expander:disabled:backdrop { color: #5b5b5b; }
 
-expander title > arrow:checked, expander title:checked > arrow { -gtk-icon-source: 
-gtk-icontheme("pan-down-symbolic"); }
+expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
 
-expander title:hover > arrow { color: white; }
+expander-widget title:hover > expander { color: white; }
 
 /************ Calendar * */
 calendar { color: white; border: 1px solid #1b1b1b; }
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 4504c1f56f..1eb0a12099 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1671,17 +1671,17 @@ row.activatable:selected:backdrop { background-color: #3584e4; }
 .app-notification border, .app-notification.frame border { border: none; }
 
 /************* Expanders * */
-expander title > arrow { min-width: 16px; min-height: 16px; -gtk-icon-source: 
-gtk-icontheme("pan-end-symbolic"); }
+expander { min-width: 16px; min-height: 16px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
 
-expander title > arrow:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); }
+expander:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); }
 
-expander title > arrow:disabled { color: #929595; }
+expander:disabled { color: #929595; }
 
-expander title > arrow:disabled:backdrop { color: #d4cfca; }
+expander:disabled:backdrop { color: #d4cfca; }
 
-expander title > arrow:checked, expander title:checked > arrow { -gtk-icon-source: 
-gtk-icontheme("pan-down-symbolic"); }
+expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
 
-expander title:hover > arrow { color: #748489; }
+expander-widget title:hover > expander { color: #748489; }
 
 /************ Calendar * */
 calendar { color: black; border: 1px solid #cdc7c2; }
diff --git a/gtk/theme/HighContrast/_common.scss b/gtk/theme/HighContrast/_common.scss
index ed70a0f839..5cf5dc4854 100644
--- a/gtk/theme/HighContrast/_common.scss
+++ b/gtk/theme/HighContrast/_common.scss
@@ -2763,20 +2763,18 @@ row.activatable {
  *************/
 
 expander {
-  title > arrow {
-    min-width: 24px;
-    min-height: 24px;
-    -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
-    &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
+  min-width: 24px;
+  min-height: 24px;
+  -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
+  &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
 
-    &:disabled { color: $insensitive_fg_color; }
+  &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
 
-    &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
-  }
+  &:disabled { color: $insensitive_fg_color; }
+}
 
-  title:hover > arrow {
-    color: lighten($fg_color,30%); //only lightens the arrow
-  }
+expander-widget title:hover > expander {
+  color: lighten($fg_color,30%); //only lightens the icon 
 }
 
 /************
diff --git a/gtk/theme/HighContrast/gtk-contained-inverse.css 
b/gtk/theme/HighContrast/gtk-contained-inverse.css
index e01c521f7b..e4467931d2 100644
--- a/gtk/theme/HighContrast/gtk-contained-inverse.css
+++ b/gtk/theme/HighContrast/gtk-contained-inverse.css
@@ -675,7 +675,7 @@ notebook.frame { border: 1px solid gray; }
 
 notebook.frame:backdrop { border-color: #737373; }
 
-notebook header { background-color: #262626; }
+notebook header { background-color: #131313; }
 
 .frame notebook header { border: 1px solid gray; }
 
@@ -789,11 +789,11 @@ notebook tab:backdrop { background-color: transparent; border-color: transparent
 
 .right notebook tab.reorderable-page:backdrop { border-color: transparent; background-color: transparent; }
 
-notebook tab label { padding: 0 2px; font-weight: bold; color: gray; /* color: inherit doesn't work here */ }
+notebook tab label { padding: 0 2px; font-weight: bold; color: silver; /* color: inherit doesn't work here 
*/ }
 
 notebook tab label:backdrop { color: gray; }
 
-notebook tab:hover label { color: silver; }
+notebook tab:hover label { color: #dfdfdf; }
 
 notebook tab:checked label { color: #fff; }
 
@@ -1242,15 +1242,15 @@ row:hover, row.activatable:hover { transition: none; }
 .app-notification border, .app-notification.frame border { border-width: 0; }
 
 /************* Expanders * */
-expander title > arrow { min-width: 24px; min-height: 24px; -gtk-icon-source: 
-gtk-icontheme("pan-end-symbolic"); }
+expander { min-width: 24px; min-height: 24px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
 
-expander title > arrow:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); }
+expander:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); }
 
-expander title > arrow:disabled { color: gray; }
+expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
 
-expander title > arrow:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
+expander:disabled { color: gray; }
 
-expander title:hover > arrow { color: white; }
+expander-widget title:hover > expander { color: white; }
 
 /************ Calendar * */
 calendar { border: 1px solid gray; }
diff --git a/gtk/theme/HighContrast/gtk-contained.css b/gtk/theme/HighContrast/gtk-contained.css
index ad846885a7..f9c3a11048 100644
--- a/gtk/theme/HighContrast/gtk-contained.css
+++ b/gtk/theme/HighContrast/gtk-contained.css
@@ -679,7 +679,7 @@ notebook.frame { border: 1px solid gray; }
 
 notebook.frame:backdrop { border-color: #8d8d8d; }
 
-notebook header { background-color: #d9d9d9; }
+notebook header { background-color: #ececec; }
 
 .frame notebook header { border: 1px solid gray; }
 
@@ -793,11 +793,11 @@ notebook tab:backdrop { background-color: transparent; border-color: transparent
 
 .right notebook tab.reorderable-page:backdrop { border-color: transparent; background-color: transparent; }
 
-notebook tab label { padding: 0 2px; font-weight: bold; color: gray; /* color: inherit doesn't work here */ }
+notebook tab label { padding: 0 2px; font-weight: bold; color: #404040; /* color: inherit doesn't work here 
*/ }
 
 notebook tab label:backdrop { color: gray; }
 
-notebook tab:hover label { color: #404040; }
+notebook tab:hover label { color: #202020; }
 
 notebook tab:checked label { color: #000; }
 
@@ -1248,15 +1248,15 @@ row:hover, row.activatable:hover { transition: none; }
 .app-notification border, .app-notification.frame border { border-width: 0; }
 
 /************* Expanders * */
-expander title > arrow { min-width: 24px; min-height: 24px; -gtk-icon-source: 
-gtk-icontheme("pan-end-symbolic"); }
+expander { min-width: 24px; min-height: 24px; -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
 
-expander title > arrow:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); }
+expander:dir(rtl) { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic-rtl"); }
 
-expander title > arrow:disabled { color: gray; }
+expander:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
 
-expander title > arrow:checked { -gtk-icon-source: -gtk-icontheme("pan-down-symbolic"); }
+expander:disabled { color: gray; }
 
-expander title:hover > arrow { color: #4d4d4d; }
+expander-widget title:hover > expander { color: #4d4d4d; }
 
 /************ Calendar * */
 calendar { border: 1px solid gray; }
diff --git a/testsuite/css/nodes/expander.ltr.nodes b/testsuite/css/nodes/expander.ltr.nodes
index 25150e50fc..efe3ddd2d3 100644
--- a/testsuite/css/nodes/expander.ltr.nodes
+++ b/testsuite/css/nodes/expander.ltr.nodes
@@ -1,7 +1,7 @@
 [window.background:dir(ltr)]
   decoration:dir(ltr)
-  expander:dir(ltr)
+  expander-widget:dir(ltr)
     box.vertical:dir(ltr)
       title.horizontal:dir(ltr)
-        arrow.horizontal:dir(ltr)
+        expander.horizontal:dir(ltr)
         label:dir(ltr)
diff --git a/testsuite/css/nodes/expander.rtl.nodes b/testsuite/css/nodes/expander.rtl.nodes
index 30b4804e51..17b3c7e61d 100644
--- a/testsuite/css/nodes/expander.rtl.nodes
+++ b/testsuite/css/nodes/expander.rtl.nodes
@@ -1,7 +1,7 @@
 [window.background:dir(rtl)]
   decoration:dir(rtl)
-  expander:dir(rtl)
+  expander-widget:dir(rtl)
     box.vertical:dir(rtl)
       title.horizontal:dir(rtl)
-        arrow.horizontal:dir(rtl)
+        expander.horizontal:dir(rtl)
         label:dir(rtl)