Sunday, March 17, 2013

Smart phone browser simulators package apps

See this blog post for more details on how to set things up for full effect. Also managed to not require a window decorations. Simply drag the top part to move the window around. Click on home buttons to return to desktop. Add tab buttons create additional windows. And the clock actually works :)

Now I am including the latest zips as they do not seem to crash my Chrome as I had experienced with initial versions of the apps (197381). In any case use at your own risk.










Friday, March 15, 2013

Just for fun - two Chrome packaged apps


This is just a teaser. I will share the apps once the bug # 197381 is fixed!

TODO
  • Figure out a way to send the correct User Agent headers so that websites will think that they are talking to real devices
  • Handler overflow and scrollbar (style). Exploring an interesting idea to fix this as follows:
  • Run Chrome with custom profile (using --user-data-dir)
  • Install the app in that instance of the Chrome
  • Run the app_host with the same custom profile
  • Create a shortcut for the app on the desktop
  • Edit the shortcut to point to the same profile (using --user-data-dir)
  • Edit the custom stylesheet at
.../Default/User StyleSheets/Custom.css
  • And add the following CSS 
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 3px;
    background: rgba(128,128,128,1); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

::-webkit-scrollbar-thumb:window-inactive {
background: rgba(192,192,192,0.4); 
}
  • And using the following command line option
--user-agent="Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3"
  • Voila...notice the thin scrollbars and mobile website for ios being displayed

  • You may have to use a batch (.bat) file to invoke the app like this
@echo off
cmd /c start C:\Users\name\AppData\Local\Google\Chrome\Application\app_host.exe --user-data-dir="c:\Users\name\.chriphone" --profile-directory=Default  --user-agent="Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3" --app-id=phfcjmgphpbpgofopejnibdpkcmmcfee

  • I get the following...gmail.com thinks it is talking to a real iPhone!

  • Similarly with the following user agent string:
--user-agent="Mozilla/5.0 (Linux; U; Android 4.0.4; en-gb; GT-I9300 Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30"
  • I get the following...gmail.com thinks it is talking to a real Galaxy S3!

Also S4:



This basically solves (albeit in a hacky way) a question that was asked on

Chrome Apps Office Hours - the WebView Control

Enjoy!

Wednesday, March 13, 2013

Wow! Desktop App for YouTube in my blog

I recently blogged about Desktop App for YouTube™. It turns out I can run it in my blog also. No, that is not a screenshot. Don't believe it...just search for videos in the red text box below e.g. "chrome packaged apps"...then select the video in the video title...click on the thumbnail to watch the video...



Just create a bookmark for URL:

http://sandipchitaleschromeapps-desktop-app-for-youtube.googlecode.com/git/youtubeviewer.html

Try Chrome Developer Tools Enhancement - Scope Varibles section

In this blog entry I talked about enhancing the Scope Variables section of Chrome Developer tools. If you want to try the enhancement yourself you can easily do so by following this procedure:
  • Download and install Chrome Canary. My changes are compatible with Chrome canary only.
  • Configure its launch with following parameters:
chrome.exe --remote-debugging-port=9222 --remote-debugging-frontend="http://chrome-developer-tools.googlecode.com/git/inspector/front-end/inspector.html"

The

--remote-debugging-frontend="http://chrome-developer-tools.googlecode.com/git/inspector/front-end/inspector.html"

parameter basically tells the Chrome debugger back-end to use the Developer Tools located at:

http://chrome-developer-tools.googlecode.com/git/inspector/front-end/inspector.html

which is where I have put my modified code for developer tools.

UPDATE: It appears that the runtime flag `—remote-debugging-frontend` was recently removed. Instead, custom frontend url needs to be specified after a pound sign in address of remote debugging server when connecting to the server running at 9222 due to the flag -remote-debugging-port=9222. Instead of navigating to “localhost:9222", go to “localhost:9222#http://localhost:8088/front_end/inspector.html?experiments=true”.

So the new invocation should look like this:

chrome.exe --remote-debugging-port=9222 --no-first-run --user-data-dir=C:\devtoolsprofile

  • Launch the page you want to debug in one tab

  • Launch another tab with the following URL
http://localhost:9222

UPDATE:

http://localhost:9222#http://localhost:8088/front_end/inspector.html?experiments=true
  • Select the page you want to debug in the grid that is shown - in my case it is test.html from above

  • Set breakpoints and run the action in page to be debugged that will cause the break point to be hit. Try out my enhancement to the Scope Variable section. The enhancement is to highlight the scope variables that are new or changed their value since the last time the debugee was suspended.

Please provide feedback.

Here is a simple packaged app that wraps Developer Tools:


If you are interested you can download it here.

Enjoy!



Sunday, March 10, 2013

Open closed Projects Eclipse Plugin

This plug-in allows you to select for opening from a list closed projects. I don't know about you but I keep my closed projects filtered out of Package Explorer to keep it clutter free.


The above filter dialog can be shown by clicking on the Filters menu item in Package Explorer view's drop down menu. Similarly the Project Explorer view has the Customize View menu item in it's dropdown view.

However just to open the closed projects I do not want to remove the filter. Hence this plug-in. Click on Open Closed Projects menu item in File menu or Package Explorer popup menu. It will show the following dialog with the list of closed projects. Select the projects you want to open and click OK. Those projects will be opened.


Install it from this update site:



Enjoy!

Saturday, March 09, 2013

Contributing to Chrome packaged app samples

Desktop App for YouTube on Chrome web store

Yay!



Get it here. Details?...you want more details? ok, read here. Obviosulsy has gone through some UI and branding changes.

Enjoy!

Tuesday, March 05, 2013

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!

Friday, March 01, 2013

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
> ...\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...

Tuesday, February 26, 2013

Chrome Developer Tools Enhancement - Scope Varibles section

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

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:

Enjoy!


Monday, February 18, 2013

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! 

Friday, February 15, 2013

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!

Sunday, November 25, 2012

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]



Tuesday, October 30, 2012

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!


Wednesday, October 24, 2012

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!

Sunday, October 21, 2012

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!

Saturday, July 21, 2012

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!  

Thursday, July 19, 2012

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!

Wednesday, July 04, 2012

Lamps


Here are some
Lamps
I made recently

Tuesday, June 26, 2012

Oops sculpture

Whimsical Oops Sculpture
made from from 
twigs
and
Birch wood slice


Saturday, June 23, 2012

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

Wednesday, February 01, 2012

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!