check for regex errors & misc ui changes

web-extension/cssEditor.css

@@ -33,10 +33,13 @@
     margin-top: 10px;
     font-size: 15px;
     font-family: "sans-serif";
+    display: flex;
+    justify-content: space-between;
+    width: 90%;
 }
 .cssEditor-field-holder {
     padding: 3px;
-    width: 100%;
+    width: 90%;
 }
 .cssEditor-field-label {
     padding: 0 3px;
@@ -61,16 +64,16 @@
 }
 
 #cssEditor-styleName {
-    width: 90%;
-    min-width: 90%;
+    width: 100%;
+    min-width: 100%;
     padding: 5px;
     border: solid rgba(0, 0, 0, 0.25) 1px;
     font-size: 15px;
     font-family: "sans-serif";
 }
 #cssEditor-matchUrl {
-    width: 90%;
-    min-width: 90%;
+    width: 100%;
+    min-width: 100%;
     padding: 5px;
     border: solid rgba(0, 0, 0, 0.25) 1px;
     font-size: 15px;

web-extension/cssEditor.js

@@ -121,7 +121,11 @@ function showEditor() {
     var urlLabel = document.createElement('label');
     urlLabel.className = 'cssEditor-field-label';
     urlLabel.innerText = 'URL Regex'; // TODO addd link to regex tutorial
+    var regexHelp = document.createElement('a');
+    regexHelp.innerText = 'How to write a regular expression pattern';
+    regexHelp.setAttribute('href', 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions');
     urlLabelHolder.appendChild(urlLabel);
+    urlLabelHolder.appendChild(regexHelp);
     editorHolderLeft.appendChild(urlLabelHolder);
 
     var urlInputHolder = document.createElement('div');
@@ -242,6 +246,11 @@ function showEditor() {
     }
 
     function saveStyle() {
+        var isRegexValid = checkRegex();
+        if (!isRegexValid) {
+            alert("Invalid regular expression");
+            return;
+        }
         var tmpValue = {
             title: document.getElementById('cssEditor-styleName').value,
             url: document.getElementById('cssEditor-matchUrl').value,
@@ -261,6 +270,17 @@ function showEditor() {
         alert('Style saved!');
     }
 
+    function checkRegex() {
+        var regexContent = document.getElementById('cssEditor-matchUrl').value;
+        var isValid = true;
+        try {
+            new RegExp(regexContent);
+        } catch(e) {
+            isValid = false;
+        }
+        return isValid;
+    }
+
     function removeStyle() {
         if (confirm('Are you sure you want to delete this style?') == true) {
             allStyles.splice(currentStyleIndex, 1);
@@ -325,32 +345,6 @@ function showEditor() {
         modal.parentNode.removeChild(modal);
     }
 
-    function removeListItem(atIndex) {
-        return function() {
-            allPagesRef[atIndex].removed = true;
-            var tmpListElem = document.getElementById('li' + atIndex);
-            tmpListElem.style.display = 'none';
-        };
-    }
-
-    function previewListItem(atIndex) {
-        return function() {
-            alert(allPagesRef[atIndex].content.trim().replace(/<[^>]+>/gi, '').replace(/\s+/g, ' ').substring(0, 1000) + ' ...');
-        };
-    }
-
-    function prepareEbook(newChapters) {
-        try {
-            if (newChapters.length === 0) {
-                alert('Can\'t generate an empty eBook!');
-                return;
-            }
-            buildEbookFromChapters();
-        } catch (e) {
-            console.log('Error:', e);
-        }
-    }
-
     function saveChanges() {
         var newChapters = [];
         var newEbookTitle = ebookTilte.value;

web-extension/menu.html

@@ -37,6 +37,9 @@
             cursor: pointer;
         }
 
+        label {
+            font-size: 13px;
+        }
         #busy {
             background-color: rgba(0, 0, 0, 0.75);
             width: 100%;

web-extension/menu.js

@@ -32,9 +32,14 @@ function createStyleList(styles) {
 
             currentUrl = currentUrl.replace(/(http[s]?:\/\/|www\.)/i, '').toLowerCase();
             var styleUrl = styles[i].url;
-            var styleUrlRegex = new RegExp('.*' + styleUrl + '.*', 'i');
+            var styleUrlRegex = null;
 
-            if (styleUrlRegex.test(currentUrl)) {
+            try {
+                styleUrlRegex =  new RegExp('.*' + styleUrl + '.*', 'i');
+            } catch (e) {
+            }
+
+            if (styleUrlRegex && styleUrlRegex.test(currentUrl)) {
                 allMatchingStyles.push({
                     index: i,
                     length: styleUrl.length