[Ext] Classic Toolbar Buttons [Fx/Tb/Sm]

Announce and Discuss the Latest Theme and Extension Releases.
Post Reply
User avatar
flii
Posts: 2208
Joined: November 6th, 2002, 11:29 pm
Location: hickville, south dakota
Contact:

Re: [Ext] Classic Toolbar Buttons [Fx/Tb/Sm]

Post by flii »

I installed the new update, and it looks awesome. Your efforts are tremendously appreciated and worth every donated dollar.

Thanks Aris!
User avatar
Acid Crash
Posts: 54
Joined: May 9th, 2014, 5:08 am

Re: [Ext] Classic Toolbar Buttons [Fx/Tb/Sm]

Post by Acid Crash »

Hi there Aris.
Just another interesting Idea.
Maybe You consider adding a bunch of colors for Bookmarks/favorites Star icon (to correspond current download button custom colors).
It would be quite nice to have an ability to match colors of Download button and a Star icon
Last edited by Acid Crash on September 6th, 2016, 5:12 am, edited 1 time in total.
User avatar
Aris
Posts: 3248
Joined: February 27th, 2011, 10:14 am

Re: [Ext] Classic Toolbar Buttons [Fx/Tb/Sm]

Post by Aris »

I will look into it.

EDIT

Test CTB 1.5.3 beta 1
https://addons.mozilla.org/addon/cstbb/versions

Note
New star icon options can not override Class Theme Restorers star icon in location bar.
User avatar
Acid Crash
Posts: 54
Joined: May 9th, 2014, 5:08 am

Re: [Ext] Classic Toolbar Buttons [Fx/Tb/Sm]

Post by Acid Crash »

Hi, Aris.
Just tested it.
Pretty nice.
Yet guess there is a place for improvement: animanion and a big star icon on tooltips can be changed too.
Just did a quick css search for appropriate selectors.
Tooltip icon is in #editBookmarkPanelStarIcon, and the animation is in #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification.

Any plans on including those? :roll:


P.S. Oh, just wanted to share custom green icon for those stars. That what was on my mind in the first place when I was asking about same color as download button

Code: Select all

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAACiUlEQVR42mNgwAM+f/7MC8RSUMzFQC4AGSCRJbRRKltkKYhNriH8fr2eXmKNvP9FG3j+Rk0JdQK5kCzXyNdI7JVdLPRfbqHQf4VqyS0kuwrkmtBJAc6SfXz/VLeL/1fdJv5fsofvb/z0KDugHB8+jcJIgSpVvDDfRKFeYrf8cuH/6gckwVhhmfB/hTqJ7WVLioyQ1QKxINwLBuXaeXJ5Yksl8vnPiRTzfBJr4P0vM0fwv9pOif8ah6XAWBXIlp0t+F+snvc/UM1HiXyB07J54kssaoyTwF6+/fS2rEgpz2fJifz/ZecDw2KFyH/VjUDv7JH4rw4y5CgEg9ggMeWNYmA1MkC1Uv38/0WLeF6DDQIS0gXrcioUlon9VtsrCdQk/V/rmPR/zePYMUgOpEZ9j+R/pcViPyo2FRfCIwHIUM/dnN6gsl7iN9igkzJ4scYR6f8gtaXb8iuBelXRA1wjdWN8m+pWyb9aJ2X/a5/CjrVOyPxX3yz1O29LRj3IAbhiT9N2pfEe7aOy/3XOyGHFWodl/jusNN8MshhvItSernRC85DMf51zclix5gGZ/3rTVPfjTZwgSZXpks+1jsv+17sg/1/vvPx/XSgGsUFi2kdk/6tNlbmL0yCgBNP281uUFOeJ/tM9B9EM9uIehc86e+S/6gDZIDH9M/L/FeaI/boDTDZAPYzYDOKKnRPhqrRM7L/uCfn/mjtkv3utcVxx4sGxwIN39oW4rbFdq7VT7qfucfn/iovF/hcuz7EE6mHHZhBnzooMN6UZEp9d11hv2n59SwRQDJQdOIGYB4iN119ZE+24xny70jSJT5VrS22xGgQ1TBGIXYHYFFvmBIoJALEZELsAsQKyHADPI9B9NRWYrAAAAABJRU5ErkJggg==
User avatar
Aris
Posts: 3248
Joined: February 27th, 2011, 10:14 am

Re: [Ext] Classic Toolbar Buttons [Fx/Tb/Sm]

Post by Aris »

You are right, the "green" is not exactly the same, but close:

Image

Changing the animation icon is possible, but not planned (I did not change the animation icon for downloads button either). You can easily achieve that by using this css code:

Code: Select all

#bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
  background-image: url(    data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAACiUlEQVR42mNgwAM+f/7MC8RSUMzFQC4AGSCRJbRRKltkKYhNriH8fr2eXmKNvP9FG3j+Rk0JdQK5kCzXyNdI7JVdLPRfbqHQf4VqyS0kuwrkmtBJAc6SfXz/VLeL/1fdJv5fsofvb/z0KDugHB8+jcJIgSpVvDDfRKFeYrf8cuH/6gckwVhhmfB/hTqJ7WVLioyQ1QKxINwLBuXaeXJ5Yksl8vnPiRTzfBJr4P0vM0fwv9pOif8ah6XAWBXIlp0t+F+snvc/UM1HiXyB07J54kssaoyTwF6+/fS2rEgpz2fJifz/ZecDw2KFyH/VjUDv7JH4rw4y5CgEg9ggMeWNYmA1MkC1Uv38/0WLeF6DDQIS0gXrcioUlon9VtsrCdQk/V/rmPR/zePYMUgOpEZ9j+R/pcViPyo2FRfCIwHIUM/dnN6gsl7iN9igkzJ4scYR6f8gtaXb8iuBelXRA1wjdWN8m+pWyb9aJ2X/a5/CjrVOyPxX3yz1O29LRj3IAbhiT9N2pfEe7aOy/3XOyGHFWodl/jusNN8MshhvItSernRC85DMf51zclix5gGZ/3rTVPfjTZwgSZXpks+1jsv+17sg/1/vvPx/XSgGsUFi2kdk/6tNlbmL0yCgBNP281uUFOeJ/tM9B9EM9uIehc86e+S/6gDZIDH9M/L/FeaI/boDTDZAPYzYDOKKnRPhqrRM7L/uCfn/mjtkv3utcVxx4sGxwIN39oW4rbFdq7VT7qfucfn/iovF/hcuz7EE6mHHZhBnzooMN6UZEp9d11hv2n59SwRQDJQdOIGYB4iN119ZE+24xny70jSJT5VrS22xGgQ1TBGIXYHYFFvmBIoJALEZELsAsQKyHADPI9B9NRWYrAAAAABJRU5ErkJggg==) !important;
}
[/size]

Changing the popups icon is a bit far from what a toolbar button add-on is doing. Css filter or image changing is of course possible, but will not be part of CTB:

Code: Select all

#editBookmarkPanelStarIcon {
	  filter: url("data:image/svg+xml;utf8,\
		<svg xmlns='http://www.w3.org/2000/svg'>\
		  <filter id='matrix-ygg' color-interpolation-filters='sRGB' filterUnits='objectBoundingBox' x='0' y='0' width='100%' height='100%'>\
			<feColorMatrix type='saturate' in='SourceGraphic' values='0' result='A'/>\
			<feColorMatrix type='matrix' in='A' values='0.38  0.3  0.3  0.0  0.1 0.3  0.38  0.3  0.0  0.28 0.3  0.3  0.38  0.0  0.0 0.0  0.0  0.0  1.0  0.0'/>\
		  </filter>\
		</svg>#matrix-ygg") !important;
}
[/size]

On next update I will try to get green, red and orange star icon colors closer to download icon colors.
User avatar
Edds
Posts: 332
Joined: July 21st, 2010, 1:13 pm
Location: SVK

Re: [Ext] Classic Toolbar Buttons [Fx/Tb/Sm]

Post by Edds »

Hi Aris,
When I change pref layout.css.devPixelsPerPx to something like 1.05, so the GUI of Firefox will be a bit bigger on hidpi screen, but unfortunately toolbar icons become a bit blurry. So simple question if you can do something to make icon sharp, maybe include hidpi icons
thank you
Laptop: Intel Core i5 1240P | 16GB DDR4 | 500GB NVMe | 1080p | Win 11
Phone: Samsung S24 Ultra | Android 14
User avatar
Aris
Posts: 3248
Joined: February 27th, 2011, 10:14 am

Re: [Ext] Classic Toolbar Buttons [Fx/Tb/Sm]

Post by Aris »

CTB contains ~30 icon sets for Firefox and ~7 icons for Thunderbird.
I'm sorry, but I don't have all the icon in high resolution.
Even if I had, I would most likely not include them, because add-ons size would easily become a couple of MBs large.
User avatar
Edds
Posts: 332
Joined: July 21st, 2010, 1:13 pm
Location: SVK

Re: [Ext] Classic Toolbar Buttons [Fx/Tb/Sm]

Post by Edds »

I see, well then is there any way I can "fix" it by myself / with your help ?
I just need default icons in higher dpi for Firefox.
Laptop: Intel Core i5 1240P | 16GB DDR4 | 500GB NVMe | 1080p | Win 11
Phone: Samsung S24 Ultra | Android 14
User avatar
Aris
Posts: 3248
Joined: February 27th, 2011, 10:14 am

Re: [Ext] Classic Toolbar Buttons [Fx/Tb/Sm]

Post by Aris »

If you keep "default" settings, icons should be highres. Only, if you change to an icon set, you get lowres icons in hidpi mode.

Image

Preview with hidpi: http://i.imgur.com/KOxcWkg.png
User avatar
Edds
Posts: 332
Joined: July 21st, 2010, 1:13 pm
Location: SVK

Re: [Ext] Classic Toolbar Buttons [Fx/Tb/Sm]

Post by Edds »

yes, but unfortuantely for highres icons I need to set layout.css.devPixelsPerPx 1.15 as minimum.. so I would like to force it somehow for everything above 1.0 or just *always*... via userstyle or something
Laptop: Intel Core i5 1240P | 16GB DDR4 | 500GB NVMe | 1080p | Win 11
Phone: Samsung S24 Ultra | Android 14
User avatar
Aris
Posts: 3248
Joined: February 27th, 2011, 10:14 am

Re: [Ext] Classic Toolbar Buttons [Fx/Tb/Sm]

Post by Aris »

Setting layout.css.devPixelsPerPx to 1.1 or higher automatically uses the highres icons in Firefox (without any add-on installed). Those icons however still look blurry and are only nice with that value set to 1.25 or 1.5.

Custom css would not help much, because it would not be different from what default Fx code currently use on Windows.

Look for this code inside chrome://browser/skin/browser.css file :

Code: Select all

@media (min-resolution: 1.1dppx) {
  :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button, #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #social-share-button, #open-file-button, #find-button, #developer-button, #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button, #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button, #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button, #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu),
  #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
    list-style-image: url("chrome://browser/skin/Toolbar@2x.png");
  }....
User avatar
Edds
Posts: 332
Joined: July 21st, 2010, 1:13 pm
Location: SVK

Re: [Ext] Classic Toolbar Buttons [Fx/Tb/Sm]

Post by Edds »

Thanks, I managed to get most of the hires icons... however movable back-forward and stop/reload buttons from CTR have not changed - is there any option to force hires icons starting with value 1.0 ?
Btw Tab close button "X" and new tab button "+" do not have hires versions ?
Laptop: Intel Core i5 1240P | 16GB DDR4 | 500GB NVMe | 1080p | Win 11
Phone: Samsung S24 Ultra | Android 14
User avatar
Aris
Posts: 3248
Joined: February 27th, 2011, 10:14 am

Re: [Ext] Classic Toolbar Buttons [Fx/Tb/Sm]

Post by Aris »

Try to reuse CTRs code for that matter.

Code: Select all

/*AGENT_SHEET*/
@media (min-resolution: 1.0dppx) {
		#main-window[defaultfxtheme="true"] :-moz-any(#ctraddon_history-button,#ctraddon_history-menu-toolbar-button,#ctraddon_back-button,#ctraddon_forward-button,#ctraddon_stop-button,#ctraddon_reload-button,#ctraddon_go-button) {
		  list-style-image: url("chrome://browser/skin/Toolbar@2x.png") !important;
		}
		
		#main-window[defaultfxtheme="true"] :-moz-any(#ctraddon_history-button,#ctraddon_history-menu-toolbar-button,#ctraddon_back-button,#ctraddon_forward-button,#ctraddon_stop-button,#ctraddon_reload-button,#ctraddon_go-button):-moz-lwtheme-brighttext {
		  list-style-image: url("chrome://browser/skin/Toolbar-inverted@2x.png") !important;
		}
		#main-window[defaultfxtheme="true"] #ctraddon_history-menu-toolbar-button,
		#main-window[defaultfxtheme="true"] #ctraddon_history-button {
		  -moz-image-region: rect(0, 360px, 36px, 324px) !important;
		}
		#main-window[defaultfxtheme="true"] #ctraddon_back-button {
		  -moz-image-region: rect(0, 108px, 36px, 72px) !important;
		}
		#main-window[defaultfxtheme="true"] #ctraddon_forward-button,
		#main-window[defaultfxtheme="true"] #ctraddon_go-button {
		  -moz-image-region: rect(0, 144px, 36px, 108px) !important;
		}
		#main-window[defaultfxtheme="true"] #ctraddon_reload-button {
		  -moz-image-region: rect(0, 180px, 36px, 144px) !important;
		}
		#main-window[defaultfxtheme="true"] #ctraddon_stop-button {
		  -moz-image-region: rect(0, 216px, 36px, 180px) !important;
		}
		
		#main-window[defaultfxtheme="true"] #ctraddon_restart-button {
		  list-style-image: url("chrome://classic_theme_restorer/content/images/ctrrestart@2x.png") !important;
		}

		#main-window[defaultfxtheme="true"] #nav-bar :-moz-any(#ctraddon_history-button,/*#ctraddon_history-menu-toolbar-button,*/#ctraddon_back-button,#ctraddon_forward-button,#ctraddon_stop-button,#ctraddon_reload-button,#ctraddon_go-button,#ctraddon_preferences-button,#ctraddon_restart-button) .toolbarbutton-icon {
		  width: 32px !important;
		}
		#main-window[defaultfxtheme="true"] #nav-bar #ctraddon_history-menu-toolbar-button .toolbarbutton-icon {
		  width: 40px !important;
		}
		#main-window[defaultfxtheme="true"] toolbar:not(#nav-bar) :-moz-any(#ctraddon_history-button,#ctraddon_history-menu-toolbar-button,#ctraddon_back-button,#ctraddon_forward-button,#ctraddon_stop-button,#ctraddon_reload-button,#ctraddon_go-button,#ctraddon_preferences-button,#ctraddon_restart-button) .toolbarbutton-icon {
		  width: 18px !important;
		  height: 18px !important;
		}
	}
I will add some tab close variation in hires on next CTR update.

Firefox uses a svg image for tab "+" by default, so it should scale properly in every case automatically. CTB does not override it, if none of its icon sets are active.
User avatar
Edds
Posts: 332
Joined: July 21st, 2010, 1:13 pm
Location: SVK

Re: [Ext] Classic Toolbar Buttons [Fx/Tb/Sm]

Post by Edds »

Thank you very much, looks good :)
Laptop: Intel Core i5 1240P | 16GB DDR4 | 500GB NVMe | 1080p | Win 11
Phone: Samsung S24 Ultra | Android 14
avada
Posts: 1932
Joined: February 10th, 2008, 6:30 am
Location: Hungary

Re: [Ext] Classic Toolbar Buttons [Fx/Tb/Sm]

Post by avada »

Is there a possibility of having a darker version of "alternative appearance" for the options? I hate the idiotic monochrome icons of the default appearance, but not as much as eye-scorching white backgrounds with black text.
Post Reply