fix scaling

changedetectionio/content_fetcher.py

@@ -236,8 +236,9 @@ class base_html_playwright(Fetcher):
                 proxy=self.proxy
             )
             page = context.new_page()
-            page.set_viewport_size({"width": 1280, "height": 1024})
             response = page.goto(url, timeout=timeout * 1000)
+            # set size after visiting page, otherwise it wont work (seems to default to 800x)
+            page.set_viewport_size({"width": 1280, "height": 1024})
 
             extra_wait = int(os.getenv("WEBDRIVER_DELAY_BEFORE_CONTENT_READY", 5))
             page.wait_for_timeout(extra_wait * 1000)
@@ -258,7 +259,7 @@ class base_html_playwright(Fetcher):
             # Some bug where it gives the wrong screenshot size, but making a request with the clip set first seems to solve it
             # JPEG is better here because the screenshots can be very very large
             page.screenshot(type='jpeg', clip={'x': 1.0, 'y': 1.0, 'width': 1280, 'height': 1024})
-            self.screenshot = page.screenshot(type='jpeg', full_page=True, quality=90)
+            self.screenshot = page.screenshot(type='jpeg', full_page=True, quality=92)
             context.close()
             browser.close()
 

changedetectionio/static/js/visual-selector.js

@@ -27,6 +27,7 @@ function fetch_data() {
   }).done(function (data) {
     $('.fetching-update-notice').html("Rendering..");
     selector_data = data;
+    set_scale();
     reflow_selector();
     $('.fetching-update-notice').fadeOut();
   });
@@ -42,14 +43,17 @@ $(window).resize(function() {
     set_scale();
 });
 
-
 $('#visualselector-tab').bind('click', function (e) {
   set_scale();
   reflow_selector();
 });
 
 
+
 function set_scale() {
+
+  // some things to check if the scaling doesnt work
+  // - that the widths/sizes really are about the actual screen size cat elements.json |grep -o width......|sort|uniq
   selector_image_rect = selector_image.getBoundingClientRect();
   // make the canvas the same size as the image
   $('#selector-canvas').attr('height', selector_image_rect.height);
@@ -59,10 +63,6 @@ function set_scale() {
 
   ctx.strokeStyle = 'rgb(255,0,0, 0.8)';
   ctx.lineWidth = 2;
-  vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
-
-  $("#selector-wrapper").css('height', vh-250);
-  $("#selector-current-xpath").css('max-width', selector_image_rect.width);
 
 }