Properties need to be unique, even when they have the same name..

Change-Id: Ifc992458778860c6c8f574c76aad0e9f92699193

@@ -37,6 +37,7 @@ public class SettingsViewMessageHandler extends UiMessageHandler {
 
     private static final String COMPONENT = "component";
     private static final String FQ_COMPONENT = "fqComponent";
+    private static final String PROP = "prop";
     private static final String ID = "id";
     private static final String TYPE = "type";
     private static final String VALUE = "value";
@@ -46,7 +47,7 @@ public class SettingsViewMessageHandler extends UiMessageHandler {
     private static final char DOT = '.';
 
     private static final String[] COL_IDS = {
-            COMPONENT, FQ_COMPONENT, ID, TYPE, VALUE, DEFAULT, DESC
+            COMPONENT, FQ_COMPONENT, PROP, ID, TYPE, VALUE, DEFAULT, DESC
     };
 
     @Override
@@ -95,9 +96,12 @@ public class SettingsViewMessageHandler extends UiMessageHandler {
 
         private void populateRow(TableModel.Row row, String fqComp,
                                  ConfigProperty prop) {
-            row.cell(COMPONENT, simpleName(fqComp))
+            String simple = simpleName(fqComp);
+
+            row.cell(ID, simple + DELIM + prop.name())
                     .cell(FQ_COMPONENT, fqComp)
-                    .cell(ID, prop.name())
+                    .cell(COMPONENT, simple)
+                    .cell(PROP, prop.name())
                     .cell(TYPE, typeName(prop))
                     .cell(VALUE, prop.value())
                     .cell(DEFAULT, prop.defaultValue())
@@ -113,5 +117,7 @@ public class SettingsViewMessageHandler extends UiMessageHandler {
         private String typeName(ConfigProperty prop) {
             return prop.type().toString().toLowerCase();
         }
+
+        private static final String DELIM = "::";
     }
 }

@@ -43,10 +43,10 @@
     cursor: pointer;
 }
 
-#settings-details-panel .top .settings-title {
+#settings-details-panel .top .settings-title-1 {
     width: 90%;
-    height: 62px;
-    font-size: 20pt;
+    height: 28px;
+    font-size: 14pt;
     font-weight: lighter;
     overflow: hidden;
     white-space: nowrap;
@@ -55,6 +55,18 @@
     margin-bottom: 5px;
 }
 
+#settings-details-panel .top .settings-title-2 {
+    width: 90%;
+    height: 52px;
+    font-size: 20pt;
+    font-weight: lighter;
+    overflow: hidden;
+    white-space: nowrap;
+    padding: 0 6px 0 2px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
 #settings-details-panel td.label {
     font-weight: bold;
     text-align: right;

@@ -15,7 +15,7 @@
             <table>
                 <tr>
                     <td colId="component" sortable col-width="260px">Component </td>
-                    <td colId="id" sortable col-width="260px">Property </td>
+                    <td colId="prop" sortable col-width="260px">Property </td>
                     <td colId="type" sortable col-width="100px">Type </td>
                     <td colId="value" sortable col-width="100px">Value </td>
                     <td colId="desc">Description </td>
@@ -36,7 +36,7 @@
                     ng-class="{selected: prop.id === selId}"
                     ng-repeat-complete row-id="{{prop.id}}">
                     <td>{{prop.component}}</td>
-                    <td>{{prop.id}}</td>
+                    <td>{{prop.prop}}</td>
                     <td>{{prop.type}}</td>
                     <td ng-class="{notdef: prop.value !== prop.defValue}">
                         {{prop.value}}

@@ -36,7 +36,7 @@
     var pName = 'settings-details-panel',
         panelWidth = 540,
         topPdg = 60,
-        propOrder = ['fqComponent', 'id', 'type', 'value', 'defValue', 'desc'],
+        propOrder = ['fqComponent', 'prop', 'type', 'value', 'defValue', 'desc'],
         friendlyProps = [
             'Component', 'Property', 'Type', 'Value', 'Default Value',
             'Description'
@@ -93,7 +93,8 @@
             }
         }
 
-        ndiv('settings-title');
+        ndiv('settings-title-1');
+        ndiv('settings-title-2');
         ndiv('settings-props', true);
     }
 
@@ -111,7 +112,8 @@
     function populateTop(details) {
         var propsBody = top.select('.settings-props').append('tbody');
 
-        top.select('.settings-title').text(details.id);
+        top.select('.settings-title-1').text(details.component);
+        top.select('.settings-title-2').text(details.prop);
 
         propOrder.forEach(function (prop, i) {
             addProp(propsBody, i, details[prop]);