Keeping custom icons

[AdrianLC]

Hello,

Just a question. Would it be possible to use the theme without Adwaita's icons? I like the Adwaita style tabs but the theme removes my Faenza icons :/

A setting for choosing wether the user would like to keep his icons or not, would be awesome.

Nice theme by the way, it definitely fits to perfection with the default GNOME theme :)

[seleznev]

We have two problems:

• I don't know way to colorize a svg file in our theme (without js).
• Symbolic icons can be not installed.

However, you can create a build with yours icons (just replace files in theme/chrome/browser/symbolic-icons). May be we can create script for it, but I don't think that it's a great solution.

p.s. Oh... Sorry for delay.

[AdrianLC]

I think I don't really understand what you mean, sorry.

My system has the icons already installed via an icon theme and they do appear on Firefox. If I enable this GNOME theme, it overrides the icons.

I didn't mean to request the inclusion of the Faenza icons within the theme. Would just like the possibility to enable the theme but without the icons. This should be possible. There are tons of simpler themes which add no custom icons at all, aren't there?

I do not know if mozilla themes can have a settings menu like some extensions have. If this is indeed possible, I was thinking of a check button alas : "[ ] Use adwaita icons" If not, I guess that uploading a lighter version of the theme, with the icons removed could be enough, right? So there would be "GNOME theme" and "GNOME no-icons theme", maybe?

Sorry if this makes no sense. I have absolutely no knowledge of mozilla themes and my suggestion comes strictly from an user point of view.

Thank you for your answer.

[seleznev]

Just a little example:

Buttons in GTK3

# Back button
self.back_button = Gtk.Button()
self.back_button.set_size_request(34, 34)
icon = Gtk.Image()
icon.set_from_gicon(Gio.ThemedIcon.new_with_default_fallbacks('go-previous-symbolic'), Gtk.IconSize.MENU)
self.back_button.set_image(icon)

And it look like:

If you need custom color (for example, pink) you should use CSS code like here:

.header-bar .button {
    color: #f0f;
}

And it will look like this:

It's very simple. And I can use one image (from system theme) and change color in my CSS code. :)

In Firefox

Icon from current "system" theme:

#back-button {
  list-style-image: url("moz-icon://stock/gtk-go-back-ltr?size=toolbar");
}

Symbolic icon (from current "system" theme):

#back-button {
  list-style-image: url("moz-icon://stock/go-previous-symbolic?size=toolbar");
}

In our theme:

#back-button {
  list-style-image: url("chrome://browser/skin/symbolic-icons/back-button.svg");
}

You can copy urls to address bar and see difference on your system (also you need enable default (GNOME) icon theme). Symbolic icon have gray color by default. And I can't change it to black.

---

extensions

We have some plans to make it. #76

a lighter version of the theme

And will have two theme on addons.mozilla.org? Without it will be broken auto-update. And maybe @garrett have another ideas.

---

So, simple way to get system icons - it's use user style like here:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

@-moz-document url("chrome://browser/content/browser.xul") {

#back-button {
  list-style-image: url("moz-icon://stock/gtk-go-back-ltr?size=menu") !important;
}
#back-button[disabled="true"] {
  list-style-image: url("moz-icon://stock/gtk-go-back-ltr?size=menu&state=disabled") !important;
}

#back-button:-moz-locale-dir(rtl) {
  list-style-image: url("moz-icon://stock/gtk-go-back-rtl?size=menu") !important;
}
#back-button[disabled="true"]:-moz-locale-dir(rtl) {
  list-style-image: url("moz-icon://stock/gtk-go-back-rtl?size=menu&state=disabled") !important;
}

#forward-button {
  list-style-image: url("moz-icon://stock/gtk-go-forward-ltr?size=menu") !important;
}
#forward-button[disabled] {
  list-style-image: url("moz-icon://stock/gtk-go-forward-ltr?size=menu&state=disabled") !important;
}

#forward-button:-moz-locale-dir(rtl) {
  list-style-image: url("moz-icon://stock/gtk-go-forward-rtl?size=menu") !important;
}
#forward-button[disabled]:-moz-locale-dir(rtl) {
  list-style-image: url("moz-icon://stock/gtk-go-forward-rtl?size=menu&state=disabled") !important;
}

#reload-button {
  list-style-image: url("moz-icon://stock/gtk-refresh?size=menu") !important;
}
#reload-button[disabled="true"] {
  list-style-image: url("moz-icon://stock/gtk-refresh?size=menu&state=disabled") !important;
}

#stop-button {
  list-style-image: url("moz-icon://stock/gtk-stop?size=menu") !important;
}
#stop-button[disabled="true"] {
  list-style-image: url("moz-icon://stock/gtk-stop?size=menu&state=disabled") !important;
}

#home-button {
  list-style-image: url("moz-icon://stock/gtk-home?size=menu") !important;
}
#home-button[disabled="true"] {
  list-style-image: url("moz-icon://stock/gtk-home?size=menu&state=disabled") !important;
}

#print-button {
  list-style-image: url("moz-icon://stock/gtk-print?size=menu") !important;
}
#print-button[disabled="true"] {
  list-style-image: url("moz-icon://stock/gtk-print?size=menu&state=disabled") !important;
}

#cut-button {
  list-style-image: url("moz-icon://stock/gtk-cut?size=menu") !important;
}
#cut-button[disabled="true"] {
  list-style-image: url("moz-icon://stock/gtk-cut?size=menu&state=disabled") !important;
}

#copy-button {
  list-style-image: url("moz-icon://stock/gtk-copy?size=menu") !important;
}
#copy-button[disabled="true"] {
  list-style-image: url("moz-icon://stock/gtk-copy?size=menu&state=disabled") !important;
}

#paste-button {
  list-style-image: url("moz-icon://stock/gtk-paste?size=menu") !important;
}
#paste-button[disabled="true"] {
  list-style-image: url("moz-icon://stock/gtk-paste?size=menu&state=disabled") !important;
}

#fullscreen-button {
  list-style-image: url("moz-icon://stock/gtk-fullscreen?size=menu") !important;
}

#zoom-out-button {
  list-style-image: url("moz-icon://stock/gtk-zoom-out?size=menu") !important;
}

#zoom-in-button {
  list-style-image: url("moz-icon://stock/gtk-zoom-in?size=menu") !important;
}

}

// Maybe I forgot some buttons. If needed tell me about it.

[AdrianLC]

So, if I got it right, the theme loads icons from files included in https://github.com/gnome-integration-team/firefox-gnome/tree/master/theme/chrome/browser instead of using the system ones. I guess that makes sense. There might be people not using Adwaita but who still want the skin for Firefox.

The extension is a nice idea imo. I don't know if adding an option for changing all those image loading URLs and use the system icons would be feasible though. I would really love it, that's for sure. All the customizations ,even in the extension management interface, look gorgeous but I don't like those tiny black icons :/

Where should I paste this last code? In any file from the theme?

Thanks for your time :)

[seleznev]

Where should I paste this last code? In any file from the theme?

This code for Stylish. Also, you can add it to browser.css (chrome/browser/browser.css) or any another place for user styles. But without headers:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

@-moz-document url("chrome://browser/content/browser.xul") {

...

}

Main window will be look like this:

[isacdaavid]

I think these buttons are important too:

#urlbar-stop-button {
  list-style-image: url("moz-icon://stock/gtk-stop?size=menu") !important;
}
#urlbar-reload-button {
  list-style-image: url("moz-icon://stock/gtk-refresh?size=menu") !important;
}

[seleznev]

TODO:

• Fix background color of toolbarbuttons in :active state (should be more dark now).
• Fix wrong colors in icons (default, blue, orange, green).
• Fix colors in urlbar / search bar.
• Apply filter for icons of extensions (symbolic-icons/extensions/*)
• Find icons in system theme and replace our on it.

[seleznev]

On my system it look like this:

Please test it and notify about any problems.

[0rAX0]

I'm not sure I'm liking this one. Some icons have different heights/styles so consistency will be broken at some point.

[seleznev]

@0rAX0, anything for example? :) I know about problems with rss, downloads and full-screen / restore icons. And I will return them some later.

I think, it isn't problem if moz-icon + svg filter works good.

[0rAX0]

For example the sync icon is taller than the rest. And I think I've spotted a bug related to the svg filters but I can't replicate it. Yet. :-\

[0rAX0]

Oops. Sorry. :-P

[seleznev]

sync icon

Oh. You are right.

a bug related to the svg filters

:(

[0rAX0]

Here's the bug:

If you sync using a network that isn't connected to the Internet the icon will slowly blur out until it becomes a huge mess. Probably related to the Intel drivers, but I'm not sure. This does NOT happen when Internet access is available.

[0rAX0]

No, it does happen when I'm connected. scratch that. :(

[seleznev]

@0rAX0, please try it again. It should look better. :)

// I'm sorry. ⇓

[0rAX0]

Same here. :\