GUI -- App view -

- adjusted column widths.
- fixed broken escape handler.
- made URL in details pane a hyperlink.

Change-Id: I0e9756ded47a297f5b2f15177678e7de8d37ee37

@@ -41,12 +41,12 @@
             <table>
             <table>
                 <tr>
                 <tr>
                     <td colId="state" class="table-icon" sortable></td>
                     <td colId="state" class="table-icon" sortable></td>
-                    <td colId="icon" col-width="36px">Icon </td>
-                    <td colId="id" sortable>App ID </td>
-                    <td colId="version" sortable>Version </td>
-                    <td colId="category" sortable>Category </td>
-                    <td colId="origin" sortable>Origin </td>
-                    <td colId="desc" col-width="475px">Description </td>
+                    <td colId="icon" class="table-icon">Icon </td>
+                    <td colId="id" sortable col-width="250px">App ID </td>
+                    <td colId="version" sortable col-width="120px">Version </td>
+                    <td colId="category" sortable col-width="100px">Category </td>
+                    <td colId="origin" sortable col-width="100px">Origin </td>
+                    <td colId="desc">Description </td>
                     <td col-width="50px">URL </td>
                     <td col-width="50px">URL </td>
                 </tr>
                 </tr>
             </table>
             </table>

@@ -83,10 +83,6 @@
         return false;
         return false;
     }
     }
 
 
-    function handleEscape() {
-        return editNameCancel() || closePanel();
-    }
-
     function addCloseBtn(div) {
     function addCloseBtn(div) {
         is.loadEmbeddedIcon(div, 'plus', 30);
         is.loadEmbeddedIcon(div, 'plus', 30);
         div.select('g').attr('transform', 'translate(25, 0) rotate(45)');
         div.select('g').attr('transform', 'translate(25, 0) rotate(45)');
@@ -137,6 +133,11 @@
         addCell('value', value);
         addCell('value', value);
     }
     }
 
 
+    function addUrl(tbody, index, value) {
+        var href = '<a href="' + value + '" target="_blank">' + value + '</a>';
+        addProp(tbody, index, href);
+    }
+
     function addIcon(tbody, value) {
     function addIcon(tbody, value) {
         var tr = tbody.append('tr');
         var tr = tbody.append('tr');
         var td = tr.append('td');
         var td = tr.append('td');
@@ -166,7 +167,8 @@
 
 
         // place rest of the fields to the right table
         // place rest of the fields to the right table
         propOrder.forEach(function (prop, i) {
         propOrder.forEach(function (prop, i) {
-            addProp(rightTbl, i, details[prop]);
+            var fn = prop === 'url' ? addUrl : addProp;
+            fn(rightTbl, i, details[prop]);
         });
         });
 
 
         // place description field to the description table
         // place description field to the description table
@@ -450,7 +452,7 @@
                 }
                 }
                 // create key bindings to handle panel
                 // create key bindings to handle panel
                 ks.keyBindings({
                 ks.keyBindings({
-                    esc: [handleEscape, 'Close the details panel'],
+                    esc: [closePanel, 'Close the details panel'],
                     _helpFormat: ['esc']
                     _helpFormat: ['esc']
                 });
                 });
                 ks.gestureNotes([
                 ks.gestureNotes([