Classic Compact v29.0a1 (Australis) OS X testing Needed

[longuste]

Never used the DOM-Inspector, but i try my best. What should i try?

[makiao]

Yes on win7x64 the default Firefox theme has the same issue with that extension. (like cc4. and on both only in windowed mode)
But in cc3.6 on ff4 this problem does not exist...

[KLB]

@longuste,
I've been testing a fix that should allow you to use that extension to change tab colors when tab gradients are turned off as long as tabmix+ isn't using the CSS rule "background-image" to change the tab backgrounds. The fix will be part of CC4.0.4. If there is still an issue the workaround would be to use the gradient option "flat except tabs". You could try this option now and the odds are tabmix+ would regain control over tab colors.

@makiao,

CC4.0.0 also did not have this problem with that extension, but the min, max/restore & close buttons were also totally missing in Win7 when the menu bar was turned off. The code I had to insert into CC4.0.2+ to restore those buttons broke the extension in question. I have to use this code to make sure those buttons are there or my theme will never be approved for AMO. CC3.6 only works with that extension because it is missing the critical code that renders the upper right window buttons.

As the problem also exists with the default theme, the problem lays with the extension and it will have to be resolved by the developers of that extension. If I had Win7 I might be able to come up with a work around, for Classic Compact, but it still wouldn't address the issue for users of that extension who are using a different theme. If the problem exists for the default theme then it will quite literally exist for the vast majority of themes, which is why the ultimate solution must come from the extension developer.

[makiao]

Ah okay i see the Problem.
So then can you (or i) make the default close max min buttons visible? cause they are clickable also if they are not visible then i can insert some spaces as placeholders, and i see where to click (works in default theme. Thanks anyway for your great work and helping me and others.

[longuste]

Thanks. While wating for CC404: using gradients for the tabs and toying around with the DOM-inspector to distract me from real work :/

[Dawa73]

Noticed a small bug - check marks are not appearing in menus. (View>Toolbars>etc) Whether the toolbar is enabled or not, the space to the left is simply blank. I've tried both light and dark OS scheme options - I am running Ubuntu 10.04 with a dark theme.

[SantaFe]

Noticed a small bug - check marks are not appearing in menus. (View>Toolbars>etc) Whether the toolbar is enabled or not, the space to the left is simply blank. I've tried both light and dark OS scheme options - I am running Ubuntu 10.04 with a dark theme.

I have the same problem with 4.0.3. However, if I install this extension: https://addons.mozilla.org/en-US/firefox/addon/menu-icons-plus/ the checkmarks appear next to the Menu Bar, Navigation Toolbar, ect. Have no idea why, but it works.


My only quirk is for some reason, the Bigger Back button is squashed into an oval instead of round. This is with Classic Compact 4.0 (default, FF4) selected.

See Pic:



Sorry about the size, wasn't sure if there was a max image size so I went with 800 pixels wide.

Anyway Great work & can't wait till the final version!

[KLB]

@longuste,

I'm working on the tabmix+ flat tab issue, but am not coming up with a solution. The problem is the order in which the CSS rules for CCO is called as opposed to other CSS rules requires me to use the "!important" flag, which then overrides all other rules. If I could figure out how to get the CCO rules to be called last I could stop using !important, which would then stop my rules from over riding the tabmix+ rules.

This is the JavaScript that CCO uses to apply the custom rules that turns of gradients:

Code: Select all

         if(this.pref.getCharPref("toBackgrounds")=="flat"){
            if(this.pref.getCharPref("toOSSystemColors")=="dark"){
               var darkscrollbarsflaturi = this.ios.newURI("chrome://global/skin/themeoptions/darkscrollbarsflat.css", null, null);
               this.sss.loadAndRegisterSheet(darkscrollbarsflaturi, this.sss.AGENT_SHEET);
            } else {
               var scrollbarsflaturi = this.ios.newURI("chrome://global/skin/themeoptions/scrollbarsflat.css", null, null);
               this.sss.loadAndRegisterSheet(scrollbarsflaturi, this.sss.AGENT_SHEET);
            }
         } else if(this.pref.getCharPref("toOSSystemColors")=="dark"){
            var darkscrollbarsbeveleduri = this.ios.newURI("chrome://global/skin/themeoptions/darkscrollbarsbeveled.css", null, null);
            this.sss.loadAndRegisterSheet(darkscrollbarsbeveleduri, this.sss.AGENT_SHEET);
         }

[KLB]

Noticed a small bug - check marks are not appearing in menus. (View>Toolbars>etc) Whether the toolbar is enabled or not, the space to the left is simply blank. I've tried both light and dark OS scheme options - I am running Ubuntu 10.04 with a dark theme.

Can anyone else using Linux confirm this? I think used to have this issue under Firefox 3.6 and had to use custom CSS rules to make the checkmarks work under Linux.

[KLB]

My only quirk is for some reason, the Bigger Back button is squashed into an oval instead of round. This is with Classic Compact 4.0 (default, FF4) selected.

See Pic:

Yes I'm seeing this issue as well. I'll work on a fix for it. Thanks!

[ShareBird]

@longuste,

I'm working on the tabmix+ flat tab issue, but am not coming up with a solution. The problem is the order in which the CSS rules for CCO is called as opposed to other CSS rules requires me to use the "!important" flag, which then overrides all other rules. If I could figure out how to get the CCO rules to be called last I could stop using !important, which would then stop my rules from over riding the tabmix+ rules.

This is the JavaScript that CCO uses to apply the custom rules that turns of gradients:

Code: Select all

         if(this.pref.getCharPref("toBackgrounds")=="flat"){
            if(this.pref.getCharPref("toOSSystemColors")=="dark"){
               var darkscrollbarsflaturi = this.ios.newURI("chrome://global/skin/themeoptions/darkscrollbarsflat.css", null, null);
               this.sss.loadAndRegisterSheet(darkscrollbarsflaturi, this.sss.AGENT_SHEET);
            } else {
               var scrollbarsflaturi = this.ios.newURI("chrome://global/skin/themeoptions/scrollbarsflat.css", null, null);
               this.sss.loadAndRegisterSheet(scrollbarsflaturi, this.sss.AGENT_SHEET);
            }
         } else if(this.pref.getCharPref("toOSSystemColors")=="dark"){
            var darkscrollbarsbeveleduri = this.ios.newURI("chrome://global/skin/themeoptions/darkscrollbarsbeveled.css", null, null);
            this.sss.loadAndRegisterSheet(darkscrollbarsbeveleduri, this.sss.AGENT_SHEET);
         }

Code added by the Stylesheet Service will load like the userChrome.css or userContent.css. For more informations, have a look on this:
https://developer.mozilla.org/en/XPCOM_ ... eetService

[pros]

Noticed a small bug - check marks are not appearing in menus. (View>Toolbars>etc) Whether the toolbar is enabled or not, the space to the left is simply blank. I've tried both light and dark OS scheme options - I am running Ubuntu 10.04 with a dark theme.

Can anyone else using Linux confirm this? I think used to have this issue under Firefox 3.6 and had to use custom CSS rules to make the checkmarks work under Linux.

Same problem here. Firefox 4.0 64bit
2.6.38-7-generic #37~lucid1-Ubuntu SMP Mon Mar 21 17:49:49 UTC 2011 x86_64 GNU/Linux

[mozillauser233]

KLB and who have been helping. I cannot describe how much I really appreciate this. I wish I could volunteer in anyway, but my knowledge to any coding is garbage and that if there is any need of help just let me know.

Win7 x64 SP1, FF4.0, Classic Compact 4.0.3, Classic Compact Options 4.0.0. Using FF3 icon.

CC completely looks great. I installed few hours ago, if i notice anything I will pop in here and post it up but for now it just looks amazing.

Here are two screenshots. And again I would like to thank KLB and the ones helping him.
Thank You.

If these shots are to big or anything at all do not hesitate to let me know, I will remove them or if not needed I will remove them.

Default


Little modified to my preference.

[KLB]

Code added by the Stylesheet Service will load like the userChrome.css or userContent.css. For more informations, have a look on this:
https://developer.mozilla.org/en/XPCOM_ ... eetService

The thing I hate about developer.mozilla.org is that they don't provide good code examples to fully implement something. For instance, they provide the following code, but don't put in context of actually calling a style sheet.

Code: Select all

var styleSheetService = Components.classes["@mozilla.org/content/style-sheet-service;1"]
                        .getService(Components.interfaces.nsIStyleSheetService);

[KLB]

Here is the full overlay.js code I use to implement Classic Compact Options and change the look of Classic Compact. I don't do all that extension development, so I barely understand how it works. If I someone would help me improve the implementation so that I don't have to use "!important" in my CSS rules to change styles and so that the theme styles could be changed without restarting Firefox, I'm sure it would make for a lot of really happy users (there are around 10,000 active users of CCO).

Code: Select all

var classiccompactoptions = {
  onLoad: function() {
    // initialization code
    this.initialized = true;
  },
  onMenuItemCommand: function(e) {
   window.openDialog("chrome://classiccompactoptions/content/options.xul", "","chrome, toolbar, dialog, resizable=yes").focus();
  },

};
window.addEventListener("load", function(e) { classiccompactoptions.onLoad(e); ccpreferences.init()}, false);

var ccpreferences = {
   pref: Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefService).getBranch("extensions.classiccompactoptions."),
   firefox: null,
   mainWindow: null,
   init:function() {

      this.sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);
      this.ios = Components.classes["@mozilla.org/network/io-service;1"].getService(Components.interfaces.nsIIOService);

      if(this.pref.getCharPref("toToolbarButtons")=="cc2"){
         var buttonsclassic2uri = this.ios.newURI("chrome://global/skin/themeoptions/buttonsclassic2.css", null, null);
         this.sss.loadAndRegisterSheet(buttonsclassic2uri, this.sss.AGENT_SHEET);
      }
      else if(this.pref.getCharPref("toToolbarButtons")=="cc3"){
         var buttonsclassic2uri = this.ios.newURI("chrome://global/skin/themeoptions/buttonsclassic3.css", null, null);
         this.sss.loadAndRegisterSheet(buttonsclassic2uri, this.sss.AGENT_SHEET);
      }
//      if(this.pref.getCharPref("toArrows")=="keyhole"){
//         var keyholeuri = this.ios.newURI("chrome://global/skin/themeoptions/keyholearrows.css", null, null);
//         this.sss.loadAndRegisterSheet(keyholeuri, this.sss.AGENT_SHEET);
//      }
      if(this.pref.getCharPref("toBackgrounds")=="flat"){
         var flatbackgroundsuri = this.ios.newURI("chrome://global/skin/themeoptions/flatbackgrounds.css", null, null);
         this.sss.loadAndRegisterSheet(flatbackgroundsuri, this.sss.AGENT_SHEET);
      } else if(this.pref.getCharPref("toBackgrounds")=="flatall"){
         var flatbackgroundsuri = this.ios.newURI("chrome://global/skin/themeoptions/flatbackgrounds-all.css", null, null);
         this.sss.loadAndRegisterSheet(flatbackgroundsuri, this.sss.AGENT_SHEET);
      }
      if(this.pref.getCharPref("toToolbarDividers")=="chiseled"){
         var chiseleddividersuri = this.ios.newURI("chrome://global/skin/themeoptions/chiseledborders.css", null, null);
         this.sss.loadAndRegisterSheet(chiseleddividersuri, this.sss.AGENT_SHEET);
      }
      if(this.pref.getCharPref("toCornerStyles")=="square"){
         var squarecornersuri = this.ios.newURI("chrome://global/skin/themeoptions/squarecorners.css", null, null);
         this.sss.loadAndRegisterSheet(squarecornersuri, this.sss.AGENT_SHEET);
      }else if(this.pref.getCharPref("toCornerStyles")=="roundtabs"){
         var roundtabsuri = this.ios.newURI("chrome://global/skin/themeoptions/roundtabs.css", null, null);
         this.sss.loadAndRegisterSheet(roundtabsuri, this.sss.AGENT_SHEET);
      }
      if(this.pref.getCharPref("toOSSystemColors")=="dark"){
         var darkarrowsuri = this.ios.newURI("chrome://global/skin/themeoptions/darkarrows.css", null, null);
         this.sss.loadAndRegisterSheet(darkarrowsuri, this.sss.AGENT_SHEET);
      }
//      if(this.pref.getCharPref("toWebpageWindowBorder")=="disabled"){
//         var WebpageWindowBorderuri = this.ios.newURI("chrome://global/skin/themeoptions/webpagewindowborderdisabled.css", null, null);
//         this.sss.loadAndRegisterSheet(WebpageWindowBorderuri, this.sss.AGENT_SHEET);
//      }

      this.osString = Components.classes["@mozilla.org/xre/app-info;1"].getService(Components.interfaces.nsIXULRuntime).OS;
      if(this.pref.getCharPref("toScrollbars")=="os"){
         if(this.osString=="WINNT"){
            var xulscrollbarsuri = this.ios.newURI("chrome://global/skin/themeoptions/xulscrollbars.css", null, null);
            this.sss.loadAndRegisterSheet(xulscrollbarsuri, this.sss.AGENT_SHEET);
         } else{
            var nativescrollbarsuri = this.ios.newURI("chrome://global/skin/themeoptions/nativescrollbars.css", null, null);
            this.sss.loadAndRegisterSheet(nativescrollbarsuri, this.sss.AGENT_SHEET);
         }
      }else{
         if(this.pref.getCharPref("toCornerStyles")=="squarescrollbars"){
            var squarescrollbarsuri = this.ios.newURI("chrome://global/skin/themeoptions/squarescrollbars.css", null, null);
            this.sss.loadAndRegisterSheet(squarescrollbarsuri, this.sss.AGENT_SHEET);
         }
         if(this.pref.getCharPref("toBackgrounds")=="flat"){
            if(this.pref.getCharPref("toOSSystemColors")=="dark"){
               var darkscrollbarsflaturi = this.ios.newURI("chrome://global/skin/themeoptions/darkscrollbarsflat.css", null, null);
               this.sss.loadAndRegisterSheet(darkscrollbarsflaturi, this.sss.AGENT_SHEET);
            } else {
               var scrollbarsflaturi = this.ios.newURI("chrome://global/skin/themeoptions/scrollbarsflat.css", null, null);
               this.sss.loadAndRegisterSheet(scrollbarsflaturi, this.sss.AGENT_SHEET);
            }
         } else if(this.pref.getCharPref("toOSSystemColors")=="dark"){
            var darkscrollbarsbeveleduri = this.ios.newURI("chrome://global/skin/themeoptions/darkscrollbarsbeveled.css", null, null);
            this.sss.loadAndRegisterSheet(darkscrollbarsbeveleduri, this.sss.AGENT_SHEET);
         }
      }

      //find the main menu
      var menubar=document.getElementById('main-menubar') || //firefox
         document.getElementById('mail-menubar') ; //thunderbird
      if (!menubar) return;
      //find our menu popup
      var menusub=document.getElementById('cco_mergedmenu-popup');
      //move each of the menus into the sub menu
      var el, r;
      if(this.pref.getCharPref("toMergeMenus")=="yes"){
         var mergedmenuuri = this.ios.newURI("chrome://global/skin/themeoptions/mergedmenu.css", null, null);
         this.sss.loadAndRegisterSheet(mergedmenuuri, this.sss.AGENT_SHEET);
         for (var i=menubar.childNodes.length-1; i>=0; i--) {
            el=menubar.childNodes[i];
            // some thunderbird menus don't have IDs!
            if (el.id) {
               r=new RegExp('\\b'+el.id+'\\b');
               if (r.exec("cco_mergedmenu")) continue;
            }
            if (el!="cco_mergedmenu"){
               menubar.removeChild(el);
               menusub.insertBefore(el, menusub.firstChild);
            }
         }
      } else{
         el=document.getElementById('cco_mergedmenu');
         menubar.removeChild(el);
      }
   },

   activateViewMode:function(mode) {
      this.ifaces=Components.interfaces;
      this.mediator=Components.classes["@mozilla.org/appshell/window-mediator;1"].
         getService(ifaces.nsIWindowMediator);
      var win,winEnum=this.mediator.getEnumerator(null);
      while (winEnum.hasMoreElements()){
         win=winEnum.getNext();
         var m=win.document.getElementById('mergedmenu');
         if (!m) continue;
         m.setAttribute('mode', 'text');
      }
   }
};