notebook: Redo notebook implementation

So far, this only reworks the tabs at top implementation.
Windows doesn't have support for theming tabs at left/right/bottom
so we need to figure out what to do there. Wine falls back to
unthemed code.

2 files changed, 206 insertions, 238 deletions

diff --git a/gtk/theme/win32/gtk-win32-base.css b/gtk/theme/win32/gtk-win32-base.css
index 41b343fec4..014f9f6215 100644
--- a/gtk/theme/win32/gtk-win32-base.css
+++ b/gtk/theme/win32/gtk-win32-base.css
@@ -90,10 +90,6 @@ frame {
     color: #fff;
 }
 
-notebook > scrolledwindow.frame {
-    border-style: none;
-}
-
 scrolledwindow.frame {
   border-style: solid;
   border-width: 2px;
@@ -333,6 +329,212 @@ radiobutton:dir(rtl) radio {
   margin-left: 6px;
 }
 
+/* Notebooks */
+
+notebook > stack {
+    background-image: -gtk-win32-theme-part(tab, 9, 1);
+}
+
+notebook > header > tabs {
+    padding: 2px;
+}
+
+notebook > header.top > tabs {
+    padding-bottom: 0px;
+}
+
+notebook > header.right > tabs {
+    padding-left: 0px;
+}
+
+notebook > header.bottom > tabs {
+    padding-top: 0px;
+}
+
+notebook > header.left > tabs {
+    padding-right: 0px;
+}
+
+notebook > header > tabs > tab {
+    background-image: -gtk-win32-theme-part(tab, 1, 1);
+    padding-top: calc(1px + -gtk-win32-part-border-top(tab, 1, 1));
+    padding-right: calc(3px + -gtk-win32-part-border-right(tab, 1, 1));
+    padding-bottom: calc(2px + -gtk-win32-part-border-bottom(tab, 1, 1));
+    padding-left: calc(3px + -gtk-win32-part-border-left(tab, 1, 1));
+}
+
+notebook > header > tabs > tab:hover {
+    background-image: -gtk-win32-theme-part(tab, 1, 2);
+    padding-top: calc(1px + -gtk-win32-part-border-top(tab, 1, 2));
+    padding-right: calc(3px + -gtk-win32-part-border-right(tab, 1, 2));
+    padding-bottom: calc(2px + -gtk-win32-part-border-bottom(tab, 1, 2));
+    padding-left: calc(3px + -gtk-win32-part-border-left(tab, 1, 2));
+}
+
+notebook > header > tabs > tab:focus {
+    background-image: -gtk-win32-theme-part(tab, 1, 5);
+    padding-top: calc(1px + -gtk-win32-part-border-top(tab, 1, 5));
+    padding-right: calc(3px + -gtk-win32-part-border-right(tab, 1, 5));
+    padding-bottom: calc(2px + -gtk-win32-part-border-bottom(tab, 1, 5));
+    padding-left: calc(3px + -gtk-win32-part-border-left(tab, 1, 5));
+}
+
+notebook > header > tabs > tab:disabled {
+    background-image: -gtk-win32-theme-part(tab, 1, 4);
+    padding-top: calc(1px + -gtk-win32-part-border-top(tab, 1, 4));
+    padding-right: calc(3px + -gtk-win32-part-border-right(tab, 1, 4));
+    padding-bottom: calc(2px + -gtk-win32-part-border-bottom(tab, 1, 4));
+    padding-left: calc(3px + -gtk-win32-part-border-left(tab, 1, 4));
+}
+
+notebook > header > tabs > tab:checked {
+    background-image: -gtk-win32-theme-part(tab, 5, 3);
+    padding-top: calc(1px + -gtk-win32-part-border-top(tab, 5, 3));
+    padding-right: calc(5px + -gtk-win32-part-border-right(tab, 5, 3));
+    padding-bottom: calc(4px + -gtk-win32-part-border-bottom(tab, 5, 3));
+    padding-left: calc(5px + -gtk-win32-part-border-left(tab, 5, 3));
+    margin: -2px;
+}
+
+notebook > header > tabs > tab:first-child {
+    background-image: -gtk-win32-theme-part(tab, 2, 1);
+    padding-top: calc(1px + -gtk-win32-part-border-top(tab, 2, 1));
+    padding-right: calc(3px + -gtk-win32-part-border-right(tab, 2, 1));
+    padding-bottom: calc(2px + -gtk-win32-part-border-bottom(tab, 2, 1));
+    padding-left: calc(3px + -gtk-win32-part-border-left(tab, 2, 1));
+}
+
+notebook > header > tabs > tab:first-child:hover {
+    background-image: -gtk-win32-theme-part(tab, 2, 2);
+    padding-top: calc(1px + -gtk-win32-part-border-top(tab, 2, 2));
+    padding-right: calc(3px + -gtk-win32-part-border-right(tab, 2, 2));
+    padding-bottom: calc(2px + -gtk-win32-part-border-bottom(tab, 2, 2));
+    padding-left: calc(3px + -gtk-win32-part-border-left(tab, 2, 2));
+}
+
+notebook > header > tabs > tab:first-child:focus {
+    background-image: -gtk-win32-theme-part(tab, 1, 5);
+    padding-top: calc(1px + -gtk-win32-part-border-top(tab, 2, 5));
+    padding-right: calc(3px + -gtk-win32-part-border-right(tab, 2, 5));
+    padding-bottom: calc(2px + -gtk-win32-part-border-bottom(tab, 2, 5));
+    padding-left: calc(3px + -gtk-win32-part-border-left(tab, 2, 5));
+}
+
+notebook > header > tabs > tab:first-child:disabled {
+    background-image: -gtk-win32-theme-part(tab, 1, 4);
+    padding-top: calc(1px + -gtk-win32-part-border-top(tab, 2, 4));
+    padding-right: calc(3px + -gtk-win32-part-border-right(tab, 2, 4));
+    padding-bottom: calc(2px + -gtk-win32-part-border-bottom(tab, 2, 4));
+    padding-left: calc(3px + -gtk-win32-part-border-left(tab, 2, 4));
+}
+
+notebook > header > tabs > tab:first-child:checked {
+    background-image: -gtk-win32-theme-part(tab, 6, 3);
+    padding-top: calc(1px + -gtk-win32-part-border-top(tab, 6, 3));
+    padding-right: calc(5px + -gtk-win32-part-border-right(tab, 6, 3));
+    padding-bottom: calc(4px + -gtk-win32-part-border-bottom(tab, 6, 3));
+    padding-left: calc(5px + -gtk-win32-part-border-left(tab, 6, 3));
+    margin: -2px;
+}
+
+notebook > header > tabs > tab:last-child {
+    background-image: -gtk-win32-theme-part(tab, 3, 1);
+    padding-top: calc(1px + -gtk-win32-part-border-top(tab, 3, 1));
+    padding-right: calc(3px + -gtk-win32-part-border-right(tab, 3, 1));
+    padding-bottom: calc(2px + -gtk-win32-part-border-bottom(tab, 3, 1));
+    padding-left: calc(3px + -gtk-win32-part-border-left(tab, 3, 1));
+}
+
+notebook > header > tabs > tab:last-child:hover {
+    background-image: -gtk-win32-theme-part(tab, 3, 2);
+    padding-top: calc(1px + -gtk-win32-part-border-top(tab, 3, 2));
+    padding-right: calc(3px + -gtk-win32-part-border-right(tab, 3, 2));
+    padding-bottom: calc(2px + -gtk-win32-part-border-bottom(tab, 3, 2));
+    padding-left: calc(3px + -gtk-win32-part-border-left(tab, 3, 2));
+}
+
+notebook > header > tabs > tab:last-child:focus {
+    background-image: -gtk-win32-theme-part(tab, 3, 5);
+    padding-top: calc(1px + -gtk-win32-part-border-top(tab, 3, 5));
+    padding-right: calc(3px + -gtk-win32-part-border-right(tab, 3, 5));
+    padding-bottom: calc(2px + -gtk-win32-part-border-bottom(tab, 3, 5));
+    padding-left: calc(3px + -gtk-win32-part-border-left(tab, 3, 5));
+}
+
+notebook > header > tabs > tab:last-child:disabled {
+    background-image: -gtk-win32-theme-part(tab, 3, 4);
+    padding-top: calc(1px + -gtk-win32-part-border-top(tab, 3, 4));
+    padding-right: calc(3px + -gtk-win32-part-border-right(tab, 3, 4));
+    padding-bottom: calc(2px + -gtk-win32-part-border-bottom(tab, 3, 4));
+    padding-left: calc(3px + -gtk-win32-part-border-left(tab, 3, 4));
+}
+
+notebook > header > tabs > tab:last-child:checked {
+    background-image: -gtk-win32-theme-part(tab, 7, 3);
+    padding-top: calc(1px + -gtk-win32-part-border-top(tab, 7, 3));
+    padding-right: calc(5px + -gtk-win32-part-border-right(tab, 7, 3));
+    padding-bottom: calc(4px + -gtk-win32-part-border-bottom(tab, 7, 3));
+    padding-left: calc(5px + -gtk-win32-part-border-left(tab, 7, 3));
+    margin: -2px;
+}
+
+notebook > header > tabs > tab:only-child {
+    background-image: -gtk-win32-theme-part(tab, 4, 1);
+    padding-top: calc(1px + -gtk-win32-part-border-top(tab, 4, 1));
+    padding-right: calc(3px + -gtk-win32-part-border-right(tab, 4, 1));
+    padding-bottom: calc(2px + -gtk-win32-part-border-bottom(tab, 4, 1));
+    padding-left: calc(3px + -gtk-win32-part-border-left(tab, 4, 1));
+}
+
+notebook > header > tabs > tab:only-child:hover {
+    background-image: -gtk-win32-theme-part(tab, 4, 2);
+    padding-top: calc(1px + -gtk-win32-part-border-top(tab, 4, 2));
+    padding-right: calc(3px + -gtk-win32-part-border-right(tab, 4, 2));
+    padding-bottom: calc(2px + -gtk-win32-part-border-bottom(tab, 4, 2));
+    padding-left: calc(3px + -gtk-win32-part-border-left(tab, 4, 2));
+}
+
+notebook > header > tabs > tab:only-child:focus {
+    background-image: -gtk-win32-theme-part(tab, 4, 5);
+    padding-top: calc(1px + -gtk-win32-part-border-top(tab, 4, 5));
+    padding-right: calc(3px + -gtk-win32-part-border-right(tab, 4, 5));
+    padding-bottom: calc(2px + -gtk-win32-part-border-bottom(tab, 4, 5));
+    padding-left: calc(3px + -gtk-win32-part-border-left(tab, 4, 5));
+}
+
+notebook > header > tabs > tab:only-child:disabled {
+    background-image: -gtk-win32-theme-part(tab, 4, 4);
+    padding-top: calc(1px + -gtk-win32-part-border-top(tab, 4, 4));
+    padding-right: calc(3px + -gtk-win32-part-border-right(tab, 4, 4));
+    padding-bottom: calc(2px + -gtk-win32-part-border-bottom(tab, 4, 4));
+    padding-left: calc(3px + -gtk-win32-part-border-left(tab, 4, 4));
+}
+
+notebook > header > tabs > tab:only-child:checked {
+    background-image: -gtk-win32-theme-part(tab, 8, 3);
+    padding-top: calc(1px + -gtk-win32-part-border-top(tab, 8, 3));
+    padding-right: calc(5px + -gtk-win32-part-border-right(tab, 8, 3));
+    padding-bottom: calc(4px + -gtk-win32-part-border-bottom(tab, 8, 3));
+    padding-left: calc(5px + -gtk-win32-part-border-left(tab, 8, 3));
+    margin: -2px;
+}
+
+notebook > header.top > tabs > tab:checked {
+    margin-bottom: -1px;
+}
+
+notebook > header.right > tabs > tab:checked {
+    margin-left: -1px;
+}
+
+notebook > header.bottom > tabs > tab:checked {
+    margin-top: -1px;
+}
+
+notebook > header.left > tabs > tab:checked {
+    margin-right: -1px;
+}
+
 /* Scrollbars */
 
 /* TODO: Win32 has different concept for upper and lower trough, we
diff --git a/gtk/theme/win32/gtk.css b/gtk/theme/win32/gtk.css
index 846041cb94..dd0f2547a2 100644
--- a/gtk/theme/win32/gtk.css
+++ b/gtk/theme/win32/gtk.css
@@ -83,240 +83,6 @@ menuitem check:disabled:active:hover{
     border-width: 0;
 }
 
-/* Notebook */
-notebook {
-    /* This prevents a thin half-transparent line between the pane and the tab */
-    background-color: -gtk-win32-color(tab, window);
-
-    border-width: 1px 1px 1px 1px;
-    border-style: solid;
-    background-origin: padding-box;
-    background-clip: border-box;
-
-    /* W32 theme draws it with borders and all, cut them away */
-    background-image: -gtk-win32-theme-part(tab, 9, 1, margins(-1 -3 -2 -1));
-
-    /* Grab the borders now and duplicate them across the perimeter */
-    border-image: -gtk-win32-theme-part(tab, 9, 1, margins(0 -2 -1 0)) 1 1 1 1 repeat;
-    /* MSW7 themes draw tab overlaps differently. Net result is:
-       * inactive tab text never moves no matter which tabs get to be active
-       * active tab text moves only up
-       * active tab steals space from its neighbors (overlapping their borders without moving them)
-       * inactive tab does not steal any space from its neighbors (prelight makes that obvious - one tab's borders light up, its neighbors' don't change)
-       * first(last in RTL?) tab has extra gap that disappears (due to overlapping) when this tab activates
-       This can't be emulated in GTK, so we won't even try.
-    */
-}
-
-notebook tab {
-    /* Make sure parts not covered by the background are transparent */
-    background-color: transparent;
-
-    /* Use GTK border, since we can control where it's drawn (unlike built-in theme border, which is always left-top-right) */
-    border-width: 1px;
-    border-style: solid;
-    border-color: rgb(137, 140, 149);
-
-    /* Sadly, GTK CSS can't rotate images, which means that we can't use tabs from the theme */
-    background-image: none;
-    /* Don't use border image either, since it has no bottom border */
-    border-image: none;
-
-    /* By default tabs are large enough for their labels, give them more space */
-    padding: 2px;
-}
-
-/* W32 has no concept ofnotebook header (the rectangle where tabs are - including the area where tabs could be, if you add more of them), make it disappear */
-notebook.header {
-  background-color: transparent;
-  background-image: none;
-  border-width: 0px;
-  border-color: transparent;
-}
-
-/* Draw everything ourselves. Default MSW7 theme for a top tab (the only kind of tab available) is:
- 1-px grey border
- extra 1-px inside white borders to the left and the right
- top 8 pixels of the tab are light grey gradient (from 95% to 92% here)
- rest of the tab is dark grey gradient (quick 3-pixel fall from 87% to 85%, then uniform until half the way, then drops to 84%, last 4 pixels fall down to 81%)
-
- Prelight tab is the same as normal, but with light blue instead of grey.
- Active tabs (prelight ot not) are simple white.
- Disabled tabs are simple dark grey.
- There's also theme part for "focused" tab (simple pale blue), but it is unclear in which circumstances it's used.
-
- Normal and selected tab borders are grey.
- Prelight tab borders are blue.
- Disabled tab borders are darker grey.
- */
-notebook tab.top {
-    background-image: -gtk-gradient (linear,
-               0 0, 0 1,
-               color-stop(0, rgb(242, 242, 242)),
-               color-stop(0.2, rgb(235, 235, 235)),
-               color-stop(0.21, rgb(221, 221, 221)),
-               color-stop(0.22, rgb(216, 216, 216)),
-               color-stop(0.6, rgb(214, 214, 214)),
-               color-stop(0.9, rgb(214, 214, 214)),
-               color-stop(1, rgb(207, 207, 207)));
-    box-shadow: inset -1px 0px 0px white, inset 1px 0px 0px white;
-    /* Tab border is 1px (see above), override bottom border (for top tabs) to be 0px */
-    border-bottom: 0px;
-}
-
-notebook tab.top:hover {
-    background-image: -gtk-gradient (linear,
-               0 0, 0 1,
-               color-stop(0, rgb(234, 246, 253)),
-               color-stop(0.2, rgb(217, 240, 252)),
-               color-stop(0.21, rgb(190, 230, 253)),
-               color-stop(0.22, rgb(181, 226, 250)),
-               color-stop(0.6, rgb(178, 224, 249)),
-               color-stop(0.9, rgb(175, 222, 248)),
-               color-stop(1, rgb(167, 217, 245)));
-}
-
-notebook tab.left {
-    background-image: -gtk-gradient (linear,
-               0 0, 1 0,
-               color-stop(0, rgb(242, 242, 242)),
-               color-stop(0.2, rgb(235, 235, 235)),
-               color-stop(0.21, rgb(221, 221, 221)),
-               color-stop(0.22, rgb(216, 216, 216)),
-               color-stop(0.6, rgb(214, 214, 214)),
-               color-stop(0.9, rgb(214, 214, 214)),
-               color-stop(1, rgb(207, 207, 207)));
-
-    box-shadow: inset 0px -1px 0px white, inset 0px 1px 0px white;
-    /* Tab border is 1px (see above), override right border (for left tabs) to be 0px */
-    border-right: 0px;
-}
-
-notebook tab.left:hover {
-    background-image: -gtk-gradient (linear,
-               0 0, 1 0,
-               color-stop(0, rgb(234, 246, 253)),
-               color-stop(0.2, rgb(217, 240, 252)),
-               color-stop(0.21, rgb(190, 230, 253)),
-               color-stop(0.22, rgb(181, 226, 250)),
-               color-stop(0.6, rgb(178, 224, 249)),
-               color-stop(0.9, rgb(175, 222, 248)),
-               color-stop(1, rgb(167, 217, 245)));
-}
-
-notebook tab.right {
-    background-image: -gtk-gradient (linear,
-               1 0, 0 0,
-               color-stop(0, rgb(242, 242, 242)),
-               color-stop(0.2, rgb(235, 235, 235)),
-               color-stop(0.21, rgb(221, 221, 221)),
-               color-stop(0.22, rgb(216, 216, 216)),
-               color-stop(0.6, rgb(214, 214, 214)),
-               color-stop(0.9, rgb(214, 214, 214)),
-               color-stop(1, rgb(207, 207, 207)));
-
-    box-shadow: inset 0px 1px 0px white, inset 0px -1px 0px white;
-    /* Tab border is 1px (see above), override left border (for right tabs) to be 0px */
-    border-left: 0px;
-}
-
-notebook tab.right:hover {
-    background-image: -gtk-gradient (linear,
-               1 0, 0 0,
-               color-stop(0, rgb(234, 246, 253)),
-               color-stop(0.2, rgb(217, 240, 252)),
-               color-stop(0.21, rgb(190, 230, 253)),
-               color-stop(0.22, rgb(181, 226, 250)),
-               color-stop(0.6, rgb(178, 224, 249)),
-               color-stop(0.9, rgb(175, 222, 248)),
-               color-stop(1, rgb(167, 217, 245)));
-}
-
-notebook tab.bottom {
-    background-image: -gtk-gradient (linear,
-               0 1, 0 0,
-               color-stop(0, rgb(242, 242, 242)),
-               color-stop(0.2, rgb(235, 235, 235)),
-               color-stop(0.21, rgb(221, 221, 221)),
-               color-stop(0.22, rgb(216, 216, 216)),
-               color-stop(0.6, rgb(214, 214, 214)),
-               color-stop(0.9, rgb(214, 214, 214)),
-               color-stop(1, rgb(207, 207, 207)));
-    box-shadow: inset -1px 0px 0px white, inset 1px 0px 0px white;
-    /* Tab border is 1px (see above), override top border (for bottom tabs) to be 0px */
-    border-top: 0px;
-}
-
-notebook tab.bottom:hover {
-    background-image: -gtk-gradient (linear,
-               0 1, 0 0,
-               color-stop(0, rgb(234, 246, 253)),
-               color-stop(0.2, rgb(217, 240, 252)),
-               color-stop(0.21, rgb(190, 230, 253)),
-               color-stop(0.22, rgb(181, 226, 250)),
-               color-stop(0.6, rgb(178, 224, 249)),
-               color-stop(0.9, rgb(175, 222, 248)),
-               color-stop(1, rgb(167, 217, 245)));
-}
-
-notebook tab:active,
-notebook tab:active:hover,
-notebook tab.right:active,
-notebook tab.right:active:hover,
-notebook tab.bottom:active,
-notebook tab.bottom:active:hover,
-notebook tab.left:active,
-notebook tab.left:active:hover
-{
-    /* active tabs are pure white with grey borders, and prelight changes nothing */
-    background-image: none;
-    background-color: white;
-    border-color: rgb(137, 140, 149);
-}
-
-notebook tab:disabled,
-notebook tab:disabled,
-notebook tab.right:disabled,
-notebook tab.bottom:disabled,
-notebook tab.left:disabled
-{
-    /* insensitive tabs are dark grey white with even darker grey borders */
-    background-image: none;
-    background-color: rgb(201, 202, 203);
-    border-color: rgb(128, 128, 128);
-}
-
-notebook tab:hover,
-notebook tab.right:hover,
-notebook tab.bottom:hover,
-notebook tab.left:hover
-{
-    /* prelight tabs have blue borders */
-    border-color: rgb(60, 127, 177);
-}
-
-
-notebook tab.top:active {
-    /* Make active tab "stick out" up by padding it more at the bottom */
-    padding-bottom: 4px;
-}
-
-notebook tab.right:active {
-    /* Make active tab "stick out" right by padding it more at the left */
-    padding-left: 4px;
-}
-
-notebook tab.bottom:active {
-    /* Make active tab "stick out" down by padding it more at the top */
-    padding-top: 4px;
-}
-
-notebook tab.left:active {
-    /* Make active tab "stick out" left by padding it more at the right */
-    padding-right: 4px;
-}
-
-
 /* Listbox */
 
 /* We're cheating here, using part 6 (listview header group),