ONOS-4359: continued work on theming UI

- topo view: fixed vertical spacing (and interactions) of summary and details panels.
- added bbox() to panel API.

Change-Id: I84544cc558020582c95d33096b92ac5756e68628
(cherry picked from commit e8c54dbe)

@@ -81,6 +81,7 @@
                 append: appendPanel,
                 append: appendPanel,
                 width: panelWidth,
                 width: panelWidth,
                 height: panelHeight,
                 height: panelHeight,
+                bbox: panelBBox,
                 isVisible: panelIsVisible,
                 isVisible: panelIsVisible,
                 classed: classed,
                 classed: classed,
                 el: panelEl
                 el: panelEl
@@ -150,6 +151,10 @@
             p.el.style('height', h + 'px');
             p.el.style('height', h + 'px');
         }
         }
 
 
+        function panelBBox() {
+            return p.el.node().getBoundingClientRect();
+        }
+
         function panelIsVisible() {
         function panelIsVisible() {
             return p.on;
             return p.on;
         }
         }

@@ -30,10 +30,11 @@
         idSum = 'topo-p-summary',
         idSum = 'topo-p-summary',
         idDet = 'topo-p-detail',
         idDet = 'topo-p-detail',
         panelOpts = {
         panelOpts = {
-            width: 268
+            width: 290          // summary and detail panel width
         },
         },
-        sumMax = 262,
-        padTop = 20,
+        sumMax = 262,           // summary panel max height
+        padTop = 16,            // summary panel padding below masthead
+        padFudge = padTop + 6,
         devPath = 'device';
         devPath = 'device';
 
 
     // internal state
     // internal state
@@ -90,8 +91,7 @@
         //    only adjusts if the body content would be 10px or larger
         //    only adjusts if the body content would be 10px or larger
         function adjustHeight(fromTop, max) {
         function adjustHeight(fromTop, max) {
             var totalPHeight, avSpace,
             var totalPHeight, avSpace,
-                overflow = 0,
-                pdg = 30;
+                overflow = 0;
 
 
             if (!fromTop) {
             if (!fromTop) {
                 $log.warn('adjustHeight: height from top of page not given');
                 $log.warn('adjustHeight: height from top of page not given');
@@ -103,11 +103,12 @@
                 return null;
                 return null;
             }
             }
 
 
+            p.el().style('top', fromTop + 'px');
             p.el().style('height', null);
             p.el().style('height', null);
             body.style('height', null);
             body.style('height', null);
 
 
             totalPHeight = fromTop + p.height();
             totalPHeight = fromTop + p.height();
-            avSpace = fs.windowSize(pdg).height;
+            avSpace = fs.windowSize(padFudge).height;
 
 
             if (totalPHeight >= avSpace) {
             if (totalPHeight >= avSpace) {
                 overflow = totalPHeight - avSpace;
                 overflow = totalPHeight - avSpace;
@@ -123,12 +124,13 @@
             }
             }
 
 
             if (!_adjustBody(fs.noPxStyle(body, 'height') - overflow)) {
             if (!_adjustBody(fs.noPxStyle(body, 'height') - overflow)) {
-                return;
+                return p.height();
             }
             }
 
 
             if (max && p.height() > max) {
             if (max && p.height() > max) {
                 _adjustBody(fs.noPxStyle(body, 'height') - (p.height() - max));
                 _adjustBody(fs.noPxStyle(body, 'height') - (p.height() - max));
             }
             }
+            return p.height();
         }
         }
 
 
         return {
         return {
@@ -188,8 +190,11 @@
                     w: $window.innerWidth
                     w: $window.innerWidth
                 };
                 };
             }, function () {
             }, function () {
-                summary.adjustHeight(sumFromTop, sumMax);
-                detail.adjustHeight(detail.ypos.current);
+                var h = summary.adjustHeight(sumFromTop, sumMax),
+                    ss = summary.panel().isVisible(),
+                    dtop = h && ss ? sumFromTop + h + padFudge : 0,
+                    dy = dtop || ss ? detail.ypos.current : sumFromTop;
+                detail.adjustHeight(dy);
             }
             }
         );
         );
     }
     }
@@ -431,7 +436,7 @@
 
 
     function augmentDetailPanel() {
     function augmentDetailPanel() {
         var d = detail,
         var d = detail,
-            downPos = sumFromTop + sumMax + 20;
+            downPos = sumFromTop + sumMax + padFudge;
         d.ypos = { up: sumFromTop, down: downPos, current: downPos};
         d.ypos = { up: sumFromTop, down: downPos, current: downPos};
 
 
         d._move = function (y, cb) {
         d._move = function (y, cb) {

@@ -92,7 +92,7 @@ describe('factory: fw/layer/panel.js', function () {
         var p = ps.createPanel('foo');
         var p = ps.createPanel('foo');
         expect(fs.areFunctions(p, [
         expect(fs.areFunctions(p, [
             'show', 'hide', 'toggle', 'empty', 'append',
             'show', 'hide', 'toggle', 'empty', 'append',
-            'width', 'height', 'isVisible', 'classed', 'el'
+            'width', 'height', 'bbox', 'isVisible', 'classed', 'el'
         ])).toBeTruthy();
         ])).toBeTruthy();
     });
     });