autohide frame stats when out of pixels

web/skins/classic/views/js/frame.js

@@ -1,4 +1,6 @@
+var table = $j('#frameStatsTable');
 var backBtn = $j('#backBtn');
+var statsBtn = $j('#statsBtn');
 
 function changeScale() {
   var scale = $j('#scale').val();
@@ -32,6 +34,20 @@ function changeScale() {
       anchor.prop('href', anchor.prop('href').replace(/scale=.*&/, 'scale=' + scale + '&'));
     }
   });
+
+  // After a resize, check if we still have room to display the event stats table
+  onStatsResize(newWidth);
+}
+
+function getFrmStatsCookie() {
+  var cookie = 'zmFrameStats';
+  var stats = getCookie(cookie);
+
+  if ( !stats ) {
+    stats = 'on';
+    setCookie(cookie, stats, 10*365);
+  }
+  return stats;
 }
 
 function getStat(params) {
@@ -42,8 +58,20 @@ function getStat(params) {
         $j('#frameStatsTable').empty().append('<tbody>');
         $j.each( statHeaderStrings, function( key ) {
           var th = $j('<th>').addClass('text-right').text(statHeaderStrings[key]);
-          var tdString = ( stat ) ? stat[key] : 'n/a';
-          var td = $j('<td>').text(tdString);
+          var tdString;
+
+          switch (stat ? key : 'n/a') {
+            case 'FrameId':
+              tdString = '<a href="?view=stats&amp;eid=' + params.eid + '&amp;fid=' + params.fid + '">' + stat[key] + '</a>';
+              break;
+            case 'n/a':
+              tdString = 'n/a';
+              break;
+            default:
+              tdString = stat[key];
+          }
+
+          var td = $j('<td>').html(tdString);
           var row = $j('<tr>').append(th, td);
 
           $j('#frameStatsTable tbody').append(row);
@@ -52,6 +80,27 @@ function getStat(params) {
       .fail(logAjaxFail);
 }
 
+function onStatsResize(vidwidth) {
+  var minWidth = 300; // An arbitrary value in pixels used to hide the stats table
+  var width = $j(window).width() - vidwidth;
+
+  // Hide the stats table if we have run out of room to show it properly
+  if ( width < minWidth ) {
+    statsBtn.prop('disabled', true);
+    if ( table.is(':visible') ) {
+      table.toggle(false);
+      wasHidden = true;
+    }
+  // Show the stats table if we hid it previously and sufficient room becomes available
+  } else if ( width >= minWidth ) {
+    statsBtn.prop('disabled', false);
+    if ( !table.is(':visible') && wasHidden ) {
+      table.toggle(true);
+      wasHidden = false;
+    }
+  }
+}
+
 function initPage() {
   if ( scale == '0' || scale == 'auto' ) changeScale();
 
@@ -70,14 +119,29 @@ function initPage() {
     window.location.reload(true);
   });
 
-  // Manage the STATS button
-  document.getElementById("statsBtn").addEventListener("click", function onViewClick(evt) {
+  // Manage the Frame STATISTICS Button
+  document.getElementById("statsBtn").addEventListener("click", function onStatsClick(evt) {
     evt.preventDefault();
-    window.location.href = thisUrl+'?view=stats&eid='+eid+'&fid='+fid;
+    var cookie = 'zmFrameStats';
+
+    // Toggle the visiblity of the stats table and write an appropriate cookie
+    if ( table.is(':visible') ) {
+      setCookie(cookie, 'off', 10*365);
+      table.toggle(false);
+    } else {
+      setCookie(cookie, 'on', 10*365);
+      table.toggle(true);
+    }
   });
 
   // Load the frame stats
   getStat({eid: eid, fid: fid});
+
+  if ( getFrmStatsCookie() != 'on' ) {
+    table.toggle(false);
+  } else {
+    onStatsResize($j('#base_width').val() * scale / SCALE_BASE);
+  }
 }
 
 // Kick everything off

web/skins/classic/views/js/frame.js.php

@@ -14,14 +14,16 @@ var fid = <?php echo $fid ?>;
 var record_event_stats = <?php echo ZM_RECORD_EVENT_STATS ?>;
 var alarmFrame = <?php echo $alarmFrame ?>;
 
-var statHeaderStrings = {};
-statHeaderStrings.ZoneName = "<?php echo translate('Zone') ?>";
-statHeaderStrings.PixelDiff = "<?php echo translate('PixelDiff') ?>";
-statHeaderStrings.AlarmPixels = "<?php echo translate('AlarmPx') ?>";
-statHeaderStrings.FilterPixels = "<?php echo translate('FilterPx') ?>";
-statHeaderStrings.BlobPixels = "<?php echo translate('BlobPx') ?>";
-statHeaderStrings.Blobs = "<?php echo translate('Blobs') ?>";
-statHeaderStrings.BlobSizes = "<?php echo translate('BlobSizes') ?>";
-statHeaderStrings.AlarmLimits = "<?php echo translate('AlarmLimits') ?>";
-statHeaderStrings.Score = "<?php echo translate('Score') ?>";
-
+var statHeaderStrings = {
+    Id: '<?php echo translate('EventId') ?>',
+    FrameId: '<?php echo translate('FrameId') ?>',
+    ZoneName: '<?php echo translate('Zone') ?>',
+    PixelDiff: '<?php echo translate('PixelDiff') ?>',
+    AlarmPixels: '<?php echo translate('AlarmPx') ?>',
+    FilterPixels: '<?php echo translate('FilterPx') ?>',
+    BlobPixels: '<?php echo translate('BlobPx') ?>',
+    Blobs: '<?php echo translate('Blobs') ?>',
+    BlobSizes: '<?php echo translate('BlobSizes') ?>',
+    AlarmLimits: '<?php echo translate('AlarmLimits') ?>',
+    Score: '<?php echo translate('Score') ?>'
+};