Desktop App powered by YouTube™

A few years ago I created the YouTube™ Viewer  add-on (which still works!) for Firefox. The idea was to search for YouTube™ videos in a distraction-free and safe manner and then watch them. Google Chrome now supports packaged apps which can be launched from a desktop icon. I thought this can be used to create a YouTube™ viewer app for Chrome. I created one using Chrome Packaged App APIs [1] [2] and Angular.js. One thing I could not achieve though was to actually embed the video inside the app. This is probably a bug...so I filed one:

180390 - Sandboxed page in packaged app cannot display embedded YouTube video.

Here are the screenshots for instant gratification:

The Desktop App powered by YouTube™:

The video playing in Chrome:

The desktop launcher for Desktop App powered by YouTube™:

Get it here.

I will soon blog about the details of how the app works and while doing that explain concepts such as sandboxed pages and security restrictions imposed by the Chrome App programming model.

Here is a screenshot of my original Firefox add-on:

You can download it here. This is built using XUL plus JavaScript.

Enjoy!

Hacking Chrome Developer Tools

In the Contributing to Chrome Developer Tools > Setting up section it talks about:

• :
• Clone WebKit git repo from git://git.webkit.org/WebKit.git
• Set up a local web server that would serve files from WebKit/Source/WebCore/inspector on some port (8090)

I wanted a simple web server. To do this here is what I did:

• Cloned WebKit git repo from git://git.webkit.org/WebKit.git

> cd c:\

> git clone git://git.webkit.org/WebKit.git

• Installed node,js
• Installed connect like so

> cd c:\WebKit\Source\WebCore\inspector

> npm install connect

• Created a front-end-server.js file with content which basically sets up a simple web server:

var connect = require('connect');

connect.createServer(

    connect.static(__dirname)

).listen(8090);

• The __dirname basically serves the files relative to c:\WebKit\Source\WebCore\inspector
• Ran the server like so

> node front-end-server.js

• Followed rest of the instructions on the page Contributing to Chrome Developer Tools
• Download and run Chrome Canary

> ...\chrome.exe --user-data-dir=C:\canary-profile --remote-debugging-port=9222 --remote-debugging-frontend="http://localhost:8090/front-end/inspector.html". BTW, it is a good idea to run with --user-data-dir=C:\canary-profile parameter so that this instance does not interfere with your desktop Chrome you use for your regular use.

• Launch another Chrome (this does not have to be the Chrome Canary) window on http://localhost:9222 . This shows a grid menu of pages to select from to debug. Please note that this menu is served by a small Web server running inside the first instance of Chrome Canary due to the --remote-debugging-port=9222 command line parameter passed to it when it was started

• Clicking on test.html launches the debugger which is using my copy of devtools from C:\WebKit\Source\WebCore\inspector\front-end . Please note that the link address of the test.html in the http://localhost:8090/front-end/inspector.html?ws=localhost:9222/devtools/page/1. Why http://localhost:8090/front-end/inspector.html you ask? That is because of the --remote-debugging-frontend="http://localhost:8090/front-end/inspector.html" command line parameter passed in when first instance of Chrome canary was started.

• I was able to edit the Chrome Developer Tools front-end code in the following directory iteratively  C:\WebKit\Source\WebCore\inspector\front-end

Voila! I was in business...

Chrome Developer Tools Enhancement - Scope Varibles section

I just submitted an enhancement patch to the Chrome Developer tools issue:

• 29714 - apply a style change to scope variables as they change from step to step

The patch implements the following functionality. As you step through the JavaScript code:

• When a new property comes into scope it's name and value is highlighted. For example on line 10 a new propety j was added to object o. Hence it's name and value is highlighted.

• When a property is modified since the last suspension the value is highlighted. For example in line 11 the values of both properties i and j were modified, hence their values are highlighted.

• The value is highlighted when the type of the value changes (not shown). For example, i = 1; and i = '1'; are same in terms of == operator, such a change is highlighted.

This functionality is (better) similar to the Eclipse JDT Java Debugger.

How does it work

The implementation is fairly simple. It keeps track of the set of properties and their values and types that are shown in the Scope variables section. Next time when the debugee is suspended it compares the new set of properties with the old set. That is how detects new properties as well as changes in values and types. The implementation is fairly efficient as long as the user has not expanded too may nodes of the Scope Variables tree.


I do not have commit permissions, but I hope the Chrome Developer Tools team accepts my patch.

If anyone is adventurous enough here is the patch, please give it a try and send me feedback. The patch applies to .ObjectPropertiesSection.js and WatchExpressionsSidebarPane.js.

You can also apply the changes in the patch in the Sources tab source editor of the DevTools.js. For this you will have to invoke Chrome Developer Tools (meta instance) on the window of the Chrome Developer Tools (first instance) that you are using to debug your web page. Kind of meta debugging. For this to work easily your first instance of Chrome Developer Tools has to be running in separate window.


Here is a related issue, once solved will make the implementation more precise becuase the eaxct identity of the objects in the debugee will be reliabliy maintained be the backend:

• 109908 - Web Inspector: support stable remote object ids

Enjoy!

Overview Plugin for Eclipse

The Overview Eclipse Plugin shows the overview of the current text editor in the Overview view. Here is a screenshot:

Please note that the tooltip shows the line under the cursor with a » . If the mouse is clicked the tracked editor will scroll to that line.
Install it from this update site:

http://sandipchitaleseclipseplugins.googlecode.com/svn/trunk/text.overview.updatesite/site.xml

Now available on Eclipse Marketplace.



You may have to reset the perspective first time after installation to get the Overview view in the right position i.e.to the right of Editors area.

TODO

1. Use Overview view to scroll the editor whose overview is being shown.
2. Track the changes to the tracked editor. Well, sort of. When the editor contents are modified the Overview stops updating. It resumes if the modifications are saved or the focus is lost to other editor and then regained.
3. Show tooltip with context showing line under caret.
4. Track changes to text as the user is typing.

Tested with Eclipse 3.5+ and 4.1+.

Source

Enjoy! 

gSpeak Chrome Extension

gSpeak is a simple Chrome extension. To install it click here. Once you install the extension you will see the gSpeak button on the Chrome toolbar:

Click on the button in the toolbar to speak the text selection in the webpage. If there is no text selection in the webpage, the webpage content is spoken. While the speech is in progress, the badge on the button shows the remaining percentage of the text to be spoken. Clicking on the button pauses the speech. Once paused, if you click on the button within one second the speech is cancelled. After one second, clicking on the button resumes the speech.

You can adjust the speech settings on the gSpeak Options page:

Enjoy!

JavaScript Instance Diagram

For JavaScript code:

var obj = {};

[Note: __proto__ is available on Chrome and Firefox]

For JavaScript code:

function Rect(w, h)
{
    this.width = w;
    this.height = h;
}
Rect.prototype.area = function() {
    return this.width * this.height;
}
var rect = new Rect(2,4);

[Note: __proto__ is available on Chrome and Firefox]

Eclipse: Show all instances of implementors of selected Java Interface

UPDATE: Added support for showing instances of classes that have specified Annotations (e.g. @Resource) on them. Added support for not showing instances for a class if the number of instances is 0.

In this blog entry I talked about extension to Eclipse Java debugger to show all instances of selected Java Class in the Expressions view. Someone requested the support for showing all instances of objects that implement selected Java Interface. I have implemented that feature now. To fully understand the context see the original blog entry first. Then see the screenshots below:

You can install the plug-in from the plug-in's update site:

http://sandipchitaleseclipseplugins.googlecode.com/svn/trunk/AllInstancesUpdateSite

Enjoy!

Windows 7: Thin Vertical Taskbar

With the widescreen monitors I like to have my Windows 7 Taskbar positioned on the left edge of the monitor with Auto-hide turned on. There are many benefits of this:

• With widescreen monitor the horizontal space is plentiful
• Having the Taksbar on the left keeps it out of the areas where you may do mouse based activity. Having it on the right edge interferes with mouse based scrollbar activity

But no matter how much I try I cannot make it thinner than this:

I can make it very short when the Taskbar is horizontal:

How I wish I could make it thinner like this:

I got annoyed enough that I went googling and figured out a way that works for me. I am going to show you how. Just follow these step:

• Set the taskbar settings like so:

Right-click on the taskbar and select Properties menu to show the Taskbar and Start Menu Properties dialog.

• Create a file ThinTaksBar.bat with content:

echo ThinTaskbar
net stop "UxSms"
net start "UxSms"

It basically restarts the service "UxSms". This needs to be run as administrator. You can run the script manually with as administrator using the runas command like this:

> runas /noprofile /user:administrator ThinTaksBar.bat

• To automate this create a scheduled task using Task Scheduler. Configure to run it with highest priviledges approximately 2 minutes after login like so:

Next time you log in, after a minute or so you will have the thin Taskbar.

Thats all folks!

Eclipse: Enhanced Cut Copy Paste Plus Plug-in

UPDATE: Now supports paste from history using (CTRL+SHIFT+Alt+V on Widnows and Linux, COMMAND+SHIFT+OPTION+V on Mac)

In this entry I blogged about the Cut Copy Paste Plus Plug-in. I have enhanced it to hook into Eclipse's standard paste command. The first paste invocation works as usual. If the General > Editors > Cut Copy Paste Plus > Quick Paste cycles through History is selected, the the quick successive invocation (within the delay specified by General > Editors > Cut Copy Paste Plus > Paste next delay(milliseconds)) of standard Edit > Paste command (CTRL+V on Widnows and Linux, COMMAND+V on Mac) will paste the strings from history.

This special behavior of paste can be toggled using the Toggle Quick Paste Cycles Through History command (CTRL+SHIFT+V on Widnows and Linux, COMMAND+SHIFT+V on Mac).

BTW this works in any StyledText and Text widgets.

You can install the plug-in from Eclipse Marketplace:

https://marketplace.eclipse.org/content/cut-copy-paste-plus

Enjoy!

Eclipse: Clone Remote Systems View Plugin

The RSE Plugin for Eclipse has the Remote Systems View which allows you to look at local file system as well as remote files system using SSH. I use this to view the file system of remote Linux machines from inside my Eclipse IDE on my development machine. This comes very handy for dragging and dropping files between Package Explorer to the remote machine's file system. However if you want to copy files from one remote machine to another it can get tricky because you may have to autoscroll to drag and drop the files due to the long expanded trees shown in the same view. Well, I thought let me just clone the Remote Systems View, place the original and the cloned views side by side, scroll to the right place in the trees in each view and then simply drag and drop  the files. Alas, the Remote System View does not support the cloning. Bummer... No fear....I wrote a small Eclipse Plugin which allows you to do just that. The Clone View feature lets you clone the Remote Systems View as many times as you like. You can further rename each view to your liking, e.g. the name of the remote machine on which you want focus in that view.


Here is the screenshot which shows the original and cloned views focused on different directories on the local file system, but you get the idea:

Get it from the update site here: http://sandipchitaleseclipseplugins.googlecode.com/svn/trunk/CloneViewUpdateSite 

As always feedback welcome. 

Enjoy!  

Tip: Installing JDK RPM on linux and actaully using it

Oracle puts out JDK updates every now and then. The Linux update comes in the binary form (for install in any directory) and RPM form. I like RPM format because it plugs into OS's standard package installation mechanism. So I downloaded the RPM from here and installed it using:

> chmod u+x jdk-6u31-linux-x64-rpm.bin

> ./jdk-6u31-linux-x64-rpm.bin

:

:

:

and went to command line and typed:

> java -version 
java version "1.4.2"
gij (GNU libgcj) version 4.1.2 20080704 (Red Hat 4.1.2-48)
Copyright (C) 2006 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

Huh? I had presumed that installing the RPM will do the right thing. Uh uh.

Sure enough:

> ls -l /usr/bin/java
lrwxrwxrwx 1 root root 22 Apr 13 11:35 /usr/bin/java -> /etc/alternatives/java

> ls -l /etc/alternatives/java
lrwxrwxrwx 1 root root 30 Apr 13 14:13 /etc/alternatives/java -> /usr/lib/jvm/jre-1.4.2-gcj/bin/java

revealed that java command was linked to  jre-1.4.2-gcj java.

Apparently you have to run the following commands to make the newly installed  java and javac as available alternatives.

> update-alternatives --install /usr/bin/java java /usr/java/jdk1.6.0_31/bin/java 3000
> update-alternatives --install /usr/bin/javac javac /usr/java/jdk1.6.0_31/bin/javac 3000

Now to see what all Java alternatives are available you can run:

> update-alternatives --display java
java - status is manual.
 link currently points to /usr/lib/jvm/jre-1.4.2-gcj/bin/java
/usr/lib/jvm/jre-1.4.2-gcj/bin/java - priority 1420
 slave keytool: /usr/lib/jvm/jre-1.4.2-gcj/bin/keytool
 slave rmiregistry: /usr/lib/jvm/jre-1.4.2-gcj/bin/rmiregistry
 slave jre_exports: /usr/lib/jvm-exports/jre-1.4.2-gcj
 slave jre: /usr/lib/jvm/jre-1.4.2-gcj
/usr/java/jdk1.6.0_31/bin/java - priority 3000
 slave keytool: (null)
 slave rmiregistry: (null)
 slave jre_exports: (null)
 slave jre: (null)
Current `best' version is /usr/java/jdk1.6.0_31/bin/java.

And finally to select which java to use - use the command:

> update-alternatives --config java
There are 2 programs which provide 'java'.
  Selection    Command
-----------------------------------------------
 + 1           /usr/lib/jvm/jre-1.4.2-gcj/bin/java
*  2           /usr/java/jdk1.6.0_31/bin/java
Enter to keep the current selection[+], or type selection number: 2 

Select the one from the list and type ENTER. Then do:

> update-alternatives --config javac

:

:




and viola! Now the system will use the Java you selected.

Hope this helps you!

Painting

Lamps

Here are some

Lamps

I made recently

Oops sculpture

Whimsical Oops Sculpture

made from from 

twigs

and

Birch wood slice

Dancer Sculpture

Dancer Sculpture

 made from from 

twigs

and

Birch wood slice

I tried to use the slope of

the Birch wood slice

to give a sense of 

movement

to 

the Dancer

Paintings I did over the weekend

Eclipse: Cut Copy Paste Plus Plug-in

The Cut Copy Paste Plus Eclipse Plug-in enhances the cut, copy functionality by recording the history of the text that was cut or copied. It enhances the paste functionality by allowing you to paste the text from the history. To use the cut and copy history functionality you do not have have to do anything special. To access the special paste functionality you have to invoke Paste Plus command which is by default bound to Ctrl+Shift+V on windows and linux and Command+Shift+V on mac. You can change the keybindings to liking using the Preferences > General > Keys preference page. When you invoke this command the text that was last copied is pasted. If you re-invoke the same commands within a short period of time (default 1 second) - the text from the history is pasted.

The behavior of the plug-in can be configured in the Cut Copy Paste Plus preference page:

In the following example I copied the words three, four and five. Then I invoked the Paste Plus command. The first time it pasted five :

Ctrl+Shift+V

 

Then I invoked the same command quickly and it pasted four :

Ctrl+Shift+V (within 1000 millisecond)

  Then I invoked the same command quickly again and it pasted three :

Ctrl+Shift+V (within 1000 millisecond )

BTW this works in any StyledText and Text widgets.

You can install the plug-in from Eclipse Marketplace:

https://marketplace.eclipse.org/content/cut-copy-paste-plus

Enjoy!

Code Clips Eclipse Plug-in

The Code Clips Eclipse Plug-in lets you create code clips on the fly and associate abbreviations with them. The abbreviations are expanded using the TAB key.

If there is more than one abbreviation that matches the prefix before the caret then a content assist style popup is shown. You may select the item in the popup by clicking on it or typing it's ordinal number. Once selected the expansion associated with the selected abbreviation is inserted in place of the prefix.

The expansion text may contain the following variables:

The numbered variables ${1} through ${9} act as tab stops. The ${clipboard} variable will be replaced by the contents of the clipboard at the time of expansion. You can use the Variablize... dialog to convert multiple occurrence of same word into a variables. All occurrences of the same variable can be edited together using the Linked editing support of Eclipse editors.

To create a code clips use the Edit > Create Code Clip menu item

or use Control+5 (windows and linux) or Command+5 (mac) keyboard shortcuts. This will show the Create Code Clip dialog.

If you had any text selected in the editor that will be populated in the Expansion text area. You may insert the above mentioned variables using the Insert Variables menu button.

You can manager the Code Clips using the Manage Code Clips dialog which can be invoked by clicking on the Manage... button in Create Code Clips dialog :

The Code Clips Eclipse Plug-in is available on Eclipse Marketplace!

UPDATED:One-click editor splitting in Eclipse

In the One-click editor splitting in Eclipse post I blogged about a simple Eclipse plug-in that lets you split the active editor. I have updated the plug-in to let you split the active editor with any other editors in the same tab. The functionality is available in the Split Editor toolbar's Horizontal and Vertical split button's drop down menu.

The updated Split Editor Plug-in is available on Eclipse Marketplace!

TIP: Stable history navigation using Eclipse toolbar

Eclipse has a nice location history navigation toolbar. By repeatedly clicking on the history toolbar buttons you can quickly navigate to the locations the cursor/focus was at in various editors that are open. Unfortunately, out of the box, the position of the history navigation toolbar buttons is not stable if you have files of varying types open in the editor area. That is because the toolbar contributed by various editors are shown and hidden as the focused editor changes. These editor contributed toolbars (shown in blue rectangle below), when shown, are inserted to the left of history navigation toolbar. The following two screenshots demonstrates the behavior.

Fortunately there is a way to fix this behavior. It is possible to to drag the editor toolbar to the right-most side of the toolbar strip like shown in the following screenshot:

With this adjustment the history navigation toolbar remains in same place making it easier to use.

You may have to unlock the toolbars to see the drag handles as shown in the screenshot below:

I think this should be the default location of editor toolbars in Eclipse. Just filed this enhancement.

Such small adjustments makes the tool more productive.

Selection Explorer Eclipse Plug-in

This Selection Explorer feature shows information about:

• Active Part (this is somewhat similar to Plug-in spy action)
• Part name
• Part Id
• Class implementing the part
• Super class of the class implementing the part
• Interfaces
• Contributing Plugin
• Active Selection
• Class of selection objects
• Superclass of selection object
• Interfaces
• Adapted Types
• toString() value
• Active Contexts
• Active ActionSet Contexts

in the Selection Explorer view. Here are some screenshots:

Clicking on the hyperlinks shows the Open Type dialog:

Update Site: http://sandipchitaleseclipseplugins.googlecode.com/svn/trunk/SelectionExplorerUpdateSite

Also on Eclipse Marketplace.

Close Views Eclipse Plug-in

The Close Views feature provides commands related to closing views:

• Window > Close (active) View - This closes the last active view.
• Window > Close All Views in Tab - This closes all views in the tab containing the last active view.
• Window > Close Other Views in Tab - This closes other views in the tab containing the last active view.
• Window > Other Views -  This closes all views except the last active view.
• Window > Close All Views - As such this closes all the open views. If all the views are already closed it offers to reset the perspectives.

Here is a screenshot:

Update site:
http://sandipchitaleseclipseplugins.googlecode.com/svn/trunk/CloseViewsFeatureUpdateSite/site.xml

Also on Eclipse Marketplace.

Path Tools Eclipse Plug-in Updated

What is new?

• Added support for Copy Path, Explore and Command Line Shell actions to local resources in RSE (needs RSE)
• Added Copy SVN URL for resources in SVN based projects (needs Subclipse)

Read more here.