OLD | NEW |
1 # Introduction | 1 # Linux GTK Theme Integration |
2 | 2 |
3 The GTK+ port of Chromium has a mode where we try to match the user's GTK theme
(which can be enabled under Wrench -> Options -> Personal Stuff -> Set to GTK+ t
heme). The heuristics often don't pick good colors due to a lack of information
in the GTK themes. | 3 The GTK+ port of Chromium has a mode where we try to match the user's GTK theme |
| 4 (which can be enabled under Wrench -> Options -> Personal Stuff -> Set to GTK+ |
| 5 theme). The heuristics often don't pick good colors due to a lack of information |
| 6 in the GTK themes. |
4 | 7 |
5 Starting in Chrome 9, we're providing a new way for theme authors to control our
GTK+ theming mode. I am not sure of the earliest build these showed up in, but
I know 9.0.597 works. | 8 Starting in Chrome 9, we're providing a new way for theme authors to control our |
| 9 GTK+ theming mode. I am not sure of the earliest build these showed up in, but I |
| 10 know 9.0.597 works. |
6 | 11 |
7 # Describing the previous heuristics | 12 ## Describing the previous heuristics |
8 | 13 |
9 The frame heuristics were simple. Query the `bg[SELECTED]` and `bg[INSENSITIVE]`
colors on the `MetaFrames` class and darken them slightly. This usually worked
OK until the rise of themes that try to make a unified titlebar/menubar look. At
roughly that time, it seems that people stopped specifying color information fo
r the `MetaFrames` class and this has lead to the very orange chrome frame on Ma
verick. | 14 The frame heuristics were simple. Query the `bg[SELECTED]` and `bg[INSENSITIVE]` |
| 15 colors on the `MetaFrames` class and darken them slightly. This usually worked |
| 16 OK until the rise of themes that try to make a unified titlebar/menubar look. At |
| 17 roughly that time, it seems that people stopped specifying color information for |
| 18 the `MetaFrames` class and this has lead to the very orange chrome frame on |
| 19 Maverick. |
10 | 20 |
11 `MetaFrames` is (was?) a class that was used to communicate frame color data to
the window manager around the Hardy days. (It's still defined in most of [XFCE's
themes](http://packages.ubuntu.com/maverick/gtk2-engines-xfce)). In chrome's im
plementation, `MetaFrames` derives from `GtkWindow`. | 21 `MetaFrames` is (was?) a class that was used to communicate frame color data to |
| 22 the window manager around the Hardy days. (It's still defined in most of |
| 23 [XFCE's themes](http://packages.ubuntu.com/maverick/gtk2-engines-xfce)). In |
| 24 chrome's implementation, `MetaFrames` derives from `GtkWindow`. |
12 | 25 |
13 If you are happy with the defaults that chrome has picked, no action is necessar
y on the part of the theme author. | 26 If you are happy with the defaults that chrome has picked, no action is |
| 27 necessary on the part of the theme author. |
14 | 28 |
15 # Introducing `ChromeGtkFrame` | 29 ## Introducing `ChromeGtkFrame` |
16 | 30 |
17 For cases where you want control of the colors chrome uses, Chrome gives you a n
umber of style properties for injecting colors and other information about how t
o draw the frame. For example, here's the proposed modifications to Ubuntu's Amb
iance: | 31 For cases where you want control of the colors chrome uses, Chrome gives you a |
| 32 number of style properties for injecting colors and other information about how |
| 33 to draw the frame. For example, here's the proposed modifications to Ubuntu's |
| 34 Ambiance: |
18 | 35 |
19 ``` | 36 ``` |
20 style "chrome-gtk-frame" | 37 style "chrome-gtk-frame" |
21 { | 38 { |
22 ChromeGtkFrame::frame-color = @fg_color | 39 ChromeGtkFrame::frame-color = @fg_color |
23 ChromeGtkFrame::inactive-frame-color = lighter(@fg_color) | 40 ChromeGtkFrame::inactive-frame-color = lighter(@fg_color) |
24 | 41 |
25 ChromeGtkFrame::frame-gradient-size = 16 | 42 ChromeGtkFrame::frame-gradient-size = 16 |
26 ChromeGtkFrame::frame-gradient-color = "#5c5b56" | 43 ChromeGtkFrame::frame-gradient-color = "#5c5b56" |
27 | 44 |
28 ChromeGtkFrame::scrollbar-trough-color = @bg_color | 45 ChromeGtkFrame::scrollbar-trough-color = @bg_color |
29 ChromeGtkFrame::scrollbar-slider-prelight-color = "#F8F6F2" | 46 ChromeGtkFrame::scrollbar-slider-prelight-color = "#F8F6F2" |
30 ChromeGtkFrame::scrollbar-slider-normal-color = "#E7E0D3" | 47 ChromeGtkFrame::scrollbar-slider-normal-color = "#E7E0D3" |
31 } | 48 } |
32 | 49 |
33 class "ChromeGtkFrame" style "chrome-gtk-frame" | 50 class "ChromeGtkFrame" style "chrome-gtk-frame" |
34 ``` | 51 ``` |
35 | 52 |
36 ## Frame color properties | 53 ### Frame color properties |
37 | 54 |
38 These are the frame's main solid color. | 55 These are the frame's main solid color. |
39 | 56 |
40 | **Property** | **Type** | **Description** | **If unspecified** | | 57 | **Property** | **Type** | **Description** | **If unspecified** | |
41 |:-------------|:---------|:----------------|:-------------------| | 58 |:-------------|:---------|:----------------|:-------------------| |
42 | `frame-color` | `GdkColor` | The main color of active chrome windows. | Darken
s `MetaFrame::bg[SELECTED]` | | 59 | `frame-color` | `GdkColor` | The main color of active chrome windows. | Darken
s `MetaFrame::bg[SELECTED]` | |
43 | `inactive-frame-color` | `GdkColor` | The main color of inactive chrome window
s. | Darkens `MetaFrame::bg[INSENSITIVE]` | | 60 | `inactive-frame-color` | `GdkColor` | The main color of inactive chrome window
s. | Darkens `MetaFrame::bg[INSENSITIVE]` | |
44 | `incognito-frame-color` | `GdkColor` | The main color of active incognito wind
ows. | Tints `frame-color` by the default incognito tint | | 61 | `incognito-frame-color` | `GdkColor` | The main color of active incognito wind
ows. | Tints `frame-color` by the default incognito tint | |
45 | `incognito-inactive-frame-color` | `GdkColor` | The main color of inactive inc
ognito windows. | Tints `inactive-frame-color` by the default incognito tint | | 62 | `incognito-inactive-frame-color` | `GdkColor` | The main color of inactive inc
ognito windows. | Tints `inactive-frame-color` by the default incognito tint | |
46 | 63 |
47 ## Frame gradient properties | 64 ### Frame gradient properties |
48 | 65 |
49 Chrome's frame (along with many normal window manager themes) have a slight grad
ient at the top, before filling the rest of the frame background image with a so
lid color. For example, the top `frame-gradient-size` pixels would be a gradient
starting from `frame-gradient-color` at the top to `frame-color` at the bottom,
with the rest of the frame being filled with `frame-color`. | 66 Chrome's frame (along with many normal window manager themes) have a slight |
| 67 gradient at the top, before filling the rest of the frame background image with |
| 68 a solid color. For example, the top `frame-gradient-size` pixels would be a |
| 69 gradient starting from `frame-gradient-color` at the top to `frame-color` at the |
| 70 bottom, with the rest of the frame being filled with `frame-color`. |
50 | 71 |
51 | **Property** | **Type** | **Description** | **If unspecified** | | 72 | **Property** | **Type** | **Description** | **If unspecified** | |
52 |:-------------|:---------|:----------------|:-------------------| | 73 |:-------------|:---------|:----------------|:-------------------| |
53 | `frame-gradient-size` | Integers 0 through 128 | How large the gradient should
be. Set to zero to disable drawing a gradient | Defaults to 16 pixels tall | | 74 | `frame-gradient-size` | Integers 0 through 128 | How large the gradient should
be. Set to zero to disable drawing a gradient | Defaults to 16 pixels tall | |
54 | `frame-gradient-color` | `GdkColor` | Top color of the gradient | Lightens `fr
ame-color` | | 75 | `frame-gradient-color` | `GdkColor` | Top color of the gradient | Lightens `fr
ame-color` | |
55 | `inactive-frame-gradient-color` | `GdkColor` | Top color of the inactive gradi
ent | Lightents `inactive-frame-color` | | 76 | `inactive-frame-gradient-color` | `GdkColor` | Top color of the inactive gradi
ent | Lightents `inactive-frame-color` | |
56 | `incognito-frame-gradient-color` | `GdkColor` | Top color of the incognito gra
dient | Lightens `incognito-frame-color` | | 77 | `incognito-frame-gradient-color` | `GdkColor` | Top color of the incognito gra
dient | Lightens `incognito-frame-color` | |
57 | `incognito-inactive-frame-gradient-color` | `GdkColor` | Top color of the inco
gnito inactive gradient. | Lightens `incognito-inactive-frame-color` | | 78 | `incognito-inactive-frame-gradient-color` | `GdkColor` | Top color of the inco
gnito inactive gradient. | Lightens `incognito-inactive-frame-color` | |
58 | 79 |
59 ## Scrollbar control | 80 ### Scrollbar control |
60 | 81 |
61 Because widget rendering is done in a separate, sandboxed process that doesn't h
ave access to the X server or the filesystem, there's no current way to do GTK+
widget rendering. We instead pass WebKit a few colors and let it draw a default
scrollbar. We have a very [complex fallback](http://git.chromium.org/gitweb/?p=c
hromium.git;a=blob;f=chrome/browser/gtk/gtk_theme_provider.cc;h=a57ab6b182b91519
2c84177f1a574914c44e2e71;hb=3f873177e192f5c6b66ae591b8b7205d8a707918#l424) where
we render the widget and then average colors if this information isn't provided
. | 82 Because widget rendering is done in a separate, sandboxed process that doesn't |
| 83 have access to the X server or the filesystem, there's no current way to do |
| 84 GTK+ widget rendering. We instead pass WebKit a few colors and let it draw a |
| 85 default scrollbar. We have a very |
| 86 [complex fallback](http://git.chromium.org/gitweb/?p=chromium.git;a=blob;f=chrom
e/browser/gtk/gtk_theme_provider.cc;h=a57ab6b182b915192c84177f1a574914c44e2e71;h
b=3f873177e192f5c6b66ae591b8b7205d8a707918#l424) |
| 87 where we render the widget and then average colors if this information isn't |
| 88 provided. |
62 | 89 |
63 | **Property** | **Type** | **Description** | | 90 | **Property** | **Type** | **Description** | |
64 |:-------------|:---------|:----------------| | 91 |:-------------|:---------|:----------------| |
65 | `scrollbar-slider-prelight-color` | `GdkColor` | Color of the slider on mouse
hover. | | 92 | `scrollbar-slider-prelight-color` | `GdkColor` | Color of the slider on mouse
hover. | |
66 | `scrollbar-slider-normal-color` | `GdkColor` | Color of the slider otherwise | | 93 | `scrollbar-slider-normal-color` | `GdkColor` | Color of the slider otherwise | |
67 | `scrollbar-trough-color` | `GdkColor` | Color of the scrollbar trough | | 94 | `scrollbar-trough-color` | `GdkColor` | Color of the scrollbar trough | |
68 | 95 |
69 # Anticipated Q&A | 96 ## Anticipated Q&A |
70 | 97 |
71 ## Will you patch themes upstream? | 98 ### Will you patch themes upstream? |
72 | 99 |
73 I am at the very least hoping we can get Radiance and Ambiance patches since we
make very poor frame decisions on those themes, and hopefully a few others. | 100 I am at the very least hoping we can get Radiance and Ambiance patches since we |
| 101 make very poor frame decisions on those themes, and hopefully a few others. |
74 | 102 |
75 ## How about control over the min/max/close buttons? | 103 ### How about control over the min/max/close buttons? |
76 | 104 |
77 I actually tried this locally. There's a sort of uncanny valley effect going on;
as the frame looks more native, it's more obvious that it isn't behaving like a
native frame. (Also my implementation added a startup time hit.) | 105 I actually tried this locally. There's a sort of uncanny valley effect going on; |
| 106 as the frame looks more native, it's more obvious that it isn't behaving like a |
| 107 native frame. (Also my implementation added a startup time hit.) |
78 | 108 |
79 ## Why use style properties instead of (i.e.) `bg[STATE]`? | 109 ### Why use style properties instead of (i.e.) `bg[STATE]`? |
80 | 110 |
81 There's no way to distinguish between colors set on different classes. Using sty
le properties allows us to be backwards compatible and maintain the heuristics s
ince not everyone is going to modify their themes for chromium (and the heuristi
cs do a reasonable job). | 111 There's no way to distinguish between colors set on different classes. Using |
| 112 style properties allows us to be backwards compatible and maintain the |
| 113 heuristics since not everyone is going to modify their themes for chromium (and |
| 114 the heuristics do a reasonable job). |
82 | 115 |
83 ## Why now? | 116 ### Why now? |
84 | 117 |
85 * I (erg@) was putting off major changes to the window frame stuff in anticipa
tion of finally being able to use GTK+'s theme rendering for the window border w
ith client side decorations, but client side decorations either isn't happening
or isn't happening anytime soon, so there's no justification for pushing this ta
sk off into the future. | 118 * I (erg@) was putting off major changes to the window frame stuff in |
86 * Chrome looks pretty bad under Ambiance on Maverick. | 119 anticipation of finally being able to use GTK+'s theme rendering for the |
| 120 window border with client side decorations, but client side decorations |
| 121 either isn't happening or isn't happening anytime soon, so there's no |
| 122 justification for pushing this task off into the future. |
| 123 * Chrome looks pretty bad under Ambiance on Maverick. |
87 | 124 |
88 ## Any details about `MetaFrames` and `ChromeGtkFrame` relationship and history? | 125 ### Details about `MetaFrames` and `ChromeGtkFrame` relationship and history? |
89 | 126 |
90 `MetaFrames` is a class that was used in metacity to communicate color informati
on to the window manager. During the Hardy Heron days, we slurped up the data an
d used it as a key part of our heuristics. At least on my Lucid Lynx machine, no
ne of the GNOME GTK+ themes have `MetaFrames` styling. (As mentioned above, seve
ral of the XFCE themes do, though.) | 127 `MetaFrames` is a class that was used in metacity to communicate color |
| 128 information to the window manager. During the Hardy Heron days, we slurped up |
| 129 the data and used it as a key part of our heuristics. At least on my Lucid Lynx |
| 130 machine, none of the GNOME GTK+ themes have `MetaFrames` styling. (As mentioned |
| 131 above, several of the XFCE themes do, though.) |
91 | 132 |
92 Internally to chrome, our `ChromeGtkFrame` class inherits from `MetaFrames` (aga
in, which inherits from `GtkWindow`) so any old themes that style the `MetaFrame
s` class are backwards compatible. | 133 Internally to chrome, our `ChromeGtkFrame` class inherits from `MetaFrames` |
| 134 (again, which inherits from `GtkWindow`) so any old themes that style the |
| 135 `MetaFrames` class are backwards compatible. |
OLD | NEW |