From 9170a006ef87aa9f6b997577ba5aba339d527b43 Mon Sep 17 00:00:00 2001
From: Andrew Shu <talklittle@gmail.com>
Date: Sun, 18 Mar 2018 19:59:35 -0700
Subject: [PATCH] rules delta count on Commit button in My rules

---
 src/js/user-rules.js | 7 ++++++-
 src/user-rules.html  | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/js/user-rules.js b/src/js/user-rules.js
index d0c65f2..02a2e31 100644
--- a/src/js/user-rules.js
+++ b/src/js/user-rules.js
@@ -68,7 +68,9 @@ var processUserRules = function(response) {
 
     var permanentList = document.createDocumentFragment(),
         temporaryList = document.createDocumentFragment(),
-        li;
+        li,
+        leftOnlyCount = 0,
+        rightOnlyCount = 0;
 
     rules = Object.keys(allRules).sort(directiveSort);
     for ( i = 0; i < rules.length; i++ ) {
@@ -90,6 +92,7 @@ var processUserRules = function(response) {
             li.textContent = rule;
             li.className = 'notRight toRemove';
             temporaryList.appendChild(li);
+            leftOnlyCount++;
         } else if ( onRight ) {
             li = document.createElement('li');
             li.textContent = '\xA0';
@@ -98,6 +101,7 @@ var processUserRules = function(response) {
             li.textContent = rule;
             li.className = 'notLeft';
             temporaryList.appendChild(li);
+            rightOnlyCount++;
         }
     }
 
@@ -108,6 +112,7 @@ var processUserRules = function(response) {
     uDom('#diff > .right > ul > li').remove();
     document.querySelector('#diff > .right > ul').appendChild(temporaryList);
     uDom('#diff').toggleClass('dirty', response.temporaryRules !== response.permanentRules);
+    uDom('#commitButtonCount').text('(+' + rightOnlyCount + '/-' + leftOnlyCount + ')');
 };
 
 /******************************************************************************/
diff --git a/src/user-rules.html b/src/user-rules.html
index 854a18b..7edf1cb 100644
--- a/src/user-rules.html
+++ b/src/user-rules.html
@@ -26,7 +26,7 @@
     <div class="pane right">
         <div>
             <h2 data-i18n="userRulesTemporaryHeader"></h2>
-            <button type="button" id="commitButton" data-i18n="userRulesCommit"></button>
+            <button type="button" id="commitButton"><span data-i18n="userRulesCommit"></span> <span id="commitButtonCount"></span></button>
             <button type="button" id="editEnterButton" data-i18n="userRulesEdit"></button>
             <button type="button" id="editStopButton" data-i18n="userRulesEditSave"></button>
             <button type="button" id="editCancelButton" data-i18n="userRulesEditDicard"></button>