NetFlix queue style list reordering using AngularJS

Looking at the code you will see that it was kind of difficult to implement this. I ran into several issues with ng-repeat, it's scope, child isolated scopes and $scope.$broadcast and so on. I will blog about those some other time.

This is implemented a reorder directive (which introduces it's own 'isolate' scope) that must wrap the content inside ng-repeat. The reorder directive itself transcludes [1] the contents. As noted above the reorder directive introduces an 'isolate' scope...which may affect some assumptions made by other included content about the $parent scope. I may have to solve it differently.

In any case, here is the demo:

Plunker

Well, drag and drop reordering is probably a better and direct UI paradigm for this kind of stuff. But this is accessible.

A simple JSON object editor using AngularJS

I want to develop a generic JSON editor, driven by json-schema. In preparation for that I developed a simple AngularJS directive editproperty. This directive lets you edit the object in a single line. Also implemented the new directive editobjectproperty. This displays the object and allows direct editing.

You can play with these directives here:

Note that the object keys are sorted.

This demo does not seem to work on Internet Explorer™ - the reason being IE does not like the directives as elements. May have to convert to directives as attributes.

You can download the implementation of the directive here. The implementation uses '=' (which sets up bi-directional binding) style scope to pass in the object from outer scope into the directive. Here is an excellent video by John Lindquist explaining the '=' scope. It also makes use of the $last variable of the ng-repeat directive to deal with comma formatting. I wish looping structures in all languages had some of these kinds of syntactic sugar such as first, last, non-first, even, odd.

BTW this was an excellent exercise in learning the recursive directive and template behavior of AngularJS.

Plunker

Try out

• Add
• Update
• Remove

use cases.

Well...you will say "What is the big deal? I can edit the JSON object as a simple text much faster"...and you would be right. The power of this will become apparent once I hook it up to JSON-schema. With that the property editor will only allow valid JSON object structure and property values in compliance with JSON-schema. I will be using this to implement Chrome Packaged App Manifest Version 2 Editor App.

I found Jsonary.com which is a similar concept. I will explore writing custom renderers using AngularJS and Twitter Bootstrap.

Todo

• Support object properties
• Support array properties  - partially done. I may have to write a new directive editarray .
• Support direct editing of property name and value in editobject tag
• Dropdown of existing properties to select from to edit or remove

Chrome Packaged App Manifest Version 2 Editor App

Started working on Chrome Packaged App Manifest Version 2 Editor App using AngularJS and Twitter Bootstrap.

Download

One of the cool trick I learned while implementing this is demonstrated by this fiddle. It deals with using AngularJS's ng-repeat with an object, and editing the values of properties of that object within it. It makes a clever use of angular.copy() to isolate input-bound variables.

Todo

• Implement Load and Save using file system API
• Implement complete Manifest Version 2
• Eclipse integration
• [Stretch Goal] Refactor into generic JSON editor...possibly using JSON Schema
• Define manifest version 2 JSON schema.
• Use the schema to implement the editor

Modern Art generator App

Here is a silly packaged app. When launched it shows a chrome-less square window with some modern art animation. Clicking on the directional (N, NE, E, SE, S, SW, W, NW) tridrants it creates a similar chrome-less square window with some modern art animation in that direction. Clicking on the center tridrant closes the window. Here is a sample screenshot:

Try it in another tab!

By clicking in various directions you can create endless modern art on your desktop.

I am trying to create display wall type application...and ended up creating this fun app on the way :)

Enjoy!

TIP: -webkit-app-region CSS property

While looking through the source of windows sample (https://github.com/GoogleChrome/chrome-app-samples/tree/master/windows ) I noticed a CSS property:

-webkit-app-region: drag;

What this does is that if you drag on any element with this style, it moves the whole app window around. No other mouse and keyboard interactions with the elements area are possible though. To work around that you have to use the style:

-webkit-app-region: no-drag;

on the sub-element with which you want to allow normal keyboard and mouse interaction.

This is very handy when you create chrome app windows with 'frame' : 'none' window creation option. In fact, -webkit-app-region works only when you create the window with 'frame' : 'none' . You don't have to implement the logic to support window move.

BTW even when using with 'frame' : 'none' which results in lack of system supplied titlebar and borders, the system menu to move, resize, minimize, maximize, restore and close the window is available by right clicking on the areas defined by:

-webkit-app-region: drag;

The standard keyboard shortcut such as Alt+SPACE on windows can be used to invoke the menu also. The window can be resized using the window edges.

I used it in smart phone browser simulator apps, Desktop App for YouTube and Chrome Packaged App Manifest Version 2 Editor App.

Hope this helps other Chrome App writers.

TIP: Setting title attributes of option tags of select directive of angularjs

The Desktop App for YouTube™ is implemented using Angularjs. In it I use the select directive like this:

<select id="video-titles" multiple="" ng-model="selectedYouTubeVideoArray" ng-options="youTubeVideo.title for youTubeVideo in youTubeVideos">
</select>

The select directive generates the option tags based on the model. However this means that I cannot set the title attributes of option in the markup. I achieved in the JavaScript like this:

// populate the $scope.youTubeVideos array

$scope.youTubeVideos = [];

angular.forEach(data.data.items, function(item) {

    $scope.youTubeVideos.push(new YouTubeVideo(item));

});

// then loop through the options and set title

setTimeout(function()  {

    var options = document.querySelectorAll("#video-titles option");

    if (options) {

        for (var i = 0; i < options.length; i++) {

            options[i].title = options[i].textContent;

        }

    }

}, 0);

Note however that I had to use the setTimeout(..., 0) to set the title so that Angularjs actually gets the chance to create child option tags.

Hope this helps you!

Desktop App for YouTube with embedded videos

In this and this blog entry I talked about Desktop App for YouTube. However in that variant the videos are shown in a separate window. This has to do with the fact that the webview tag cannot show embedded videos in the current stable version of Chrome. However the webview tag in Chrome Canary can show embedded videos. With that I managed to get embedded videos in Desktop App for YouTube that only works with Chrome Canary. Here is the screenshot:

Also added support to popout the video. This basically answers the question someone asked here.You can further make it full screen using the built in control.

Available on Chrome web store.

While implementing this I ran into CSP limitations and capabilities and limitation of embedded sandboxed iframe and webview tags. I got around those issues by using absolute positioning and z-index to position webview at the exactly right sub-rectangle if sandboxed iframe.

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.

chrgalaxys4.zip

chrgalaxys3.zip

chriphone.zip

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!

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!

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:

http://sandipchitaleseclipseplugins.googlecode.com/svn/trunk/OpenClosedProjectsFeatureUpdateSite/site.xml

Enjoy!

Contributing to Chrome packaged app samples

Details

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!

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!