From ce1f430edaa2f3e970b1e545d764899ef0ad08db Mon Sep 17 00:00:00 2001
From: Jeffrey Vest <jeffrey.vest@gmail.com>
Date: Fri, 7 Feb 2020 09:54:37 -0500
Subject: [PATCH] Added ability to hide the size

---
 css/settings.css | 4 ++++
 js/background.js | 3 ++-
 js/content.js    | 5 +++++
 js/settings.js   | 6 ++++++
 settings.html    | 5 +++++
 5 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/css/settings.css b/css/settings.css
index 9c2ea63..0e93f09 100644
--- a/css/settings.css
+++ b/css/settings.css
@@ -83,6 +83,10 @@ select {
   background-repeat: no-repeat;
 }
 
+input[type='checkbox'] {
+  -webkit-appearance: checkbox
+}
+
 select:hover:enabled,
 input[type='checkbox']:hover:enabled,
 input[type='radio']:hover:enabled,
diff --git a/js/background.js b/js/background.js
index 2db9afb..e8840af 100644
--- a/js/background.js
+++ b/js/background.js
@@ -27,7 +27,8 @@ var ReticleBg = {
             overlayOpacity: isNaN(parseFloat(localStorage.getItem('overlayOpacity'))) ? 0.4 : parseFloat(localStorage.getItem('overlayOpacity')),
             primaryHex: localStorage.getItem('primaryHex') || '#000000',
             altHex: localStorage.getItem('altHex') || '#C4E2FA',
-            overlayBg: localStorage.getItem('overlayBg') || 'primary'
+            overlayBg: localStorage.getItem('overlayBg') || 'primary',
+            hideSize: (localStorage.getItem('hideSize') === 'true') || false
         };
     },
 
diff --git a/js/content.js b/js/content.js
index 7b74428..dcc5143 100644
--- a/js/content.js
+++ b/js/content.js
@@ -130,6 +130,10 @@ window.__Reticle = {
     },
 
     updateInfoText: function() {
+        if (this.hideSize) {
+            this.els.info.style.display = 'none';
+            return;
+        }
         this.els.info.style.display = (this.overlayW > 0 && this.overlayH > 0) ? 'block' : 'none';
         this.els.info.textContent = this.overlayW + ' x ' + this.overlayH;
         this.els.info.style.marginLeft = '-' + (this.els.info.clientWidth / 2) + 'px';
@@ -226,6 +230,7 @@ window.__Reticle = {
         this.primaryRgb = this.hexToRgb(settings.primaryHex);
         this.altRgb = this.hexToRgb(settings.altHex);
         this.overlayBg = settings.overlayBg;
+        this.hideSize = settings.hideSize;
         this.updateOverlayBgCss();
     },
 
diff --git a/js/settings.js b/js/settings.js
index a742d6e..313d5d2 100644
--- a/js/settings.js
+++ b/js/settings.js
@@ -8,11 +8,13 @@ var ReticleSettings = {
         me.opacityInput = document.getElementById('overlay-opacity');
         me.primHexInput = document.getElementById('primary-hex');
         me.altHexInput = document.getElementById('alt-hex');
+        me.hideSizeInput = document.getElementById('hide-size');
 
         chrome.runtime.sendMessage({action: 'load-settings'}, function(response) {
             me.opacityInput.value = response.settings.overlayOpacity.toFixed(1);
             me.primHexInput.value = response.settings.primaryHex;
             me.altHexInput.value = response.settings.altHex;
+            me.hideSizeInput.checked = response.settings.hideSize;
         });
 
         me.opacityInput.addEventListener('change', function(e) {
@@ -35,6 +37,10 @@ var ReticleSettings = {
             me.save({altHex: me.altHexInput.value});
         });
 
+        me.hideSizeInput.addEventListener('change', function(e) {
+            me.save({hideSize: me.hideSizeInput.checked});
+        });
+
         for(var i=0; i < me.tabList.childNodes.length; i++) {
             if(me.tabList.childNodes[i].tagName === 'LI') {
                 me.tabList.childNodes[i].addEventListener('click', function(e) {
diff --git a/settings.html b/settings.html
index cd3a493..97b577a 100644
--- a/settings.html
+++ b/settings.html
@@ -41,6 +41,11 @@ <h3>Overlay opacity</h3>
                         <option value="1.0">100%</option>
                     </select>
                 </section>
+                <section>
+                    <h3>Hide size</h3>
+                    <label for="hide-size" class="settings-row">For hiding the size label if you only wish to use this extension for highlighting content.</label>
+                    <input type="checkbox" id="hide-size" />
+                </section>
             </div>
             <div class="tab-content" id="tab-content-help">
                 <h2 class="content-heading">Shortcuts</h2>