From e3e022b0f4382fa3c349507dfc8553ac96cba5db Mon Sep 17 00:00:00 2001
From: dgtlmoon <dgtlmoon@gmail.com>
Date: Wed, 25 May 2022 10:23:43 +0200
Subject: [PATCH] VisualSelector - Better handling of filter targets that are
 no longer available in the HTML

---
 changedetectionio/content_fetcher.py          | 29 +++++++++++++------
 .../static/js/visual-selector.js              |  2 +-
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/changedetectionio/content_fetcher.py b/changedetectionio/content_fetcher.py
index 2ac7b636..194b3e06 100644
--- a/changedetectionio/content_fetcher.py
+++ b/changedetectionio/content_fetcher.py
@@ -1,5 +1,6 @@
 from abc import ABC, abstractmethod
 import chardet
+import json
 import os
 import requests
 import time
@@ -123,13 +124,23 @@ class Fetcher():
                 // inject the current one set in the css_filter, which may be a CSS rule
                 // used for displaying the current one in VisualSelector, where its not one we generated.
                 if (css_filter.length) {
-                   // is it xpath?
-                   if (css_filter.startsWith('/') ) {
-                     q=document.evaluate(css_filter, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
-                   } else {
-                     q=document.querySelector(css_filter);
+                   q=false;                   
+                   try {
+                       // is it xpath?
+                       if (css_filter.startsWith('/') || css_filter.startsWith('xpath:')) {
+                         q=document.evaluate(css_filter.replace('xpath:',''), document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
+                       } else {
+                         q=document.querySelector(css_filter);
+                       }                       
+                   } catch (e) {
+                    // Maybe catch DOMException and alert? 
+                     console.log(e);                       
                    }
-                   bbox = q.getBoundingClientRect();                
+                   bbox=false;
+                   if(q) {
+                     bbox = q.getBoundingClientRect();
+                   }
+                                   
                    if (bbox && bbox['width'] >0 && bbox['height']>0) {                       
                        size_pos.push({
                            xpath: css_filter,
@@ -141,8 +152,8 @@ class Fetcher():
                          });
                      }
                 }
-// https://stackoverflow.com/questions/1145850/how-to-get-height-of-entire-document-with-javascript
-                return {'size_pos':size_pos, 'browser_width': window.innerWidth, 'browser_height':document.body.scrollHeight};
+                // Window.width required for proper scaling in the frontend
+                return {'size_pos':size_pos, 'browser_width': window.innerWidth};
     """
     xpath_data = None
 
@@ -297,7 +308,7 @@ class base_html_playwright(Fetcher):
             self.headers = response.all_headers()
 
             if current_css_filter is not None:
-                page.evaluate("var css_filter='{}'".format(current_css_filter))
+                page.evaluate("var css_filter={}".format(json.dumps(current_css_filter)))
             else:
                 page.evaluate("var css_filter=''")
 
diff --git a/changedetectionio/static/js/visual-selector.js b/changedetectionio/static/js/visual-selector.js
index e6fa9091..79181b3d 100644
--- a/changedetectionio/static/js/visual-selector.js
+++ b/changedetectionio/static/js/visual-selector.js
@@ -138,7 +138,7 @@ $(document).ready(function() {
             }
           }
         if(!found) {
-          alert("unfortunately your existing CSS/xPath Filter was no longer found!");
+          alert("Unfortunately your existing CSS/xPath Filter was no longer found!");
         }
       }