Allow users to copy-paste job settings

Before copying, variables in the job setting value are replaced based on
the user's own platform. Furthermore, specific settings can be processed
before copying; for example, the `render_output` setting gets its `######`
removed and a directory popped so that you end up at the directory
containing the intermediate directory and/or the final directory.

gulpfile.js

@@ -90,10 +90,17 @@ gulp.task('scripts_tutti', function() {
 
 /* Simply copy these vendor scripts from node_modules. */
 gulp.task('scripts_copy_vendor', function(done) {
+    // I don't want to have a 'bundled.js' in our vendor directory,
+    // so first we have to rename-copy it.
+    gulp.src('node_modules/bowser/es5.js')
+        .pipe(rename("bowser.js"))
+        .pipe(gulp.dest("node_modules/bowser/dist"));
+
     let toCopy = [
         'node_modules/d3/build/d3.min.js',
         'node_modules/d3/build/d3.js',
         'node_modules/dagre-d3/dist/dagre-d3.min.js',
+        'node_modules/bowser/dist/bowser.js',
     ];
 
     gulp.src(toCopy)

package.json

@@ -25,6 +25,7 @@
 	},
 	"dependencies": {
 		"bootstrap": "^4.1.3",
+		"bowser": "^2.1.0",
 		"dagre-d3": "^0.6.3",
 		"jquery": "^3.3.1",
 		"natives": "^1.1.6",

src/templates/flamenco/jobs/list_for_project.pug

@@ -1,6 +1,15 @@
 | {% extends 'flamenco/projects/view.html' %}
 | {% block bodyattrs %}{{ super() }} data-context='{{ page_context }}'{% endblock %}
 | {% block page_title %}Jobs - {{ project.name }}{% endblock %}
+
+| {% block head %}
+| {{ super() }}
+style.
+		.job-setting[data-clipboard-text] {
+				cursor: pointer;
+		}
+| {% endblock %}
+
 | {% block flamencobody %}
 #col_main
 	#col_main-overlay

src/templates/flamenco/jobs/view_job_embed.pug

@@ -57,7 +57,7 @@
 			.table-row
 				.table-cell
 					| {{ set_key | undertitle }}
-				.table-cell
+				.table-cell.job-setting(data-setting-key="{{ set_key }}")
 					| {{ set_val }}
 			| {% endfor %}
 
@@ -138,6 +138,7 @@
 	)
 	| {% endif %}
 
+script(src="{{ url_for('static_flamenco', filename='assets/js/generated/vendor/bowser.js')}}")
 script.
 	/* Load correct task page; was stored at the bottom of _task_list.pug */
 	var sess_task_page = window.sessionStorage.getItem('flamenco-task-page');
@@ -156,3 +157,65 @@ script.
 
 	if (typeof openModalUrl == 'function')
 		$('.js-help').openModalUrl('Help', "{{ url_for('flamenco.help', project_url=project.url) }}");
+
+	$.fn.managerVariableReplace = function() {
+		// Get OS name, defaulting to Linux.
+		let osName = bowser.getParser(window.navigator.userAgent).getOSName();
+		if (osName != 'Windows' && osName != 'macOS') osName = 'Linux'
+
+		let mngrVariables = {{ manager.variables.to_dict() | tojson }};
+		let mngrPathReplacement = {{ manager.path_replacement.to_dict() | tojson }};
+
+		// Convert the per-OS variables into a flat OS-specific structure.
+		var platformVars = {};
+		let osname = osName.toLowerCase();
+		for (varname in mngrVariables)
+			platformVars[varname] = mngrVariables[varname][osname];
+		for (varname in mngrPathReplacement)
+			platformVars[varname] = mngrPathReplacement[varname][osname];
+
+		// Some settings need some special treatment.
+		// Mapping from setting key to function that transforms the setting value.
+		let specials = {
+			render_output: function(value) {
+				/* Remove the trailing '####' and pop off the top directory.
+				 * During rendering the top dir won't exist yet, but rather
+				 * be an intermediate directory. */
+				let withoutHashes = value.replace(/\/#*$/, '');
+				let parts = withoutHashes.split(/[\\/]/);
+				parts.pop();
+				let sep = osName == 'Windows' ? '\\' : '/';
+				return parts.join(sep);
+			},
+		}
+
+		this.each(function(index, element) {
+			var text = element.innerText;
+
+			for (varname in platformVars) {
+				text = text.replace('{' + varname + '}', platformVars[varname]);
+			}
+
+			let transformer = specials[element.dataset.settingKey];
+			if (typeof transformer == 'function') {
+				text = transformer(text);
+			}
+
+			var expandedFor = "";
+			if (text != element.innerText) {
+				expandedFor = " (variables expanded for " + osName + ")";
+			}
+
+			element.dataset.clipboardText = text;
+			element.setAttribute('title', "Click to copy '" + text + "' to the clipboard" + expandedFor + ".");
+		});
+
+		return this;
+	};
+
+	$('.job-setting').managerVariableReplace();
+
+	new Clipboard('.job-setting[data-clipboard-text]')
+	.on('success', function(e) {
+		statusBarSet('info', 'Copied setting to clipboard, localised for your platform', 'pi-check');
+	});