Merge pull request #18 from horihiro/bump-0.1.3

Bump to 0.1.3

CREDITS.txt

@@ -1,4 +1,5 @@
 Image: "Codicons"
-Image: Microsoft
+Author: Microsoft
+Web Site: https://github.com/microsoft/vscode-codicons
 License: Creative Commons Attribution 4.0 International License
 License Details: https://creativecommons.org/licenses/by/4.0/

README.md

@@ -32,6 +32,17 @@ If you can try a development version, the following steps are needed.
 
 # Change logs
 
+## [0.1.3](https://github.com/horihiro/TextBlurrer-ChromeExtension/releases/tag/0.1.3)
+
+  - New features
+    - Blur keywords splitted into some elements ([#2](https://github.com/horihiro/TextBlurrer-ChromeExtension/issues/2))
+    - Show blurred value on mouse over blurred area 
+    - Blur value in `input` tag (experimental)  
+      :warning:  this cannot detect change by `value` property and javascript
+  - Bug fixes
+    - Improve performance by change blurring logic
+    - Blur keywords in shadow DOM
+
 ## [0.1.2](https://github.com/horihiro/TextBlurrer-ChromeExtension/releases/tag/0.1.2)
 
   - New features

content/css/blur.css

@@ -1,3 +1,21 @@
 .blurred {
   filter: blur(5px);
+}
+
+.mask {
+  border: none;
+  overflow: hidden;
+}
+
+#__inputClone, .mask, .textLayer {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  border: none;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+#__inputClone {
+  visibility: hidden;
 }

manifest.json

@@ -1,8 +1,8 @@
 {
   "manifest_version": 3,
   "name": "Text Blurrer",
-  "version": "0.1.2",
-  "version_name": "0.1.2",
+  "version": "0.1.3",
+  "version_name": "0.1.3",
   "description": "Blurring sensitive specified text/keyword.",
   "permissions": [
     "storage"
@@ -20,9 +20,6 @@
       ],
       "js": [
         "content/js/main.js"
-      ],
-      "css": [
-        "content/css/blur.css"
       ]
     }
   ]

popup/css/main.css

@@ -139,6 +139,24 @@ input[type="checkbox"]:checked.case-sensitive+span::before {
   background-image: url("../img/case-sensitive.svg");
 }
 
+input[type="checkbox"].show-value+span::before {
+  -webkit-mask: url("../img/comment.svg") no-repeat center center;
+  mask: url("../img/comment.svg") no-repeat center center;
+}
+
+input[type="checkbox"]:checked.show-value+span::before {
+  background-image: url("../img/comment.svg");
+}
+
+input[type="checkbox"].blur-input+span::before {
+  -webkit-mask: url("../img/symbol-string.svg") no-repeat center center;
+  mask: url("../img/symbol-string.svg") no-repeat center center;
+}
+
+input[type="checkbox"]:checked.blur-input+span::before {
+  background-image: url("../img/symbol-string.svg");
+}
+
 #applyButton {
   margin-top: 10px;
   display: flex;

popup/img/ATTRIBUTIONS.txt

@@ -1,4 +1,5 @@
 Image: "Codicons"
-Image: Microsoft
+Author: Microsoft
+Web Site: https://github.com/microsoft/vscode-codicons
 License: Creative Commons Attribution 4.0 International License
 License Details: https://creativecommons.org/licenses/by/4.0/

popup/js/main.js

@@ -1,11 +1,13 @@
 document.addEventListener('DOMContentLoaded', async (e) => {
-  const { status, keywords, mode, matchCase } = (await chrome.storage.local.get(['status', 'keywords', 'mode', 'matchCase']));
+  const { status, keywords, mode, matchCase, showValue, blurInput } = (await chrome.storage.local.get(['status', 'keywords', 'mode', 'matchCase', 'showValue', 'blurInput']));
 
   const applyButton = document.querySelector('#applyButton');
   const patternInput = document.querySelector('#patternInput');
   const statusCheckbox = document.querySelector('#statusCheckbox');
   const caseCheckbox = document.querySelector('#caseCheckbox');
   const regexpCheckbox = document.querySelector('#regexpCheckbox');
+  const showValueCheckbox = document.querySelector('#showValueCheckbox');
+  const blurInputCheckbox = document.querySelector('#blurInputCheckbox');
   const _bufferTextArea = document.querySelector('#_bufferTextArea');
 
   const COLOR_DEFAULT = getComputedStyle(_bufferTextArea).getPropertyValue('background-color');
@@ -21,6 +23,8 @@ document.addEventListener('DOMContentLoaded', async (e) => {
   let savedKeywords = '';
   let savedMatchCase = false;
   let savedMode = false;
+  let savedShowValue = false;
+  let savedBlurInput = false;
   let validationResults = [];
   let pointedRow = -1;
 
@@ -112,7 +116,14 @@ document.addEventListener('DOMContentLoaded', async (e) => {
       applyButton.disabled = false;
     }
     validationResults = await validateLines(lines, !regexpCheckbox.checked);
-    applyButton.disabled = !validationResults.every(r => r.isValid) || (patternInput.value === savedKeywords && caseCheckbox.checked === savedMatchCase && regexpCheckbox.checked === savedMode);
+    applyButton.disabled = !validationResults.every(r => r.isValid) ||
+    (
+      patternInput.value === savedKeywords &&
+      caseCheckbox.checked === savedMatchCase &&
+      showValueCheckbox.checked === savedShowValue &&
+      regexpCheckbox.checked === savedMode && 
+      blurInputCheckbox.checked === savedBlurInput
+    );
     const re = /\*(\d+)( - [\d.]+px\))$/;
     const bgColors = validationResults.reduce((prev, curr, pos, array) => {
       const backgroundColor = curr.isValid ? (!curr.reason ? COLOR_DEFAULT : COLOR_WARNING) : COLOR_ERROR;
@@ -147,17 +158,23 @@ textarea#${patternInput.id} {
       'status': !statusCheckbox.checked ? 'disabled' : '',
       'keywords': patternInput.value,
       'mode': regexpCheckbox.checked ? 'regexp' : 'text',
-      'matchCase': caseCheckbox.checked
+      'matchCase': caseCheckbox.checked,
+      'showValue': showValueCheckbox.checked,
+      'blurInput': blurInputCheckbox.checked,
     });
     patternInput.focus();
     savedKeywords = patternInput.value;
     savedMode = regexpCheckbox.checked;
     savedMatchCase = caseCheckbox.checked;
+    savedShowValue = showValueCheckbox.checked;
+    savedBlurInput = blurInputCheckbox.checked;
     e.target.disabled = true;
   });
 
   statusCheckbox.addEventListener('change', async (e) => {
     caseCheckbox.disabled =
+      showValueCheckbox.disabled =
+      blurInputCheckbox.disabled =
       regexpCheckbox.disabled =
       patternInput.disabled = !e.target.checked;
     applyButton.disabled = !e.target.checked || !validationResults.every(r => r.isValid);
@@ -186,6 +203,16 @@ textarea#${patternInput.id} {
     patternInput.focus();
   });
 
+  showValueCheckbox.addEventListener('change', async (e) => {
+    await renderBackground();
+    patternInput.focus();
+  });
+
+  blurInputCheckbox.addEventListener('change', async (e) => {
+    await renderBackground();
+    patternInput.focus();
+  });
+
   patternInput.addEventListener('scroll', renderBackground);
   patternInput.addEventListener('scroll', () => {
     if (patternInput.scrollLeft < textAreaPaddingLeft) patternInput.scrollLeft = 0;
@@ -215,11 +242,15 @@ textarea#${patternInput.id} {
 
   statusCheckbox.checked = status !== 'disabled';
   savedMatchCase = caseCheckbox.checked = matchCase;
+  savedShowValue = showValueCheckbox.checked = showValue;
+  savedBlurInput = blurInputCheckbox.checked = blurInput;
   savedMode = regexpCheckbox.checked = mode === 'regexp';
   savedKeywords = patternInput.value = keywords || '';
 
 
   caseCheckbox.disabled =
+    blurInputCheckbox.disabled =
+    showValueCheckbox.disabled =
     regexpCheckbox.disabled =
     patternInput.disabled =
     applyButton.disabled = !statusCheckbox.checked;

popup/main.html

@@ -21,6 +21,14 @@
   <div class="settings-conainer">
 
     <div class="checkbox-container">
+      <label>
+        <input type="checkbox" class="custom-checkbox blur-input" id="blurInputCheckbox">
+        <span title="Blue value of `input` tag"></span>
+      </label>
+      <label>
+        <input type="checkbox" class="custom-checkbox show-value" id="showValueCheckbox">
+        <span title="Show value on mouseover"></span>
+      </label>
       <label>
         <input type="checkbox" class="custom-checkbox case-sensitive" id="caseCheckbox">
         <span title="Match case"></span>