MozillaZine

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

Announce and Discuss the Latest Theme and Extension Releases.
flii

User avatar
 
Posts: 2208
Joined: November 6th, 2002, 11:29 pm
Location: hickville, south dakota

Post Posted August 12th, 2016, 9:28 pm

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

Thanks Aris!

Acid Crash

User avatar
 
Posts: 45
Joined: May 9th, 2014, 5:08 am

Post Posted August 26th, 2016, 1:00 pm

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.

Aris

User avatar
 
Posts: 2822
Joined: February 27th, 2011, 10:14 am

Post Posted September 6th, 2016, 4:27 am

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.

Acid Crash

User avatar
 
Posts: 45
Joined: May 9th, 2014, 5:08 am

Post Posted September 7th, 2016, 2:19 pm

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

Aris

User avatar
 
Posts: 2822
Joined: February 27th, 2011, 10:14 am

Post Posted September 8th, 2016, 3:03 am

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


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


On next update I will try to get green, red and orange star icon colors closer to download icon colors.

Edds

User avatar
 
Posts: 170
Joined: July 21st, 2010, 1:13 pm
Location: Central Europe

Post Posted November 17th, 2016, 7:35 am

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
PC: CPU: Core i7 6700K@4.6Ghz, MB: MSI Z170A GAMING M7, VGA: MSI GTX 1080 GAMING X, RAM: 16GB DDR4 Corsair, SSD: Crucial M4 128GB, OS: W10 x64 Pro
NB: CPU: Core i3 4030U@1.9Ghz, VGA: Intel HD4400, RAM: 4GB DDR3, SSHD: Seagate 500GB, OS: W10 x64 Phone: LG G4 32GB Android 6.0

Aris

User avatar
 
Posts: 2822
Joined: February 27th, 2011, 10:14 am

Post Posted November 17th, 2016, 7:56 am

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.

Edds

User avatar
 
Posts: 170
Joined: July 21st, 2010, 1:13 pm
Location: Central Europe

Post Posted November 17th, 2016, 8:17 am

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.
PC: CPU: Core i7 6700K@4.6Ghz, MB: MSI Z170A GAMING M7, VGA: MSI GTX 1080 GAMING X, RAM: 16GB DDR4 Corsair, SSD: Crucial M4 128GB, OS: W10 x64 Pro
NB: CPU: Core i3 4030U@1.9Ghz, VGA: Intel HD4400, RAM: 4GB DDR3, SSHD: Seagate 500GB, OS: W10 x64 Phone: LG G4 32GB Android 6.0

Aris

User avatar
 
Posts: 2822
Joined: February 27th, 2011, 10:14 am

Post Posted November 17th, 2016, 8:51 am

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

Edds

User avatar
 
Posts: 170
Joined: July 21st, 2010, 1:13 pm
Location: Central Europe

Post Posted November 17th, 2016, 10:23 am

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
PC: CPU: Core i7 6700K@4.6Ghz, MB: MSI Z170A GAMING M7, VGA: MSI GTX 1080 GAMING X, RAM: 16GB DDR4 Corsair, SSD: Crucial M4 128GB, OS: W10 x64 Pro
NB: CPU: Core i3 4030U@1.9Ghz, VGA: Intel HD4400, RAM: 4GB DDR3, SSHD: Seagate 500GB, OS: W10 x64 Phone: LG G4 32GB Android 6.0

Aris

User avatar
 
Posts: 2822
Joined: February 27th, 2011, 10:14 am

Post Posted November 17th, 2016, 3:34 pm

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");
  }....

Edds

User avatar
 
Posts: 170
Joined: July 21st, 2010, 1:13 pm
Location: Central Europe

Post Posted November 17th, 2016, 5:04 pm

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 ?
PC: CPU: Core i7 6700K@4.6Ghz, MB: MSI Z170A GAMING M7, VGA: MSI GTX 1080 GAMING X, RAM: 16GB DDR4 Corsair, SSD: Crucial M4 128GB, OS: W10 x64 Pro
NB: CPU: Core i3 4030U@1.9Ghz, VGA: Intel HD4400, RAM: 4GB DDR3, SSHD: Seagate 500GB, OS: W10 x64 Phone: LG G4 32GB Android 6.0

Aris

User avatar
 
Posts: 2822
Joined: February 27th, 2011, 10:14 am

Post Posted November 18th, 2016, 5:05 am

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.

Edds

User avatar
 
Posts: 170
Joined: July 21st, 2010, 1:13 pm
Location: Central Europe

Post Posted November 18th, 2016, 8:53 am

Thank you very much, looks good :)
PC: CPU: Core i7 6700K@4.6Ghz, MB: MSI Z170A GAMING M7, VGA: MSI GTX 1080 GAMING X, RAM: 16GB DDR4 Corsair, SSD: Crucial M4 128GB, OS: W10 x64 Pro
NB: CPU: Core i3 4030U@1.9Ghz, VGA: Intel HD4400, RAM: 4GB DDR3, SSHD: Seagate 500GB, OS: W10 x64 Phone: LG G4 32GB Android 6.0

avada
 
Posts: 1458
Joined: February 10th, 2008, 6:30 am
Location: Hungary

Post Posted November 20th, 2016, 5:36 am

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.

Return to Extension/Theme Releases


Who is online

Users browsing this forum: No registered users and 4 guests