better incremental rendering of the matrix

src/js/matrix.js

@@ -207,6 +207,7 @@ Matrix.prototype.reset = function() {
     this.switches = {};
     this.rules = {};
     this.rootValue = Matrix.GreenIndirect;
+    this.modifiedTime = 0;
 };
 
 /******************************************************************************/
@@ -248,6 +249,7 @@ Matrix.prototype.assign = function(other) {
         }
         this.switches[k] = other.switches[k];
     }
+    this.modifiedTime = other.modifiedTime;
     return this;
 };
 
@@ -273,6 +275,7 @@ Matrix.prototype.setSwitch = function(switchName, srcHostname, newVal) {
     } else {
         this.switches[srcHostname] = bits;
     }
+    this.modifiedTime = Date.now();
     return true;
 };
 
@@ -294,6 +297,7 @@ Matrix.prototype.setCell = function(srcHostname, desHostname, type, state) {
     } else {
         this.rules[k] = newBitmap;
     }
+    this.modifiedTime = Date.now();
     return true;
 };
 
@@ -535,6 +539,7 @@ Matrix.prototype.setSwitchZ = function(switchName, srcHostname, newState) {
     } else {
         this.switches[srcHostname] = bits;
     }
+    this.modifiedTime = Date.now();
     state = this.evaluateSwitchZ(switchName, srcHostname);
     if ( state === newState ) {
         return true;
@@ -819,6 +824,8 @@ Matrix.prototype.fromString = function(text, append) {
     if ( !append ) {
         this.assign(matrix);
     }
+
+    this.modifiedTime = Date.now();
 };
 
 /******************************************************************************/
@@ -836,6 +843,7 @@ Matrix.prototype.toSelfie = function() {
 Matrix.prototype.fromSelfie = function(selfie) {
     this.switches = selfie.switches;
     this.rules = selfie.rules;
+    this.modifiedTime = Date.now();
 };
 
 /******************************************************************************/

src/js/messaging.js

@@ -146,6 +146,10 @@ var matrixSnapshot = function(pageStore, details) {
         domain: pageStore.pageDomain,
         headers: µm.Matrix.getColumnHeaders(),
         hostname: pageStore.pageHostname,
+        mtxColorModified: µm.tMatrix.modifiedTime !== details.mtxColorModifiedTime,
+        mtxContentModified: pageStore.mtxContentModifiedTime !== details.mtxContentModifiedTime,
+        mtxCountModified: pageStore.mtxCountModifiedTime !== details.mtxCountModifiedTime,
+        mtxColorModifiedTime: µm.tMatrix.modifiedTime,
         mtxContentModifiedTime: pageStore.mtxContentModifiedTime,
         mtxCountModifiedTime: pageStore.mtxCountModifiedTime,
         pSwitches: {},
@@ -260,6 +264,7 @@ var matrixSnapshotFromTabId = function(details, callback) {
 
         // First verify whether we must return data or not.
         if (
+            µm.tMatrix.modifiedTime === details.mtxColorModifiedTime &&
             pageStore.mtxContentModifiedTime === details.mtxContentModifiedTime &&
             pageStore.mtxCountModifiedTime === details.mtxCountModifiedTime
         ) {

src/js/popup.js

@@ -87,13 +87,28 @@ function setUserSetting(setting, value) {
 
 /******************************************************************************/
 
-function updateMatrixSnapshot() {
+var matrixSnapshotChanged = function() {
-    var snapshotReady = function() {
+    if ( typeof matrixSnapshot !== 'object' ) {
+        return;
+    }
+    if ( matrixSnapshot.mtxContentModified ) {
+        makeMenu();
+        return;
+    }
+    if ( matrixSnapshot.mtxCountModified ) {
+        updateMatrixCounts();
+    }
+    if ( matrixSnapshot.mtxColorModified ) {
         updateMatrixColors();
         updateMatrixBehavior();
         updateMatrixButtons();
-    };
+    }
-    matrixSnapshotPoller.mustFetch(snapshotReady);
+};
+
+/******************************************************************************/
+
+function updateMatrixSnapshot() {
+    matrixSnapshotPoller.pollNow(matrixSnapshotChanged);
 }
 
 /******************************************************************************/
@@ -316,6 +331,35 @@ function toggleSpecificCollapseState(uelem) {
 
 /******************************************************************************/
 
+// Update count value of matrix cells(s)
+
+function updateMatrixCounts() {
+    var matCells = uDom('.matrix .matRow.rw > .matCell');
+    var i = matCells.length;
+    var matRow, matCell, count, counts;
+    var headers = matrixSnapshot.headers;
+    var rows = matrixSnapshot.rows;
+    while ( i-- ) {
+        matCell = matCells.nodeAt(i);
+        if ( matCell.hostname === '*' ) {
+            continue;
+        }
+        if ( matCell.reqType === '*' ) {
+            continue;
+        }
+        matRow = matCell.parentNode;
+        counts = matRow.classList.contains('meta') ? 'totals' : 'counts';
+        count = rows[matCell.hostname][counts][headers[matCell.reqType]];
+        if ( count === matCell.count) {
+            continue;
+        }
+        matCell.count = count;
+        matCell.textContent = count ? count : '\u00A0';
+    }
+}
+
+/******************************************************************************/
+
 // Update color of matrix cells(s)
 // Color changes when rules change
 
@@ -1169,38 +1213,45 @@ var matrixSnapshotPoller = (function() {
         timer = null;
         if ( typeof response === 'object' ) {
             matrixSnapshot = response;
-            makeMenu();
+            matrixSnapshotChanged();
         }
-        pollSnapshotAsync();
     };
 
-    var pollSnapshot = function() {
+    var pollNow = function(callback) {
-        timer = null;
+        unpollAsync();
+        var onPolled = function(response) {
+            callback(response);
+            pollAsync();
+        };
         messager.send({
             what: 'matrixSnapshot',
             tabId: matrixSnapshot.tabId,
+            mtxColorModifiedTime: matrixSnapshot.mtxColorModifiedTime,
             mtxContentModifiedTime: matrixSnapshot.mtxContentModifiedTime,
             mtxCountModifiedTime: matrixSnapshot.mtxCountModifiedTime
-        }, snapshotPolled);
+        }, onPolled);
     };
 
-    var pollSnapshotAsync = function() {
+    var poll = function() {
+        timer = null;
+        pollNow(snapshotPolled);
+    };
+
+    var pollAsync = function() {
         if ( timer !== null ) {
             return;
         }
-        timer = setTimeout(pollSnapshot, 1414);
+        timer = setTimeout(poll, 1414);
     };
 
-    var cancelSnapshotAsync = function() {
+    var unpollAsync = function() {
         if ( timer !== null ) {
             clearTimeout(timer);
             timer = null;
         }
     };
 
-    var mustFetch = function(callback) {
+    (function() {
-        cancelSnapshotAsync();
-
         var tabId = matrixSnapshot.tabId;
 
         // If no tab id yet, see if there is one specified in our URL
@@ -1215,68 +1266,60 @@ var matrixSnapshotPoller = (function() {
             if ( typeof response === 'object' ) {
                 matrixSnapshot = response;
             }
-            callback();
+            onMatrixSnapshotReady();
-            pollSnapshotAsync();
+            pollAsync();
         };
 
         messager.send({
             what: 'matrixSnapshot',
             tabId: tabId
         }, snapshotFetched);
-    };
+    })();
 
-    return {
+    return pollNow;
-        mustFetch: mustFetch
-    };
 })();
 
 /******************************************************************************/
 
-// Make menu only when popup html is fully loaded
+// Below is UI stuff which is not key to make the menu, so this can
+// be done without having to wait for a tab to be bound to the menu.
 
-uDom.onLoad(function() {
+// We reuse for all cells the one and only cell hotspots.
-    matrixSnapshotPoller.mustFetch(onMatrixSnapshotReady);
+uDom('#whitelist').on('click', function() {
-
+        handleWhitelistFilter(uDom(this));
-    // Below is UI stuff which is not key to make the menu, so this can
+        return false;
-    // be done without having to wait for a tab to be bound to the menu.
-
-    // We reuse for all cells the one and only cell hotspots.
-    uDom('#whitelist').on('click', function() {
-            handleWhitelistFilter(uDom(this));
-            return false;
-        });
-    uDom('#blacklist').on('click', function() {
-            handleBlacklistFilter(uDom(this));
-            return false;
-        });
-    uDom('#domainOnly').on('click', function() {
-            toggleCollapseState(uDom(this));
-            return false;
-        });
-    matrixCellHotspots = uDom('#cellHotspots').detach();
-    uDom('body')
-        .on('mouseenter', '.matCell', mouseenterMatrixCellHandler)
-        .on('mouseleave', '.matCell', mouseleaveMatrixCellHandler);
-    uDom('#scopeKeyGlobal').on('click', selectGlobalScope);
-    uDom('#scopeKeyDomain').on('click', selectDomainScope);
-    uDom('#scopeKeySite').on('click', selectSiteScope);
-    uDom('[id^="mtxSwitch_"]').on('click', toggleMatrixSwitch);
-    uDom('#buttonPersist').on('click', persistMatrix);
-    uDom('#buttonRevertScope').on('click', revertMatrix);
-
-    uDom('#buttonRevertAll').on('click', revertAll);
-    uDom('#buttonReload').on('click', buttonReloadHandler);
-    uDom('.extensionURL').on('click', gotoExtensionURL);
-
-    uDom('body').on('click', '.dropdown-menu-button', dropDownMenuShow);
-    uDom('body').on('click', '.dropdown-menu-capture', dropDownMenuHide);
-
-    uDom('#matList').on('click', '.g4Meta', function() {
-        var collapsed = uDom(this)
-            .toggleClass('g4Collapsed')
-            .hasClass('g4Collapsed');
-        setUserSetting('popupHideBlacklisted', collapsed);
     });
+uDom('#blacklist').on('click', function() {
+        handleBlacklistFilter(uDom(this));
+        return false;
+    });
+uDom('#domainOnly').on('click', function() {
+        toggleCollapseState(uDom(this));
+        return false;
+    });
+matrixCellHotspots = uDom('#cellHotspots').detach();
+uDom('body')
+    .on('mouseenter', '.matCell', mouseenterMatrixCellHandler)
+    .on('mouseleave', '.matCell', mouseleaveMatrixCellHandler);
+uDom('#scopeKeyGlobal').on('click', selectGlobalScope);
+uDom('#scopeKeyDomain').on('click', selectDomainScope);
+uDom('#scopeKeySite').on('click', selectSiteScope);
+uDom('[id^="mtxSwitch_"]').on('click', toggleMatrixSwitch);
+uDom('#buttonPersist').on('click', persistMatrix);
+uDom('#buttonRevertScope').on('click', revertMatrix);
+
+uDom('#buttonRevertAll').on('click', revertAll);
+uDom('#buttonReload').on('click', buttonReloadHandler);
+uDom('.extensionURL').on('click', gotoExtensionURL);
+
+uDom('body').on('click', '.dropdown-menu-button', dropDownMenuShow);
+uDom('body').on('click', '.dropdown-menu-capture', dropDownMenuHide);
+
+uDom('#matList').on('click', '.g4Meta', function() {
+    var collapsed = uDom(this)
+        .toggleClass('g4Collapsed')
+        .hasClass('g4Collapsed');
+    setUserSetting('popupHideBlacklisted', collapsed);
 });
 
 /******************************************************************************/