the highlighting doesn't work while I press the tab key

[sc0w]

with the tab key, I can't see the highlighting on a lot of buttons, checkboxes, list views, etc etc

The result: it is impossible to work with mate only with keyboard (without mouse)

( mate 1.16 "traditional ok" theme )

I have tested with monitor preferences, pluma preferences...

[lukefromdc]

By "mate 1.16 traditional" I assume you mean built with GTK2? If this works only in GTK2 builds of 1.16 and earlier (1.17 is GTK3-only) than we've got another GTK3 issue. Did you test all the MATE themes or just one of them? If this is themes the switch to GTK3 could easily do something like this, as the theme code is totally different.

To determine if this is a theme issue at all, try changing themes to "adwaita" which is the GTK3 default. if that works (maybe even if it does not) then try every other theme you have installed, record the ones that work, if any. If no themes work, including Adwaita, than it's a problem with the GTK3 ports of MATE applications themselves.

In that case, try the MATE themes and Adwaita on GNOME or Cinnamon apps and see if what you are trying to do works.

[raveit65]

This affect all themes because 'focus-line' is deprecated. Here a possible fix for BlueMenta.

notebook checkbutton.text-button:focus {
    box-shadow: inset  0px  1px shade (@treeview_focus_border, 1.0),
                inset  1px  0px shade (@treeview_focus_border, 1.0),
                inset -1px  0px shade (@treeview_focus_border, 1.0),
                inset  0px -1px shade (@treeview_focus_border, 1.0);
    border-radius: 2px;
    transition: all 400ms ease-out;
}

notebook spinbutton:focus {
    border-color: shade (@treeview_focus_border, 1.0);
    transition: all 400ms ease-out;
}

/* general fix */
notebook toolbar.inline-toolbar toolitem button.text-button {
    border-width: 2px;
    border-image-width: 3px 4px 4px 4px;
    border-radius: 4px;
    box-shadow: none;
}

notebook toolbar.inline-toolbar.horizontal button.text-button:focus {
    border-image: url("borders/button-focus.png") 3 4 4 4 / 3px 4px 4px 4px stretch;
    border-radius: 4px;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
}

We need to style the focus status, this is tested with pluma preferences. I am not sure about what to do with the treeview here.

[raveit65]

@lukefromdc I think he meant TraditionalOK theme.

[raveit65]

For the treeview

notebook treeview.view:focus {
    box-shadow: inset  0px  1px shade (@treeview_focus_border, 1.0),
                inset  1px  0px shade (@treeview_focus_border, 1.0),
                inset -1px  0px shade (@treeview_focus_border, 1.0),
                inset  0px -1px shade (@treeview_focus_border, 1.0);
}

But i don't like this.

[raveit65]

Now i know for what this ugly stuff is good for :-)

* {
    outline-color: alpha(@theme_text_color, 0.3);
    outline-style: dashed;
    outline-offset: -3px; /* 2px */
    outline-width: 1px; /* disable ugly focus-line */
    -gtk-outline-radius: 2px;
}

In Menta theme i disabled this with 'outline-width: 0px;' :-)

[sc0w]

@lukefromdc yes, with adwaita it works

[raveit65]

i think i will untag releases from yesterday as i couldn't upload tarballs. At the moment i can't login to server. @sc0w edit this line https://github.com/mate-desktop/mate-themes/blob/master/desktop-themes/TraditionalOk/gtk-3.0/gtk-widgets.css#L14 use outline-width: 1px; for the moment.

[sc0w]

@raveit65 ok thanks, now it works on a lot of dialogs

but, it doesn't work on "shut down" or "log out" dialogs

[raveit65]

@sc0w use outline-offset: -3px;

[sc0w]

@raveit65 thanks, now it works on "shut down" and "log out" if I press the tab key

Another issue:

• the default isn't highlighted

For example, I open "monitor preferences", nothing is highlighted, I press "enter" and then "detect monitors" is highlighted, why not before?

The same on the "log out" dialog, only is highlighted if I press first "enter", "tab" or "space"

I suggest always to highlight the default ( if something is default, of course )

I don't know if this is another mate-themes issue

[sc0w]

aha, with "menta" theme, it works as expected for me with the default option highlighted

[raveit65]

@sc0w I will open a dev branch later for fixing this , as we have different causes here and different themes. And you can test all before merging :-)

[sc0w]

@raveit65 ok thanks

one suggestion:

I think the highlighted of TOK on gtk2 was better

gtk2 with debian jessie:

gtk3:

[raveit65]

well agree. But we see 2 widgets in this report.

• for gtk2 focus-line and button.default
• for gtk3 outline and button.default

focus-line and outlines use dashed lines and the default button use a border-color and/or box-shadow.

button.default are responsable for highlighting the default in a GUI-app and outlines is what you see with tabbing. I need to find out how all works in Menta themes for backporting it to other themes. Changes for Menta themes are testable in dev-keyboard-world branch https://github.com/mate-desktop/mate-themes/commits/dev-keyboard-world

[sc0w]

ok, I just have tested (meta theme) , and I don't understand some things

• If the buttons are attached, the highlighted is too fine and light, I can't see the dashed lines, for example, closing terminal:

the same on "log out", "shut down"...

• If the buttons don't are attached, I can't see the dashed lines, and the highlighted seems to be better, I see, for example, on pluma preferences:

the same on "monitor preferences"...

[raveit65]

The attached buttons are so called .linked buttons and they are styled a bit different. They don't use a border-image like the other buttons in pluma preferences, they use simply a border-color. Using a border-image here will give me a lot of work with gimp what i don't like because i am very slow with working with gimp and i don't have the time for it. I would have to generate new images where the border-radius are cutted for normal and focus state, otherwise you will see jumping buttons. I will try to change the green border-color here, to be the same like in pluma buttons.

[raveit65]

@sc0w Branch is rebased with new changes for (Blue)Menta themes.

• For dialog-action-area.linked buttons (logout/shutdown dialog windows) i use another border-color in combination with a box-shadow which gives me nearly same result like using a border-image.
• Outlines for the notebook header label are a bit improved, but using this here looks ugly for my understanding of art ;-) ......do we really need a outline for highlighting a tab?

Please test again :-)

[lukefromdc]

How exactly are you navigating with the tab key? I have no idea what you are doing or indeed how to use MATE (or any other GUI) without a mouse at all. My UbuntuStudio_Legacy theme probably also has this problem but if I don't know how to invoke it I cannot fix it.

[raveit65]

@lukefromdc It's simple. You need to give a window focus and start pressing the tab key stroke again again and again...... It starts with first element of a window and with pressing the button again you navigate to the next element and make theme active. After the last element is reached tabing starts the next round with the first element. Try it out with changes for Menta or TOK themes. It's harder to explain for me as it is :-) @sc0w First changes for TOK themes are commited.

[lukefromdc]

OK, I got that to work. Very subtle in Menta, a bit clearer in TOK.

[lukefromdc]

This does not work in all apps; Pluma for instance has to let the open document (if any) capture the tab, and if none is open only the first element (create) can be selected

[sc0w]

@raveit65 thanks

my tests:

• now "blue menta" and "menta" are ok for me

• traditional green:

I see odd this on pluma preferences:

• traditional ok:

the highlighted can be like "blue menta"? (for example, the next images over pluma preferences) If they are similar, I think it will solve the previous problem on "traditional green"

blue menta:

traditional ok:

images enlarged:

@lukefromdc

This does not work in all apps

what do you mean?

• to change tabs only with keyboard?

you can do it with alt+1 alt+2 alt+3 ... ... ... (caja, pluma, mate-terminal)

and, on pluma and caja, you can do it too with ctrl + alt + av pag / ctrl + alt + re pag

• to access to this panel only with keyboard?

It is unnecesary, you can do all of that on the menus with Alt + File, Edit, Search ... ... or using the shortcut keys (Ctrl+N, Ctrl+O ... ... )

I think that panel was created to work only with mouse

[lukefromdc]

What I meant about not in all apps was that widgets like textviews capture a plain tab. Not only does Pluma do this, but textviews in gtk3-widget-factory do this too. Didn't know the other shortcuts other than arrow key use I found by chance as this is new to me.

Meanwhile, I have found it's one thing to just make this work, quite another to get it to really look good and also be fully usable. I am doing a fine detail version of this for UbuntuStudio_Legacy, much of that code will be ported to BlackMATE when it's done. Suggested guides are to install twf (thewidgetfactory) for GTK2 and compare to the GTK2 version of any theme where this works in GTK2. It does NOT in many of the MATE themes, but did in the original UbuntuStudio theme so I have that guide; Compare to gtk3-widget-factory, and also compare to gtk3-widget-factory on Adwaita for ideas.

[raveit65]

default button in TG theme is fixed and branch is rebased. This turns out that the border-image wasn't different only in colors ;-) TOK theme use border-width: 1px 1px 2px 1px; and TG have to use border-width: 1px 1px 1px 1px; at this place.

I can try to use the border-image from BlueMenta for TOK theme, hopefully this doesn't cause any collateral damage.

[raveit65]

TOK is updated with new border-image for default and focus button. I think this makes the buttons a bit smaller when they are in focus state, but it's OK for me and i don't know it better at this point w/o spending to much time here. @sc0w Please test again and don't forget to copy the new image in your theme dir.

[sc0w]

@raveit65 now TG seems to be fine

• TOK:

it seems to be better on the attached buttons

is wrong on unattached buttons:

and doesn't work the focus on combo boxes:

[raveit65]

@sc0w hmm, did you copy the new image? https://github.com/mate-desktop/mate-themes/blob/23744a437c967af48bed686df780a070f5cf2f46/desktop-themes/TraditionalOk/gtk-3.0/img/button-focus.png Edit: which is used here. https://github.com/mate-desktop/mate-themes/commit/23744a437c967af48bed686df780a070f5cf2f46#diff-46defe5602bce54d7d982779cb081123R670

[sc0w]

@raveit65 ah ok, sorry

I copied that file to /usr/share/themes/TraditionalOk/gtk-3.0/img/ and now it works

but, the focus doesn't work on combo boxes (monitor preferences)

[sc0w]

and...

on the mate screensaver, "unlock" always is highlighted:

mate-screensaver issue, maybe?

[lukefromdc]

BTW, there are "solid" and "ridge" styles as well as "dotted" and "dashed" recognized for outline-style. Using them, a alpha on the color, and a wider outline-width with a zero or negative offset can give results more like what GTK2 used to do.

[raveit65]

it is possible that lock dialog have always focus.....

[raveit65]

BTW, there are "solid" and "ridge" styles as well as "dotted" and "dashed" recognized for outline-style. Using them, a alpha on the color, and a wider outline-width with a zero or negative offset can give results more like what GTK2 used to do.

yeah, i notice this option too.

[raveit65]

btw. submarine themes are updated.

[raveit65]

TOK and TG commits are rebased with a fix for comboboxes.

[raveit65]

It looks like that the unlock button in mate-screensaver dialog always have focus. I can't verify that gtk3-inspector but i see that with all themes. And I can use the tab key to highlight another button, but the unlock button is always active. But with using the alt+ ... keystroke (memonics) it is possible to change the active button. I am sure that this isn't a theme issue.

[lukefromdc]

https://github.com/mate-desktop/mate-themes/commit/9d1ea812f02a2da38e1802f35c3f99c60c48b4ed Adds outline/focus support to BlackMATE

[sc0w]

@raveit65

TOK and TG commits are rebased with a fix for comboboxes.

It doesn't work for me:

my latest tests on TOK:

• on "monitor preferences", "shutdown" and "log out", the "highlighted" / "focus" / "dashed lines" doesn't exist

• on pluma preferences doesn't work on the check boxes, only on the buttons "help" and "close", but with the old style, it does't use the image "button-focus.png"

[raveit65]

I see jumping buttons and resizing of the whole window with BlackMate, ie. pluma preferences or logout dialog :-/

[lukefromdc]

https://github.com/mate-desktop/mate-themes/commit/0f9a9c46d2e609da0746e854e8486392aacd1911 should fix the jumping buttons in BlackMATE. There turned out to be a padding value conflict (different padding for different state) that was not visible except during the 400ms transition. Was very subtle on hover and did not jump the buttons, but for some reason made them jump on focus without hover.

[lukefromdc]

https://github.com/mate-desktop/mate-themes/commit/0f9a9c46d2e609da0746e854e8486392aacd1911 should fix the jumping buttons in BlackMATE. There turned out to be a padding value conflict (different padding for different state) that was not visible except during the 400ms transition. Was very subtle on hover and did not jump the buttons, but for some reason made them jump on focus without hover.

[raveit65]

@sc0w weird, here everything is fine. I created a new tarball from branch and did a complete reinstall to be sure. Which gtk+ version do you use? I can cherry-pick the commits to another branch,eg. for 3.20. Than you can create a tarball with './autogen.sh && make distcheck'

[raveit65]

@lukefromdc yes, that fixes the jumping buttons in pluma preferences or logout dialog. But see search dialog in pluma, here the text in Buttons are moving if my eyes don't lies. And in mate-appearance-properties or caja preferences the buttons use only outlines. Is this correct? Also buttons in statusbar (pluma) reacting a bit weird, you can reach them via crtl+tab to avoid to write a tab in puma text view.

I also added some improvements for Menta themes today (commit rebased), most of them for caja navigation window. Looks like this report give us a lot of work.

[sc0w]

@raveit65 now it works, sorry, I think I cloned the incorrect branch xD

ok, my latest tests on TOK: now all is right, but it doesn't work on the attached buttons ( "log out", "shut down" )

EDIT: and the focus pressing the key "tab" doesn't work on the "mate control center"

EDIT AGAIN: see my next post

[lukefromdc]

https://github.com/mate-desktop/mate-themes/commit/4c1e03dabc2f0d678c4a2a5466d7e4c0fba0e1b0 Fixes another padding conflict (caused subtle icon jump within some buttons) and makes disabled buttons clearer.

[lukefromdc]

I've only added outlines and nothing else to focussed buttons, the "hover" theme elements are kept to mouse hover only so they still react to the mouse. This is the same as in my own theme. I noticed Adwaita also uses only outlines to indicate a focussed button, but with a negative offset.

[lukefromdc]

https://github.com/mate-desktop/mate-themes/commit/91891ead3ce1cba71fd0b52c2e310f11bccee8fa

Moves BlackMATE focus outlines inside buttons and similar widgets, same way Adwaita does it. Seems to be a bit clearer and less likely to get covered up or cut off by another widget

[sc0w]

@raveit65 I have restarted my session and now all is fine on TOK, except the "mate control center" (on menta theme is ok)

[raveit65]

@lukefromdc BlackMate is fine now. I would like to see the the button:focus style from shutdown/logout style everywhere on buttons ..... .....but you are the maintainer , it's OK.

About control-center. I think focus state is broken here. Gtk3-inspector shows me the state focus on buttons but i see no setting. Example with all kinds of borders, shadows and background-image for the focus state in TOK.

#MyControlCenter #slab_section_style1 button.flat:focus,
#MyControlCenter #slab_section_style2 button.flat:focus {
    border-image: url("img/button-focus.png") 3 4 4 4 / 3px 4px 4px 4px repeat;
    border-radius: 3px;
    border-width: 1px 1px 2px 1px;
    border-style: solid;
    border-color: transparent;
    background-image: linear-gradient(to bottom,
                      @pt_button_focus_gradient_a,
                      @pt_button_focus_gradient_b 50%,
                      @pt_button_focus_gradient_c 50%,
                      @pt_button_focus_gradient_d);
    border-color: @button_default_border_color;
    box-shadow: inset  0px  1px @button_default_box_shadow_color,
                inset  1px  0px @button_default_box_shadow_color,
                inset -1px  0px @button_default_box_shadow_color,
                inset  0px -1px @button_default_box_shadow_color;
    outline-color: @focus_border_color;
    outline-style: dashed;
    outline-offset: -3px;
    outline-width: 1px;
}

slab_section_style1 = buttons on left hand side slab_section_style2 = buttons on right hand side Copy that to mate-application.css at the end. If you use same without :focus you will see that the selector is matching.

Also i see a short white background flashing on buttons on the left side if i tab there. We don't see that on right side because the bg of the whole slab_section_style2 is white. I suggest to open a report for control-center if you confirm this.

[raveit65]

Ahh, focus for m-c-c is working with blue-submarine. I have to find out what magic i did here :-)

[sc0w]

@raveit65

If this info help you, on the master branch with the line you commented on https://github.com/mate-desktop/mate-themes/issues/156#issuecomment-269542427 mate control center is fine on TOK ( outline-width: 1px; )

But the branch dev-keyboard-world have this line too