ONOS-1479 -- GUI - augmenting topology view for extensibility: WIP.

Change-Id: I11820a9ff8f446c0d10a0311cee5ce448c15f402
diff --git a/web/gui/src/main/webapp/app/fw/svg/glyph.js b/web/gui/src/main/webapp/app/fw/svg/glyph.js
index b00f81d..838a2ac 100644
--- a/web/gui/src/main/webapp/app/fw/svg/glyph.js
+++ b/web/gui/src/main/webapp/app/fw/svg/glyph.js
@@ -45,6 +45,10 @@
             "C429.9,285.5,426.7,293.2,427.7,300.4z"
         },
 
+    // TODO: ONOS-2566 glyphs for device types:
+    //          otn, roadm_otn, firewall, balancer, ips, ids,
+    //          controller, virtual, fiber_switch, other
+
         glyphDataSet = {
             _viewbox: "0 0 110 110",
 
diff --git a/web/gui/src/main/webapp/app/fw/widget/toolbar.js b/web/gui/src/main/webapp/app/fw/widget/toolbar.js
index 00086dc..050afd0 100644
--- a/web/gui/src/main/webapp/app/fw/widget/toolbar.js
+++ b/web/gui/src/main/webapp/app/fw/widget/toolbar.js
@@ -18,6 +18,7 @@
  ONOS GUI -- Widget -- Toolbar Service
  */
 // TODO: Augment service to allow toolbars to exist on right edge of screen
+// TODO: also - make toolbar more object aware (rows etc.)
 
 
 (function () {
@@ -80,6 +81,7 @@
             panel = ps.createPanel(tbid, settings),
             arrowDiv = createArrow(panel),
             currentRow = panel.append('div').classed('tbar-row', true),
+            rowButtonIds = [],          // for removable buttons
             tbWidth = arrowSize + 2,    // empty toolbar width
             maxWidth = panel.width();
 
@@ -162,9 +164,43 @@
             } else {
                 panel.append('br');
                 currentRow = panel.append('div').classed('tbar-row', true);
+
+                // return API to allow caller more access to the row
+                return {
+                    clear: rowClear,
+                    setText: rowSetText,
+                    addButton: rowAddButton,
+                    classed: rowClassed
+                };
             }
         }
 
+        function rowClear() {
+            currentRow.selectAll('*').remove();
+            rowButtonIds.forEach(function (bid) {
+                delete items[bid];
+            });
+            rowButtonIds = [];
+        }
+
+        // installs a div with text into the button row
+        function rowSetText(text) {
+            rowClear();
+            currentRow.append('div').classed('tbar-row-text', true)
+                .html(text);
+        }
+
+        function rowAddButton(id, gid, cb, tooltip) {
+            var b = addButton(id, gid, cb, tooltip);
+            if (b) {
+                rowButtonIds.push(id);
+            }
+        }
+
+        function rowClassed(classes, bool) {
+            currentRow.classed(classes, bool);
+        }
+
         function show(cb) {
             rotateArrowLeft(arrowDiv);
             panel.show(cb);