tdf#148621 Improve Basic Help layout

- Get rid of tables
- Add normalize-whitespace Prism plugin to get rid of useless indents
- Fix code blocks poking through sticky header
- Add some word wrapping CSS to fix mobile-unfriendliness

Change-Id: I73fd1e0678624b0d4bd5561f50e80990db5567be
Reviewed-on: https://gerrit.libreoffice.org/c/help/+/133096
Tested-by: Jenkins
Reviewed-by: Olivier Hallot <olivier.hallot@libreoffice.org>

4 files changed, 208 insertions, 3 deletions

diff --git a/help3xsl/default.css b/help3xsl/default.css
index 085d323a95..2c5e59ac0a 100644
--- a/help3xsl/default.css
+++ b/help3xsl/default.css
@@ -121,6 +121,7 @@ pre,
     display: inline;
     padding: 1px 3px;
     font-family: var(--font_mono);
+    word-wrap: anywhere;
 }
 .smathcode {
     border-radius: 2px;
@@ -178,6 +179,10 @@ pre,
 .noteicon, .notetext {
     padding:0.3em;
 }
+/* Override some Prism.js styles */
+code[class*="language-"], pre[class*="language-"] {
+    white-space: pre-wrap;
+}
 
 /* Table related classes */
 
@@ -603,6 +608,7 @@ li.disabled a {
     background: #18A303;
     top: 0px;
     position: sticky;
+    z-index: 100;
 }
 .xapian-omega-search {
     margin: auto;
diff --git a/help3xsl/online_transform.xsl b/help3xsl/online_transform.xsl
index 0751d7a862..465415ea24 100644
--- a/help3xsl/online_transform.xsl
+++ b/help3xsl/online_transform.xsl
@@ -143,8 +143,8 @@
         <title><xsl:value-of disable-output-escaping="yes" select="$titleL10N"/></title>
         <link rel="shortcut icon" href="media/navigation/favicon.ico"/>
         <link  type="text/css" href="normalize.css" rel="Stylesheet"/>
-        <link  type="text/css" href="default.css" rel="Stylesheet"/>
         <link  type="text/css" href="prism.css" rel="Stylesheet"/>
+        <link  type="text/css" href="default.css" rel="Stylesheet"/>
         <script type="text/javascript" src="polyfills.js"></script>
         <script type="text/javascript" src="languages.js"></script>
         <script type="text/javascript" src="{$lang}/langnames.js"></script>
diff --git a/help3xsl/prism.css b/help3xsl/prism.css
index f974d0c87c..79d07d18a1 100644
--- a/help3xsl/prism.css
+++ b/help3xsl/prism.css
@@ -1,5 +1,5 @@
 /* PrismJS 1.27.0
-https://prismjs.com/download.html#themes=prism-coy&languages=markup+css+clike+javascript+python+visual-basic&plugins=line-numbers */
+https://prismjs.com/download.html#themes=prism-coy&languages=markup+css+clike+javascript+python+visual-basic&plugins=line-numbers+normalize-whitespace */
 /**
  * prism.js Coy theme for JavaScript, CoffeeScript, CSS and HTML
  * Based on https://github.com/tshedor/workshop-wp-theme (Example: http://workshop.kansan.com/category/sessions/basics or http://workshop.timshedor.com/category/sessions/basics);
diff --git a/help3xsl/prism.js b/help3xsl/prism.js
index 546388f444..4e00aeb045 100644
--- a/help3xsl/prism.js
+++ b/help3xsl/prism.js
@@ -1,5 +1,5 @@
 /* PrismJS 1.27.0
-https://prismjs.com/download.html#themes=prism-coy&languages=markup+css+clike+javascript+python+visual-basic&plugins=line-numbers */
+https://prismjs.com/download.html#themes=prism-coy&languages=markup+css+clike+javascript+python+visual-basic&plugins=line-numbers+normalize-whitespace */
 /// <reference lib="WebWorker"/>
 
 var _self = (typeof window !== 'undefined')
@@ -2067,3 +2067,202 @@ Prism.languages.vba = Prism.languages['visual-basic'];
 
 }());
 
+(function () {
+
+	if (typeof Prism === 'undefined') {
+		return;
+	}
+
+	var assign = Object.assign || function (obj1, obj2) {
+		for (var name in obj2) {
+			if (obj2.hasOwnProperty(name)) {
+				obj1[name] = obj2[name];
+			}
+		}
+		return obj1;
+	};
+
+	function NormalizeWhitespace(defaults) {
+		this.defaults = assign({}, defaults);
+	}
+
+	function toCamelCase(value) {
+		return value.replace(/-(\w)/g, function (match, firstChar) {
+			return firstChar.toUpperCase();
+		});
+	}
+
+	function tabLen(str) {
+		var res = 0;
+		for (var i = 0; i < str.length; ++i) {
+			if (str.charCodeAt(i) == '\t'.charCodeAt(0)) {
+				res += 3;
+			}
+		}
+		return str.length + res;
+	}
+
+	NormalizeWhitespace.prototype = {
+		setDefaults: function (defaults) {
+			this.defaults = assign(this.defaults, defaults);
+		},
+		normalize: function (input, settings) {
+			settings = assign(this.defaults, settings);
+
+			for (var name in settings) {
+				var methodName = toCamelCase(name);
+				if (name !== 'normalize' && methodName !== 'setDefaults' &&
+					settings[name] && this[methodName]) {
+					input = this[methodName].call(this, input, settings[name]);
+				}
+			}
+
+			return input;
+		},
+
+		/*
+		 * Normalization methods
+		 */
+		leftTrim: function (input) {
+			return input.replace(/^\s+/, '');
+		},
+		rightTrim: function (input) {
+			return input.replace(/\s+$/, '');
+		},
+		tabsToSpaces: function (input, spaces) {
+			spaces = spaces|0 || 4;
+			return input.replace(/\t/g, new Array(++spaces).join(' '));
+		},
+		spacesToTabs: function (input, spaces) {
+			spaces = spaces|0 || 4;
+			return input.replace(RegExp(' {' + spaces + '}', 'g'), '\t');
+		},
+		removeTrailing: function (input) {
+			return input.replace(/\s*?$/gm, '');
+		},
+		// Support for deprecated plugin remove-initial-line-feed
+		removeInitialLineFeed: function (input) {
+			return input.replace(/^(?:\r?\n|\r)/, '');
+		},
+		removeIndent: function (input) {
+			var indents = input.match(/^[^\S\n\r]*(?=\S)/gm);
+
+			if (!indents || !indents[0].length) {
+				return input;
+			}
+
+			indents.sort(function (a, b) { return a.length - b.length; });
+
+			if (!indents[0].length) {
+				return input;
+			}
+
+			return input.replace(RegExp('^' + indents[0], 'gm'), '');
+		},
+		indent: function (input, tabs) {
+			return input.replace(/^[^\S\n\r]*(?=\S)/gm, new Array(++tabs).join('\t') + '$&');
+		},
+		breakLines: function (input, characters) {
+			characters = (characters === true) ? 80 : characters|0 || 80;
+
+			var lines = input.split('\n');
+			for (var i = 0; i < lines.length; ++i) {
+				if (tabLen(lines[i]) <= characters) {
+					continue;
+				}
+
+				var line = lines[i].split(/(\s+)/g);
+				var len = 0;
+
+				for (var j = 0; j < line.length; ++j) {
+					var tl = tabLen(line[j]);
+					len += tl;
+					if (len > characters) {
+						line[j] = '\n' + line[j];
+						len = tl;
+					}
+				}
+				lines[i] = line.join('');
+			}
+			return lines.join('\n');
+		}
+	};
+
+	// Support node modules
+	if (typeof module !== 'undefined' && module.exports) {
+		module.exports = NormalizeWhitespace;
+	}
+
+	Prism.plugins.NormalizeWhitespace = new NormalizeWhitespace({
+		'remove-trailing': true,
+		'remove-indent': true,
+		'left-trim': true,
+		'right-trim': true,
+		/*'break-lines': 80,
+		'indent': 2,
+		'remove-initial-line-feed': false,
+		'tabs-to-spaces': 4,
+		'spaces-to-tabs': 4*/
+	});
+
+	Prism.hooks.add('before-sanity-check', function (env) {
+		var Normalizer = Prism.plugins.NormalizeWhitespace;
+
+		// Check settings
+		if (env.settings && env.settings['whitespace-normalization'] === false) {
+			return;
+		}
+
+		// Check classes
+		if (!Prism.util.isActive(env.element, 'whitespace-normalization', true)) {
+			return;
+		}
+
+		// Simple mode if there is no env.element
+		if ((!env.element || !env.element.parentNode) && env.code) {
+			env.code = Normalizer.normalize(env.code, env.settings);
+			return;
+		}
+
+		// Normal mode
+		var pre = env.element.parentNode;
+		if (!env.code || !pre || pre.nodeName.toLowerCase() !== 'pre') {
+			return;
+		}
+
+		var children = pre.childNodes;
+		var before = '';
+		var after = '';
+		var codeFound = false;
+
+		// Move surrounding whitespace from the <pre> tag into the <code> tag
+		for (var i = 0; i < children.length; ++i) {
+			var node = children[i];
+
+			if (node == env.element) {
+				codeFound = true;
+			} else if (node.nodeName === '#text') {
+				if (codeFound) {
+					after += node.nodeValue;
+				} else {
+					before += node.nodeValue;
+				}
+
+				pre.removeChild(node);
+				--i;
+			}
+		}
+
+		if (!env.element.children.length || !Prism.plugins.KeepMarkup) {
+			env.code = before + env.code + after;
+			env.code = Normalizer.normalize(env.code, env.settings);
+		} else {
+			// Preserve markup for keep-markup plugin
+			var html = before + env.element.innerHTML + after;
+			env.element.innerHTML = Normalizer.normalize(html, env.settings);
+			env.code = env.element.textContent;
+		}
+	});
+
+}());
+