sabato 29 novembre 2014

Metacity window manager: changing the window color border

Few months ago I started to use MATE [1] as desktop. I like it because it is simple and clean. My preferred theme is ClearLooks. Another setting that I adopt everywhere in linux is the so called mouseover window focusing coupled with the raise on click disabled.
Basically I like to work with windows even partially obscured. The focus has to be independent by the window placing.
To bring up a windows I (left) click on the title bar. To put back a window I have to middle-click the title bar.
Metacity, the default window manager of Mate, allows that and I am happy.
To work well I have to quick find the title bar. Unfortunately today the designers think that a title bar of an unfocused window is not an important thing, so its color is the same of the other GUI elements (like buttons)...
To solve this I had to make a small change to the theme file.
What I am describing here is valid for the Metacity window manager, and worked for Mate; but I suppose that it should work also for other desktop environments which use Metacity.
I started from the ClearLooks theme, but I suppose that the same applies for other themes too.
  1. As first step I copied the theme in my home:
    
    $ cd
    $ mkdir .themes
    $ cp -rf /usr/share/themes/ClearLooks .theme/ClearLooksGray
    $ mv 
    
    The name ClearLooksGray is an arbitrary name. Choice what you want.
  2. Now you have to edit the file .theme/ClearLooksGray/index.theme. You will notice that most of the lines are like Name[<country code>]=<something> or Comment[<country code>]=<something>. For simplicity I removed all these line until I got:
    
    [X-GNOME-Metatheme]
    Name=ClearlooksGray
    Type=X-GNOME-Metatheme
    Comment=Attractive Usability
    Encoding=UTF-8
    GtkTheme=Clearlooks
    MetacityTheme=ClearlooksGray
    IconTheme=gnome
    
    Basically I removed all the Name/Comment pairs in the different language and I leaved only the necessary ones. Then I update the Name and the MetacityTheme values to reflect the new name (ClearlooksGray).
  3. Then I changed the file .themes/ClearLooksGray/metacity-1/metacity-theme-1.xml: inside the tag <info>, I update the tags:
    • name: changed the value in ClearLooksGray
    • authors: added my name
    • description: update the value to reflect the new name

    Now the complex part. Inside the file you have to find a tag called <draw_ops name="bevel_unfocused">. This tag is responsible to drawing the unfocused title bar. Inside this tag there are the following lines:
    
            <gradient type="vertical" x="2" y="top_height/2" width="width-4" height="top_height/2-1">
                    <color value="shade/gtk:bg[NORMAL]/0.93"/>
                    <color value="shade/gtk:bg[NORMAL]/0.89"/>
            </gradient>
            <gradient type="vertical" x="2" y="2" width="width-4" height="top_height/2-2">
                    <color value="shade/gtk:bg[UNFOCUSED]/0.99"/>
                    <color value="shade/gtk:bg[UNFOCUSED]/0.95"/>
            </gradient>
    
    These have to be changed in:
    
            <gradient type="vertical" x="2" y="top_height/2" width="width-4" height="top_height/2-1">
                    <color value="shade/#cccccc/0.93"/>
                    <color value="shade/#cccccc/0.89"/>
            </gradient>
            <gradient type="vertical" x="2" y="2" width="width-4" height="top_height/2-2">
                    <color value="shade/#cccccc/0.99"/>
                    <color value="shade/#cccccc/0.95"/>
            </gradient>
    

    Basically I changed "gtk:bg[NORMAL]" in "#cccccc" and "gtk:bg[UNFOCUSED]" in "#cccccc". These changes have to be re-done also inside the tag:<draw_ops name="bevel_maximized_unfocused">. This tag is responsible to drawing the unfocused title bar for the maximized window. So the original code is:
    
            <gradient type="vertical" x="0" y="top_height/2" width="width" height="top_height/2-1">
                    <color value="shade/gtk:bg[NORMAL]/0.93"/>
                    <color value="shade/gtk:bg[NORMAL]/0.89"/>
            </gradient>
            <gradient type="vertical" x="2" y="2" width="width-4" height="top_height/2-2">
                    <color value="shade/gtk:bg[UNFOCUSED]/0.99"/>
                    <color value="shade/gtk:bg[UNFOCUSED]/0.95"/>
            </gradient>
    

    and ahve to changed in:
    
            <gradient type="vertical" x="0" y="top_height/2" width="width" height="top_height/2-1">
                    <color value="shade/#cccccc/0.93"/>
                    <color value="shade/#cccccc/0.89"/>
            </gradient>
            <gradient type="vertical" x="2" y="2" width="width-4" height="top_height/2-2">
                    <color value="shade/#cccccc/0.99"/>
                    <color value="shade/#cccccc/0.95"/>
            </gradient>
    

    #cccccc is the gray HTML color. You can choice a different color of course.
Below two screen shot which highlight the differences: the ClearLooksGray have a darker border that I like more.

ClearLooksGray

ClearLooks [standard]

My little patches...

Below a list of my patches spread on different projects: Linux kernel [all] 2018-02-01 iversion: Rename make inode_cmp_iversion{+raw}...