Add a bunch of CSS tweaks to improve visual diff results

1. arwiki needs an extra rule on its Mediawiki:Common.css file.
   For now, we emulate it by adding another custom css rule to
   parsoid.custom_styles.yaml file.

2. Ensure that the additional style sheets loaded in differ.js
   apply the lang attribute to ensure we get the right ltr/rtl
   styles loaded.

3. Add an additional vector style sheet in the parsoid-vs-core
   config file. (parsoid.php.diffsettings.js). The comment in
   the file is self-explanatory.

Change-Id: I593c3a1bdaa139a4acd4f52429f64d7709f7bf2c

bin/examples/parsoid.php.diffsettings.js

@@ -13,7 +13,7 @@ module.exports = {
     // on the commandline
     server: 'https://',
     computeURL: function(server, wiki, title) {
-	  const url = server + Util.getWikiDomain(wiki) + '/wiki/' + encodeURIComponent(title) + "?useskin=vector";
+	  const url = server + Util.getWikiDomain(wiki) + '/wiki/' + encodeURIComponent(title) + "?useskin=vector&useskinversion=1";
       // console.log("LURL: " + url);
       return url;
     },
@@ -28,7 +28,10 @@ module.exports = {
     injectJQuery: true,
     server: 'https://',
 	additionalStyleTags: [
-		'/w/load.php?modules=skins.vector.styles.legacy&only=styles&skin=vector'
+		'/w/load.php?modules=skins.vector.styles.legacy&only=styles&skin=vector&useskinversion=1',
+		// This duplicates what has already been loaded via Parsoid, but this stylesheet
+		// should come after the legacy vector styles above for the right styles to be applied!
+		'/w/load.php?modules=site.styles&only=styles&skin=vector'
 	],
     computeURL: function(server, wiki, title) {
 	  const url = server + Util.getWikiDomain(wiki) + '/api/rest_v1/page/html/' + encodeURIComponent(title);

lib/differ.js

@@ -60,17 +60,17 @@ class VisualDiffer {
 			window.postprocessDOM = function() {};
 			window.dumpHTML = function() { return ''; };
 		})
+		if (htmlOpts.additionalStyleTags) {
+			await Promise.all(htmlOpts.additionalStyleTags.map(function(s) {
+				return page.addStyleTag({ url: s + "&lang=" + opts.wiki.replace(/wik[it].*$/, '') });
+			}));
+		}
 		if (htmlOpts.injectJQuery) {
 			await page.addScriptTag({ path: opts.scriptDir +'/jquery.js', type: 'text/javascript' });
 		}
 		if (htmlOpts.postprocessorScript) {
 			await page.addScriptTag({ path: htmlOpts.postprocessorScript, type: 'text/javascript' });
 		}
-		if (htmlOpts.additionalStyleTags) {
-			await Promise.all(htmlOpts.additionalStyleTags.map(function(s) {
-				return page.addStyleTag({ url: s });
-			}));
-		}
 		if (htmlOpts.dumpHTML) {
 			await page.addScriptTag({ path: opts.scriptDir + '/dumper.js', type: 'text/javascript' });
 		}

lib/parsoid.custom_styles.yaml

@@ -270,6 +270,12 @@ ar.wikipedia.org: |
        font-size: 90%;
    }
 
+   div.reflist + ol + ul {
+      font-size: 13px;
+      margin-bottom: 0.5em;
+      clear: right;
+   }
+
 # ------------------------ These styles apply to viwiki only ------------------------
 vi.wikipedia.org: |
    [rel="mw:referencedBy"]::before {