GUI -- Strange Device View Table layout fixed in Safari.

(cherry-picks from master 55ee09b1)

Change-Id: Icfb3d80654a2ab009ca12b64f35a20ba98f37681

@@ -122,6 +122,28 @@
         return patt.test(ua);
     }
 
+    // Returns true if the current browser determined to be Chrome
+    function isChrome() {
+        var isChromium = $window.chrome,
+            vendorName = $window.navigator.vendor,
+            isOpera = $window.navigator.userAgent.indexOf("OPR") > -1;
+        return (isChromium !== null &&
+        isChromium !== undefined &&
+        vendorName === "Google Inc." &&
+        isOpera == false);
+    }
+
+    // Returns true if the current browser determined to be Safari
+    function isSafari() {
+        return ($window.navigator.userAgent.indexOf('Safari') !== -1 &&
+        $window.navigator.userAgent.indexOf('Chrome') === -1);
+    }
+
+    // Returns true if the current browser determined to be Firefox
+    function isFirefox() {
+        return typeof InstallTrigger !== 'undefined';
+    }
+
     // search through an array of objects, looking for the one with the
     // tagged property matching the given key. tag defaults to 'id'.
     // returns the index of the matching object, or -1 for no match.
@@ -222,6 +244,9 @@
                 areFunctionsNonStrict: areFunctionsNonStrict,
                 windowSize: windowSize,
                 isMobile: isMobile,
+                isChrome: isChrome,
+                isSafari: isSafari,
+                isFirefox: isFirefox,
                 debugOn: debugOn,
                 find: find,
                 inArray: inArray,

@@ -267,33 +267,46 @@
             $log.log('OvDeviceCtrl has been created');
         }])
 
-        .directive('deviceDetailsPanel', ['$rootScope', '$window',
-        function ($rootScope, $window) {
-            return function (scope) {
-
-                function heightCalc() {
-                    pStartY = fs.noPxStyle(d3.select('.tabular-header'), 'height')
-                                            + mast.mastHeight() + topPdg;
-                    wSize = fs.windowSize(pStartY);
-                    pHeight = wSize.height;
-                }
-                heightCalc();
+    .directive('deviceDetailsPanel', ['$rootScope', '$window', '$timeout',
+    function ($rootScope, $window, $timeout) {
+        return function (scope) {
+            var unbindWatch;
+
+            function heightCalc() {
+                pStartY = fs.noPxStyle(d3.select('.tabular-header'), 'height')
+                                        + mast.mastHeight() + topPdg;
+                wSize = fs.windowSize(pStartY);
+                pHeight = wSize.height;
+            }
 
+            function initPanel() {
+                heightCalc();
                 createDetailsPane();
+            }
 
-                scope.$watch('panelData', function () {
-                    if (!fs.isEmptyObject(scope.panelData)) {
-                        populateDetails(scope.panelData);
-                        detailsPanel.show();
-                    }
-                });
+            // Safari has a bug where it renders the fixed-layout table wrong
+            // if you ask for the window's size too early
+            if (scope.onos.browser === 'safari') {
+                $timeout(initPanel);
+            } else {
+                initPanel();
+            }
+
+            // if the panelData changes
+            scope.$watch('panelData', function () {
+                if (!fs.isEmptyObject(scope.panelData)) {
+                    populateDetails(scope.panelData);
+                    detailsPanel.show();
+                }
+            });
 
-                $rootScope.$watchCollection(
+            // if the window size changes
+            unbindWatch = $rootScope.$watchCollection(
                     function () {
                         return {
                             h: $window.innerHeight,
                             w: $window.innerWidth
-                        }
+                        };
                     }, function () {
                         if (!fs.isEmptyObject(scope.panelData)) {
                             heightCalc();
@@ -303,6 +316,7 @@
                 );
 
                 scope.$on('$destroy', function () {
+                    unbindWatch();
                     ps.destroyPanel(pName);
                 });
             };

@@ -143,7 +143,7 @@
 
 </head>
 <body class="light" ng-app="onosApp">
-<div id="frame" ng-controller="OnosCtrl as onosCtrl">
+<div id="frame" ng-controller="OnosCtrl as onosCtrl" detect-browser>
     <div id="mast"
          ng-controller="MastCtrl as mastCtrl"
          ng-include="'app/fw/mast/mast.html'"></div>

@@ -69,12 +69,12 @@
     angular.module('onosApp', moduleDependencies)
 
         .controller('OnosCtrl', [
-            '$log', '$route', '$routeParams', '$location',
+            '$log', '$scope', '$route', '$routeParams', '$location',
             'KeyService', 'ThemeService', 'GlyphService', 'VeilService',
             'PanelService', 'FlashService', 'QuickHelpService',
             'WebSocketService',
 
-            function ($log, $route, $routeParams, $location,
+            function ($log, $scope, $route, $routeParams, $location,
                       ks, ts, gs, vs, ps, flash, qhs, wss) {
                 var self = this;
 
@@ -83,6 +83,9 @@
                 self.$location = $location;
                 self.version = '1.2.0';
 
+                // shared object inherited by all views:
+                $scope.onos = {};
+
                 // initialize services...
                 ts.init();
                 ks.installOn(d3.select('body'));
@@ -131,5 +134,29 @@
                     });
                 }
             });
+        }])
+
+        .directive('detectBrowser', ['$log', 'FnService',
+            function ($log, fs) {
+                return function (scope) {
+                    var body = d3.select('body'),
+                        browser = '';
+                    if (fs.isChrome()) {
+                        browser = 'chrome';
+                    } else if (fs.isSafari()) {
+                        browser = 'safari';
+                    } else if (fs.isFirefox()) {
+                        browser = 'firefox';
+                    }
+                    body.classed(browser, true);
+                    scope.onos.browser = browser;
+
+                    if (fs.isMobile()) {
+                        body.classed('mobile', true);
+                        scope.onos.mobile = true;
+                    }
+
+                    $log.debug('Detected browser is', fs.cap(browser));
+                };
         }]);
 }());