Fix fit width on Opera. Make browser engine available as a body class for userstylers.

4chan_x.user.js

@@ -221,7 +221,7 @@
 
   DAY = 24 * HOUR;
 
-  engine = /WebKit|Presto|Gecko/.exec(navigator.userAgent)[0];
+  engine = /WebKit|Presto|Gecko/.exec(navigator.userAgent)[0].toLowerCase();
 
   d = document;
 
@@ -2684,7 +2684,7 @@
       l = unread.replies.length;
       favicon = $('link[rel="shortcut icon"]', d.head);
       favicon.href = g.dead ? l ? Favicon.unreadDead : Favicon.dead : l ? Favicon.unread : Favicon["default"];
-      if (engine === "Gecko") {
+      if (engine === "gecko") {
         clone = favicon.cloneNode(true);
         return $.replace(favicon, clone);
       }
@@ -2811,7 +2811,7 @@
         }
       },
       typeChange: function() {
-        var form, klass;
+        var klass;
         switch (this.value) {
           case 'full':
             klass = '';
@@ -2825,9 +2825,8 @@
           case 'fit screen':
             klass = 'fitwidth fitheight';
         }
-        form = $('body > form');
-        form.className = klass;
-        if (/\bfitheight\b/.test(form.className)) {
+        $('body > form').className = klass;
+        if (/\bfitheight\b/.test(klass)) {
           $.on(window, 'resize', imgExpand.resize);
           if (!imgExpand.style) imgExpand.style = $.addStyle('');
           return imgExpand.resize();
@@ -2855,10 +2854,10 @@
       img = $.el('img', {
         src: a.href
       });
-      if (engine === "Gecko" && a.parentNode.className !== 'op') {
+      if (engine === "gecko" && a.parentNode.className !== 'op') {
         filesize = $('.filesize', a.parentNode);
         _ref = filesize.textContent.match(/(\d+)x/), _ = _ref[0], max = _ref[1];
-        img.style.maxWidth = "-moz-calc(" + max + "px)";
+        img.style.maxWidth = "" + max + "px";
       }
       $.on(img, 'error', imgExpand.error);
       thumb.hidden = true;
@@ -2977,6 +2976,7 @@
         return;
       }
       if (!$('#navtopr')) return;
+      $.addClass(d.body, engine);
       $.addStyle(Main.css);
       threading.init();
       Favicon.init();
@@ -3103,7 +3103,10 @@
       }\
       .fitwidth [md5] + img {\
         max-width: 100%;\
-        width: -moz-calc(100%); /* hack so only firefox sees this */\
+      }\
+      .gecko  > .fitwidth [md5] + img,\
+      .presto > .fitwidth [md5] + img {\
+        width: 100%;\
       }\
 \
       #qp, #iHover {\

changelog

@@ -1,6 +1,8 @@
 master
 - mayhem
   fix locked thread icons with fit width/screen enabled on Firefox
+  fix fit width on Opera
+  for userstylers: you can use the rendering engine body class
 
 2.21.2
 - mayhem

script.coffee

@@ -127,7 +127,7 @@ SECOND = 1000
 MINUTE = 60*SECOND
 HOUR   = 60*MINUTE
 DAY    = 24*HOUR
-engine = /WebKit|Presto|Gecko/.exec(navigator.userAgent)[0]
+engine = /WebKit|Presto|Gecko/.exec(navigator.userAgent)[0].toLowerCase()
 d = document
 g = callbacks: []
 
@@ -2090,7 +2090,7 @@ Favicon =
           Favicon.default
 
     #XXX `favicon.href = href` doesn't work on Firefox
-    if engine is "Gecko"
+    if engine is "gecko"
       clone = favicon.cloneNode true
       $.replace favicon, clone
 
@@ -2163,9 +2163,8 @@ imgExpand =
           klass = 'fitheight'
         when 'fit screen'
           klass = 'fitwidth fitheight'
-      form = $('body > form')
-      form.className = klass
-      if /\bfitheight\b/.test form.className
+      $('body > form').className = klass
+      if /\bfitheight\b/.test klass
         $.on window, 'resize', imgExpand.resize
         unless imgExpand.style
           imgExpand.style = $.addStyle ''
@@ -2188,10 +2187,10 @@ imgExpand =
     a = thumb.parentNode
     img = $.el 'img',
       src: a.href
-    if engine is "Gecko" and a.parentNode.className isnt 'op'
+    if engine is "gecko" and a.parentNode.className isnt 'op'
       filesize = $ '.filesize', a.parentNode
       [_, max] = filesize.textContent.match /(\d+)x/
-      img.style.maxWidth = "-moz-calc(#{max}px)"
+      img.style.maxWidth = "#{max}px"
     $.on img, 'error', imgExpand.error
     thumb.hidden = true
     $.add a, img
@@ -2327,6 +2326,7 @@ Main =
       return
     if not $ '#navtopr'
       return
+    $.addClass d.body, engine
     $.addStyle Main.css
     threading.init()
     Favicon.init()
@@ -2468,7 +2468,10 @@ Main =
       }
       .fitwidth [md5] + img {
         max-width: 100%;
-        width: -moz-calc(100%); /* hack so only firefox sees this */
+      }
+      .gecko  > .fitwidth [md5] + img,
+      .presto > .fitwidth [md5] + img {
+        width: 100%;
       }
 
       #qp, #iHover {