GUI -- Application View Details Panel -

  - simplified DOM structure
  - refactored code to reduce boilerplate
  - cleaned up CSS

Change-Id: Iff443d7f038f1f770e7b3e9ed383c65b96ba6886

@@ -58,7 +58,7 @@ public class ApplicationViewMessageHandler extends UiMessageHandler {
     private static final String URL = "url";
     private static final String URL = "url";
     private static final String README = "readme";
     private static final String README = "readme";
     private static final String ROLE = "role";
     private static final String ROLE = "role";
-    private static final String REQUIRED_APPS = "_required_apps";
+    private static final String REQUIRED_APPS = "required_apps";
     private static final String FEATURES = "features";
     private static final String FEATURES = "features";
     private static final String PERMISSIONS = "permissions";
     private static final String PERMISSIONS = "permissions";
 
 
@@ -175,13 +175,13 @@ public class ApplicationViewMessageHandler extends UiMessageHandler {
 
 
             // process required applications
             // process required applications
             ArrayNode requiredApps = arrayNode();
             ArrayNode requiredApps = arrayNode();
-            app.requiredApps().forEach(s -> requiredApps.add(s));
+            app.requiredApps().forEach(requiredApps::add);
 
 
             data.set(REQUIRED_APPS, requiredApps);
             data.set(REQUIRED_APPS, requiredApps);
 
 
             // process features
             // process features
             ArrayNode features = arrayNode();
             ArrayNode features = arrayNode();
-            app.features().forEach(f -> features.add(f));
+            app.features().forEach(features::add);
 
 
             data.set(FEATURES, features);
             data.set(FEATURES, features);
 
 

@@ -15,7 +15,7 @@
  */
  */
 
 
 /*
 /*
- ONOS GUI -- Host View -- CSS file
+ ONOS GUI -- Applications View -- CSS file
  */
  */
 
 
 #ov-app h2 {
 #ov-app h2 {
@@ -75,7 +75,7 @@
 }
 }
 
 
 #application-details-panel .container {
 #application-details-panel .container {
-    padding: 0 12px;
+    padding: 0 10px;
 }
 }
 
 
 #application-details-panel .close-btn {
 #application-details-panel .close-btn {
@@ -91,60 +91,48 @@
     fill: #ccc;
     fill: #ccc;
 }
 }
 
 
-#application-details-panel .dev-icon {
+#application-details-panel .app-icon {
     display: inline-block;
     display: inline-block;
     padding: 0 6px 0 0;
     padding: 0 6px 0 0;
     vertical-align: middle;
     vertical-align: middle;
 }
 }
-.light .dev-icon svg.embeddedIcon .glyph {
-    fill: rgb(0, 172, 229);
-}
-.dark .dev-icon svg.embeddedIcon .glyph {
-    fill: #486D91;
-}
 
 
 #application-details-panel h2 {
 #application-details-panel h2 {
     display: inline-block;
     display: inline-block;
     margin: 8px 0;
     margin: 8px 0;
+    font-size: 12pt;
 }
 }
 
 
 #application-details-panel .top div.left {
 #application-details-panel .top div.left {
     float: left;
     float: left;
-    padding: 0 18px 0 0;
+    padding: 0 12px 0 0;
 }
 }
 #application-details-panel .top div.right {
 #application-details-panel .top div.right {
     display: inline-block;
     display: inline-block;
+    overflow: hidden;
+    width: 320px;
 }
 }
 
 
-#application-details-panel td.label {
+#application-details-panel td.label,
+#application-details-panel .app-url i {
     font-style: italic;
     font-style: italic;
     padding-right: 12px;
     padding-right: 12px;
     /* works for both light and dark themes ... */
     /* works for both light and dark themes ... */
     color: #777;
     color: #777;
 }
 }
 
 
-#application-details-panel .actionBtns div {
-    padding: 12px 6px;
+#application-details-panel td.value-bold {
+    font-weight: bold;
 }
 }
 
 
-#application-details-panel .top hr {
-    width: 95%;
-    margin: 0 auto;
+#application-details-panel .app-url {
+    padding: 10px 6px 6px;
 }
 }
 
 
-.light #application-details-panel hr {
-    opacity: .5;
-    border-color: #FFF;
-}
-.dark #application-details-panel hr {
-    border-color: #666;
-}
-
-#application-details-panel .middle hr {
+#application-details-panel hr {
     width: 95%;
     width: 95%;
-    margin: 0 auto;
+    margin: 10px auto;
 }
 }
-
 .light #application-details-panel hr {
 .light #application-details-panel hr {
     opacity: .5;
     opacity: .5;
     border-color: #FFF;
     border-color: #FFF;
@@ -155,25 +143,12 @@
 
 
 #application-details-panel .bottom table {
 #application-details-panel .bottom table {
     border-spacing: 0;
     border-spacing: 0;
+    width: 100%;
 }
 }
 
 
-#application-details-panel .bottom th {
-    letter-spacing: 0.02em;
-}
-
-.light #application-details-panel .bottom th {
-    background-color: #CCC;
-    /* default text color */
-}
-.dark #application-details-panel .bottom th {
-    background-color: #131313;
-    color: #ccc;
-}
-
-#application-details-panel .bottom th,
 #application-details-panel .bottom td {
 #application-details-panel .bottom td {
     padding: 6px 12px;
     padding: 6px 12px;
-    text-align: center;
+    text-align: left;
 }
 }
 
 
 .light #application-details-panel .bottom tr:nth-child(odd) {
 .light #application-details-panel .bottom tr:nth-child(odd) {