Steps Towards Totality...

There are many forums which I keep visiting and its difficult to keep track of a particular post and visiting that URL again and again. I use firefox and found that it is possible to expand the bookmark area and even have it collapse on Mouse Over/Out event.

Below are 2 snap shot which shows the area, before and after state.

In normal state

On Mouse Over

To achieve this, you will need to edit userChrome.css. I keep my Profile of firefox in a separate folder, so that even when my system crashes, I should have a backup of all my firefox settings. Now, if you have done this too, then you can use a plugin named “ChromeEdit Plus” http://webdesigns.ms11.net/chromeditp.html This plugin makes the task easier. Now go to Tools –> ChromeEdit Plus –> ChromeEdit. This will show you a ChromeEdit Plus Dialog window with 3 tabs to edit userChrome.css, userContent.css and user.js respectively. See the screenshot below:

You need to make changes in first tab to achieve the above settings for bookmark area. Select the code given below, and paste it at the end of userChrome.css tab.

/* Multi-row bookmarks toolbar */
#bookmarksBarContent {
    display:block !important;
  }
.places-toolbar-items {
  display:block !important;
  height: 96px !important;
  overflow-y:auto!important;
}
#bookmarksBarContent toolbarseparator {
  display:inline !important;
  }
#bookmarksBarContent .bookmark-item {
  visibility: visible !important;
 }
.chevron {
  height: 0px !important;
}

/* Auto-hide bookmarks toolbar */
#PersonalToolbar {
  max-height: 500px !important;
  visibility: collapse !important;
  }
#navigator-toolbox:hover > #PersonalToolbar {visibility: visible !important;}

Click on Save and then Restart. It should reflect the changes.

Note: You can edit userChrome.css manually by going to "%APPDATA%\mozilla\firefox\profiles\" location and look for chrome folder inside your profile folder, select userChrome.css and paste the above code and save.

Few useful links:

1. 
   
   100+ Useful Bookmarklets For Better Productivity | Ultimate List
   
   

Hope it helps someone :)

Cheers;
--
Chetan Sachdev

Freelance Programmer | Trainer | Teacher

Site: http://www.riageeks.com

___________________________________________

Chat cksachdev cksachdev cksachdev


Contact Me

Best way to understand what code is doing is to debug it and call certain methods, put some breakpoints and see what is happening inside functions. TLF source is separated in 4 different projects and flash builder allows to add only single source path(as of now in my understanding). So, to debug the source, I had to do few settings to make it work.

I was getting the error 1120: Access of undefined property debug. Then I explored the build file(ant script), which is used to build the swc file. There I found two arguments passed to compc:

<define name="CONFIG::debug" value="${dbg}"/>
<define name="CONFIG::release" value="${rel}"/>

Now, what define does ?

compiler.define: define a global AS3 conditional compilation definition, e.g. -define=CONFIG::debugging,true or -define+=CONFIG::debugging,true (to append to existing definitions in flex-config.xml) -->

I added the following arguments in Additional Compiler Arguments to make my Project problems free.-define+=CONFIG::debug,true -define+=CONFIG::release,false

 

Then it followed with the following errors:

1046: Type was not found or was not a compile-time constant: ContentElement

1046: Type was not found or was not a compile-time constant: GroupElement

1046: Type was not found or was not a compile-time constant: TextBlock

1046: Type was not found or was not a compile-time constant: TextLine

It was obvious, as these all classes are new, so its a Flash Player mismatch in my settings, after changing my flash player version from flash player 9 to flash player 10, all Problems are gone.

 

Hope this helps someone who is struggling to debug the tlf source code.

 

Cheers;

chetan

TLF is a Text Layout Framework to handle some complex text, selection, editing. It can be used with Flash Professional or Flex. It is framework agnostic as the entire API is in as3 so it can be used with either flex framework or framework which is available in Flash Professional. TLF is a wrapper on top of FTE(Flash Text Engine), which is new in Flash Player 10. TLF renamed many times, it was previously known as Text Layout Foundation/vellum and now Text Layout Framework.

When to use FTE ?

Flash Text Engine deals with Line and Paragraph Layout and TextLine rendering. When you need only static text then its best to make use of FTE.

When to use TLF ?

When you want to deal with Paragraph Layout, Selection, Editing then make use of TLF. TLF has a markup for text, which can be parsed using E4X. Its basically XML.

Where to find TLF Source?

You will have to checkout from SVN, instructions and other details are available at the below location:

http://opensource.adobe.com/wiki/display/tlf/Text+Layout+Framework

How to get started, which classes I should use etc ?

Below are links to some post I found useful to understand TLF:

http://corlan.org/2009/01/19/how-to-use-text-layout-framework-in-flex-32-or-air-15/

http://corlan.org/2009/02/12/how-to-add-a-scrollbar-to-text-layout-framework/

http://www.insideria.com/2009/06/utilizing-flash-text-layout-fr.html

and I found a nice presentation from one of TLF engineer, Robin Briggs. You can watch it here:

Text Component Library for Flash Player 10

Demo:

http://labs.adobe.com/technologies/textlayout/demos/

Thanks for stopping by, I will be writing few articles on TLF, keep checking or follow on twitter to get updates.

Cheers,

Chetan Sachdev