ColorTab

Posted by dafi on 2009-03-30 09:32 |
1.0.3
Davide Ficano
Thu, 2011-11-03 12:51
  • : 5.0 - 7.*
  • : 5.0 - 7.*

This extension allows to color view tab based on pattern defined by user

Bug report
Feature Request

How Komodo appears with colored tabs

The ColorTab preference dialog

nathan | Tue, 2009-03-31 06:31

Installed and configured in under 2 minutes.. awesome job dafi! :)

box4ivan | Tue, 2009-03-31 08:44

This is a great extension - I'd love to use it, but do not want to upgrade to IDE 5.0 only because of it.

mmm
dafi | Tue, 2009-03-31 08:58

Technically speaking it is easy to add backward compatibility but I'm not sure to add it.

I admit my Komodo IDE 4.4 at office now is so sadly without color tabs...

--
dafi
Enhance KomodoEdit with MoreKomodo

ronny | Fri, 2009-04-03 03:56

Great extension!
A feature that I would like is to be able to re-arrange the list, so that the first matching pattern is used.

dafi | Fri, 2009-04-03 06:45

I forgot to publish the patch containing the up/down button.

I've had the same need :D

Install the version 1.0.1

--
dafi
Enhance KomodoEdit with MoreKomodo

florentv | Sun, 2009-04-05 13:32

Nice extension. The end result looks like crap on OS X because the default theme uses background images, and you get borders + background colors + background images + text color, which is a bit too much. I tried a few things but in the end the only decent solution I found was to just change the text color: dark blue for HTML, dark green for CSS, dark red for JS.

Of course one solution would be to get rid of the background images and create your own style. What I'd like to do instead: use border-radius, box-shadow and possibly text-shadow to get a nice, integrated, pure-CSS effect. This will have to wait for Komodo to use the next Gecko engine (in Komodo 6, I guess). :(

Oh, a few comments on the preferences UI:
- i wish extensions preferences would go in Preferences > Extensions > ExtensionName, rather than directly Preferences > ExtensionName;
- the set of buttons should contain an "edit" button as well, double-clicking an entry should be a shortcut, not the one way to do it;
- the set of buttons should be focusable using the keyboard (Tab key);
- maybe it's just on OS X, but you with the default colors you can't see when an item in the list has focus, because focus changes the item's background color to default color for selections, and the displayed styles override that... maybe the preview should only take a part of each item?

dafi | Sun, 2009-04-05 23:07

> The end result looks like crap on OS X
I have no Apple where to test, I hope a day (a far day) to buy a Mac with donations received for my extensions :D :D :D

> you get borders + background colors + background images + text color
Backgrounds images aren't mandatory, about borders I'm considering to make them optional from UI, do you agree?

> I tried a few things but in the end the only decent solution I found was to just change the text color: dark blue for HTML, dark green for CSS, dark red for JS.
May you post some screenshot? Please file a feature request on my ColorTab project

> Of course one solution would be to get rid of the background images and create your own style.
> ...
> This will have to wait for Komodo to use the next Gecko engine (in Komodo 6, I guess
Have you tried the styles posted by Nathan?
They use background images and -moz-border-radius

*.css;
color: rgb(0, 0, 0); background-color: rgb(246, 250, 125); border: 1px solid #000 !important; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; background-image: url(http://naatan.com/kbg.png);

> i wish extensions preferences would go in Preferences > Extensions > ExtensionName, rather than directly Preferences > ExtensionName;
I don't like this layout but I want to be a good citizen so if it is a best practice I can use it, my other estensions MoreKomodo, TabSwitcher, ToolbarArranger and Klint must be changed, too.

> the set of buttons should contain an "edit" button as well, double-clicking an entry should be a shortcut, not the one way to do it;
You are right, next version will have the fix

> the set of buttons should be focusable using the keyboard (Tab key);
maybe a OSX issue, under WinXP and Linux Ubuntu I can focus and move using tab

> maybe it's just on OS X, but you with the default colors you can't see when an item in the list has focus
this problem is present on all platforms :(

> maybe the preview should only take a part of each item
Maybe a dedicated area with the preview, the list should contain only the patterns without colors, when use click on items the preview updates itself, do you agree?

--
dafi
Enhance KomodoEdit with MoreKomodo

fishme | Mon, 2009-04-06 23:58

It would be great if I can set the pattern on a directory

example */content/* ?

Dave

dafi | Tue, 2009-04-07 01:08

Very strange, this behavior already works.

I've my linux box configured with

*/colortab/*
*/viewsourcewith/*

and Windows (with \ separator)

*\colortab\*
*\viewsourcewith\*

What OS are you using?

--
dafi
Enhance KomodoEdit with MoreKomodo

OSX
fishme | Tue, 2009-04-07 06:54

omg - strike! :)

I tried locally /content* and i wrote here */content/* and this was correct :)

great!

Dave

dafi | Thu, 2009-04-09 09:36

I've created a survey (with limesurvey) with a single question about the new UI.

May you help me to decide which to use?

You can add also a comment if you want

http://apps.sourceforge.net/limesurvey/dafizilla/index.php?sid=62919&lan...

--
dafi
Enhance KomodoEdit with MoreKomodo

patrickmetz | Tue, 2009-04-14 02:18

This extension rocks!!!
Now that I have tried it, I simply cannot imagine to use Komodo without it again. Very nice!!

Patrick Metz

dafi | Wed, 2009-04-15 09:15

The version 1.0.2 contains the new UI based on user choice.

Thanks to vote the survey
--
dafi
Enhance KomodoEdit with MoreKomodo

paloturk | Mon, 2009-07-13 00:18

Very very good extension. Thanks a lot for your effort!

stan | Wed, 2009-08-05 09:17

Dafi,

Have a look over to this topic: http://community.activestate.com/faq/customizing-the-komodo-ui#comment-1...
I reckon it might be of interest.

Cheers,
Stan

stan | Wed, 2009-08-05 12:35

Hi again,

Here's my feedback as per previous topic. Take this with a grain of salt as it's just my opinion and I'm sure many of you might disagree:

  • Replace the current JavaScript observers in the engine with a CSS file using CSS3 selectors
  • The ideal file format for saving the settings would be that very CSS file mentioned above
  • Give the User the option to freely edit the CSS (i.e. advanced mode)
  • Upon updating the settings, remove the CSS file from the DOM and add it again (append a timestamp to force a reload). This should update the UI immediately.

So what I have in mind in a parser that reads a CSS file, figures out what the User has specified for background-color, border, etc. Presents a nice Settings dialogue (what you have in there at the moment is fine). Upon Saving any changes the properties that were not supported (i.e. if I had a padding-left: 10px in there) are also persisted, but anything I've updated in the UI is reflected on the CSS file.

You existing engine works very well, don't get me wrong -- it's just that I think using 20KB of JS to get the job done could be avoided and replaced with a single CSS file (no hooks, observers, etc.)

Cheers,
Stan

dafi | Wed, 2009-08-05 22:58

Thanks Stan,

I agree with your for 99%, I'm lazy, very lazy and I simply prefer a comfortable UI instead of editing directly files.

I've already a new interface for ColorTab (not yet released), based on scintilla you can modify the styles using syntax highlighted CSS code (this is the advanced mode).

I can add a "Standard" UI from with user can choose only a few attributes (background color, text color and image)

I don't know how many users prefer ColorTab to userChrome.css editing so actually I'm adding features useful only for me but any idea, criticism or hint is welcomed, we are a community at all (I hope)!

thanks again for your important feedback

friendly,

davide
--
dafi
Enhance KomodoEdit with MoreKomodo

stan | Thu, 2009-08-06 01:07

Hi Davide,

I like the UI as well, I think it gives user with no CSS or programming experience the right tools to customise Komodo's UI. However I was concerned about the engine (which is about 20KB of JavaScript). I think it would be much more appropriate if your settings dialogue generated a CSS file which is applied to the chrome, rather than listening for events (view_created, etc.) I noticed you save the settings in a JSON format, so it shouldn't be a big hassle to generate a CSS out of this. I hope this clarifies my feedback a bit.

And yes, deffo we are a community, though at time I feel alone :D

Cheers,
Stan

dafi | Fri, 2009-08-07 23:27

I've realized ColorTab is only a non-sense extension.

The better approach is yours or simply use Stylish under Komodo.

The only very very little advantage over CSS selectors is the glob routine, using ColorTab you can define patterns like /opt/project/*/css/* (notice two wildchars), AFAIK selectors allow only "begins with", "ends with" and "contains".
I use similar patterns for my projects but I think only a couple of users can find useful this feature.

I think to no longer support ColorTab.

thanks to open my eyes

friendly,

davide
--
dafi
Enhance KomodoEdit with MoreKomodo

stan | Sat, 2009-08-08 00:11

Hey,

No, no, no -- my opinion is not the ultimate one Lol. I reckon there are at least five more ways in which this extension could be implemented and neither one of these is, well, the best one. In my view a Stylish approach is good enough. But it has so many flaws and it's limited to the file name.
Your approach allows not only to look at the file name, but also to match directories (very useful when all files end with .php, but you want the distinction of M-V-C), to match the language set in Komodo and lots more. And let's not forget the cool UI which allows you to set all this up.

So don't drop it yet. Keep it current and help Users who run into problems.

Cheers,
Stan

cucurut | Mon, 2010-02-22 07:15

So fast to furious...great extension dafi
Vimax

dlaflam | Sat, 2010-06-19 15:10

Is it possible to update this to be compatible with Komodo 6 beta?

dafi | Fri, 2010-10-01 06:01

[Comp]
- Bug 3076324 - Komodo 6 compatibility?

[Fix]
- Bug 2990725 - bad filename parser

--
dafi
Enhance KomodoEdit with MoreKomodo
Consider a little donation

chodorowicz | Sun, 2010-11-21 09:49

When I have this extension enabled the autocomplete suggestions stop working for me. Anybode else has the same problem?
Komodo 6.0.1, Windows 7

zaptree | Wed, 2011-02-09 00:05

This is a great addon thanx very much for it. Would it be possible to add this functionality to the folders in the places. I understand the folders are images so the probably can be changed like the tabs by just selecting a color but maybe the text of the folders or something like that.

I use this addon to color my controllers, models, views, libraries and so on differently and i would really love if my folders could also be collored the same so i can quickly find a file.

hopp | Tue, 2011-03-15 00:16

Is it possible to give the active tab some kind of highlighting?

If there are lot of tabs opened it's difficult to identify the currently active tab ... Giving the active tab some highlighting (colored border? slighly different color? colored text?) would be very helpful for easier identifying the active tab ...

peterhuckle | Tue, 2011-03-15 23:53

Get's my vote!

hopp | Thu, 2011-03-17 01:19

Just for information:

There is already a feature request on sourceforge tracker:
http://sourceforge.net/tracker/?func=detail&aid=2900413&group_id=135288&...

buckthron | Thu, 2011-11-03 11:53

Any chance that this extension will be updated to work in Komodo 7? I 'm using the K7 beta, and I already miss ColorTab.

toddw
ActiveState Staff
Thu, 2011-11-03 12:52

I've updated it to support Komodo 7.

buckthron | Tue, 2011-11-08 07:55

Todd, this worked great for several days. But after I launched K7 b1 this morning, and opened my usual projects, ColorTab was no longer working. I quit and relaunched, but it didn't help. Disabling and enabling ColorTab didn't help, either. Finally, I removed and re-installed it, and now ColorTab is back.

buckthron | Thu, 2011-11-10 09:35

Todd, the same thing happened this morning. Something is clearly broken, but I hope that it's something pretty simple to fix. I'm not sure that I want to remove and reinstall ColorTab every day. ;-) Thanks.

jekido | Wed, 2012-10-24 13:45

After installing ColorTab, the orange bar (along top of tab) for the active tab disappears.

You can fix this by modifying the [colortab.json] file.

Do a search/replace to remove:
border: 1px solid #000 !important;

and the orange bar will re-appear for all tabs.

tarulia | Mon, 2013-03-11 02:21

Hey there, I've updated the install.rdf so it works with Komodo 8. On Windows it seems to run fine, but on Mac OS X (Mountain Lion) only the current (and hovered) tab is colored correctly. All other tabs are just standard grey :(

Any idea how to fix it? :/

veryvito2 | Wed, 2013-03-13 11:31

Man, I wish...

veryvito2 | Wed, 2013-03-13 19:30

The issue appears to be due to a background issue that's blocking the underlying color. You can remove this via userChrome.css. Complete instructions (and some bonus niceties) can be found here:

http://community.activestate.com/forum/color-tab-language#comment-24809

bluepicaso | Mon, 2013-05-27 07:22

Download the xpi file and update the RDF to support komodo 8.
then insall this addon.
here is my screenshot

below the code for userchrome.css
tabbox, tabs > tab .tab-text, tabs > tab .tab-text{
margin-right: 1px !important;
text-shadow: 0px 1px 0px rgba(255,255,255,0.7) !important; color: #666 !important;
}

tabbox, tabs > tab, tabs > tab{
margin-right: 1px !important;
}

tabbox, tabs > tab[selected="true"] .tab-text, tabs > tab[selected="true"] .tab-text{
color: #333 !important;
text-shadow: 0px 1px 0px rgba(255,255,255,0.5) !important;
}

.tab-icon{display: none;}
ko-pane tab .tab-icon{display: block;}
/*.tab-image-left{background: none; !important;}*/
.tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/page_white.png) !important; width: 16px !important; height: 16px !important; margin-left: 2px !important;}

/*#tabbed-view tabs > tab[label$=".php"] {background-image: -moz-linear-gradient(top, #C9E8FF, #9FD7FC) !important; }*/
#tabbed-view tabs > tab[label$=".php"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/page_white_php.png) !important; }

#tabbed-view tabs > tab[label$=".htm"],
/*#tabbed-view tabs > tab[label$=".html"] { background-color: #a6d39a !important; }*/
#tabbed-view tabs > tab[label$=".htm"],
#tabbed-view tabs > tab[label$=".html"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/page_white_world.png) !important; }

/*#tabbed-view tabs > tab[label$=".xml"] { background-color: #f6a877 !important; }*/
#tabbed-view tabs > tab[label$=".xml"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/page_white_code.png) !important; }

/*#tabbed-view tabs > tab[label$=".js"] { background-color: #77cac8 !important; }*/
#tabbed-view tabs > tab[label$=".js"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/cup.png) !important; }
/*#tabbed-view tabs > tab[label$=".css"] { background-color: #f6dbaa !important; }*/
#tabbed-view tabs > tab[label$=".css"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/css.png) !important; }

#tabbed-view tabs > tab[label$=".less"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/page_white_paint.png) !important; }

#tabbed-view tabs > tab[label$=".txt"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/page_white_text.png) !important; }

#tabbed-view tabs > tab[label$=".sql"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/database.png) !important; }

#tabbed-view tabs > tab[label$="htaccess"] .tab-image-left { background-image: url(chrome://famfamfamsilk/skin/icons/group_edit.png) !important; }

tabs > tab[selected="true"], tabs > tab[selected="true"]? {
background-color: #ff0000 !important;
font-weight: bolder !important;
}

the related icons names can be seen here at source:- http://www.famfamfam.com/lab/icons/silk/

For color tabs, you need to fill gradient colors and no borders.
-- sample usage
background-image: -moz-linear-gradient(top, #ECFFC9, #BDD68F) !important;border: 1px solid rgba(0,0,0,0); border-bottom-color:#BDD68F;

hope it helps thank you