| 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 |