From 34a9f91e664e0ea612450d64d2bc1d0e66ff305f Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Fri, 18 May 2018 16:02:32 +0000
Subject: [PATCH] Bug 20935: Redesign system preferences interface
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This patch proposes a new interface for system preferences. The goal is
to make the interface more readable and to give the user additional
options for finding what they need.

- Restructures the preferences list as a <dl>, with the preference name
  as the <dt> and the description as the <dd>.
- Add a JS filter library (mark.js) to do live filtering of the page and
  add search term highlighting.
- When the user has searched, show links to the sections in which
  results were returned.

To test, apply the patch and go to Administration -> System preferences.

 - Test the functionality of setting various kinds of preferences,
   including multi-selects, textareas, WYSIWYG editors, etc.
 - Test the filter form at the top of the page for narrowing in-page
   results.
   - Test both successful and unsuccessful filters.
 - Perform a system preference search.
   - Test the in-page links to the different sections.
   - Test that in-page filtering works in this case too.
 - View the licenses tab of the "About" page and check that the
   information about mark.js looks correct.

Followed test plan and pleased to say everything worked as expected.
Looking forward to this enhancement.

Signed-off-by: Dilan Johnpullé <dilan@calyx.net.au>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
---
 .../lib/jquery/plugins/jquery.mark.min.js          |  7 ++
 koha-tmpl/intranet-tmpl/prog/css/preferences.css   | 78 +++++++++++++---------
 .../intranet-tmpl/prog/css/src/staff-global.scss   |  5 ++
 koha-tmpl/intranet-tmpl/prog/en/modules/about.tt   |  3 +
 .../prog/en/modules/admin/preferences.tt           | 75 ++++++++++++---------
 .../intranet-tmpl/prog/js/pages/preferences.js     | 61 +++++++++--------
 6 files changed, 137 insertions(+), 92 deletions(-)
 create mode 100644 koha-tmpl/intranet-tmpl/lib/jquery/plugins/jquery.mark.min.js

diff --git a/koha-tmpl/intranet-tmpl/lib/jquery/plugins/jquery.mark.min.js b/koha-tmpl/intranet-tmpl/lib/jquery/plugins/jquery.mark.min.js
new file mode 100644
index 0000000..b14fa71
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/lib/jquery/plugins/jquery.mark.min.js
@@ -0,0 +1,7 @@
+/*!***************************************************
+* mark.js v8.11.1
+* https://markjs.io/
+* Copyright (c) 2014–2018, Julian Kühnel
+* Released under the MIT license https://git.io/vwTVl
+*****************************************************/
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("jquery")):"function"==typeof define&&define.amd?define(["jquery"],t):e.Mark=t(e.jQuery)}(this,function(e){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},r=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},o=function(){function e(t){var r=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[],o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:5e3;n(this,e),this.ctx=t,this.iframes=r,this.exclude=i,this.iframesTimeout=o}return r(e,[{key:"getContexts",value:function(){var e=[];return(void 0!==this.ctx&&this.ctx?NodeList.prototype.isPrototypeOf(this.ctx)?Array.prototype.slice.call(this.ctx):Array.isArray(this.ctx)?this.ctx:"string"==typeof this.ctx?Array.prototype.slice.call(document.querySelectorAll(this.ctx)):[this.ctx]:[]).forEach(function(t){var n=e.filter(function(e){return e.contains(t)}).length>0;-1!==e.indexOf(t)||n||e.push(t)}),e}},{key:"getIframeContents",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},r=void 0;try{var i=e.contentWindow;if(r=i.document,!i||!r)throw new Error("iframe inaccessible")}catch(e){n()}r&&t(r)}},{key:"isIframeBlank",value:function(e){var t="about:blank",n=e.getAttribute("src").trim();return e.contentWindow.location.href===t&&n!==t&&n}},{key:"observeIframeLoad",value:function(e,t,n){var r=this,i=!1,o=null,a=function a(){if(!i){i=!0,clearTimeout(o);try{r.isIframeBlank(e)||(e.removeEventListener("load",a),r.getIframeContents(e,t,n))}catch(e){n()}}};e.addEventListener("load",a),o=setTimeout(a,this.iframesTimeout)}},{key:"onIframeReady",value:function(e,t,n){try{"complete"===e.contentWindow.document.readyState?this.isIframeBlank(e)?this.observeIframeLoad(e,t,n):this.getIframeContents(e,t,n):this.observeIframeLoad(e,t,n)}catch(e){n()}}},{key:"waitForIframes",value:function(e,t){var n=this,r=0;this.forEachIframe(e,function(){return!0},function(e){r++,n.waitForIframes(e.querySelector("html"),function(){--r||t()})},function(e){e||t()})}},{key:"forEachIframe",value:function(t,n,r){var i=this,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:function(){},a=t.querySelectorAll("iframe"),s=a.length,c=0;a=Array.prototype.slice.call(a);var u=function(){--s<=0&&o(c)};s||u(),a.forEach(function(t){e.matches(t,i.exclude)?u():i.onIframeReady(t,function(e){n(t)&&(c++,r(e)),u()},u)})}},{key:"createIterator",value:function(e,t,n){return document.createNodeIterator(e,t,n,!1)}},{key:"createInstanceOnIframe",value:function(t){return new e(t.querySelector("html"),this.iframes)}},{key:"compareNodeIframe",value:function(e,t,n){if(e.compareDocumentPosition(n)&Node.DOCUMENT_POSITION_PRECEDING){if(null===t)return!0;if(t.compareDocumentPosition(n)&Node.DOCUMENT_POSITION_FOLLOWING)return!0}return!1}},{key:"getIteratorNode",value:function(e){var t=e.previousNode();return{prevNode:t,node:null===t?e.nextNode():e.nextNode()&&e.nextNode()}}},{key:"checkIframeFilter",value:function(e,t,n,r){var i=!1,o=!1;return r.forEach(function(e,t){e.val===n&&(i=t,o=e.handled)}),this.compareNodeIframe(e,t,n)?(!1!==i||o?!1===i||o||(r[i].handled=!0):r.push({val:n,handled:!0}),!0):(!1===i&&r.push({val:n,handled:!1}),!1)}},{key:"handleOpenIframes",value:function(e,t,n,r){var i=this;e.forEach(function(e){e.handled||i.getIframeContents(e.val,function(e){i.createInstanceOnIframe(e).forEachNode(t,n,r)})})}},{key:"iterateThroughNodes",value:function(e,t,n,r,i){for(var o,a=this,s=this.createIterator(t,e,r),c=[],u=[],l=void 0,h=void 0;void 0,o=a.getIteratorNode(s),h=o.prevNode,l=o.node;)this.iframes&&this.forEachIframe(t,function(e){return a.checkIframeFilter(l,h,e,c)},function(t){a.createInstanceOnIframe(t).forEachNode(e,function(e){return u.push(e)},r)}),u.push(l);u.forEach(function(e){n(e)}),this.iframes&&this.handleOpenIframes(c,e,n,r),i()}},{key:"forEachNode",value:function(e,t,n){var r=this,i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:function(){},o=this.getContexts(),a=o.length;a||i(),o.forEach(function(o){var s=function(){r.iterateThroughNodes(e,o,t,n,function(){--a<=0&&i()})};r.iframes?r.waitForIframes(o,s):s()})}}],[{key:"matches",value:function(e,t){var n="string"==typeof t?[t]:t,r=e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.oMatchesSelector||e.webkitMatchesSelector;if(r){var i=!1;return n.every(function(t){return!r.call(e,t)||(i=!0,!1)}),i}return!1}}]),e}(),a=function(){function e(t){n(this,e),this.opt=i({},{diacritics:!0,synonyms:{},accuracy:"partially",caseSensitive:!1,ignoreJoiners:!1,ignorePunctuation:[],wildcards:"disabled"},t)}return r(e,[{key:"create",value:function(e){return"disabled"!==this.opt.wildcards&&(e=this.setupWildcardsRegExp(e)),e=this.escapeStr(e),Object.keys(this.opt.synonyms).length&&(e=this.createSynonymsRegExp(e)),(this.opt.ignoreJoiners||this.opt.ignorePunctuation.length)&&(e=this.setupIgnoreJoinersRegExp(e)),this.opt.diacritics&&(e=this.createDiacriticsRegExp(e)),e=this.createMergedBlanksRegExp(e),(this.opt.ignoreJoiners||this.opt.ignorePunctuation.length)&&(e=this.createJoinersRegExp(e)),"disabled"!==this.opt.wildcards&&(e=this.createWildcardsRegExp(e)),e=this.createAccuracyRegExp(e),new RegExp(e,"gm"+(this.opt.caseSensitive?"":"i"))}},{key:"escapeStr",value:function(e){return e.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&")}},{key:"createSynonymsRegExp",value:function(e){var t=this.opt.synonyms,n=this.opt.caseSensitive?"":"i",r=this.opt.ignoreJoiners||this.opt.ignorePunctuation.length?"\0":"";for(var i in t)if(t.hasOwnProperty(i)){var o=t[i],a="disabled"!==this.opt.wildcards?this.setupWildcardsRegExp(i):this.escapeStr(i),s="disabled"!==this.opt.wildcards?this.setupWildcardsRegExp(o):this.escapeStr(o);""!==a&&""!==s&&(e=e.replace(new RegExp("("+this.escapeStr(a)+"|"+this.escapeStr(s)+")","gm"+n),r+"("+this.processSynonyms(a)+"|"+this.processSynonyms(s)+")"+r))}return e}},{key:"processSynonyms",value:function(e){return(this.opt.ignoreJoiners||this.opt.ignorePunctuation.length)&&(e=this.setupIgnoreJoinersRegExp(e)),e}},{key:"setupWildcardsRegExp",value:function(e){return(e=e.replace(/(?:\\)*\?/g,function(e){return"\\"===e.charAt(0)?"?":"
"})).replace(/(?:\\)*\*/g,function(e){return"\\"===e.charAt(0)?"*":""})}},{key:"createWildcardsRegExp",value:function(e){var t="withSpaces"===this.opt.wildcards;return e.replace(/\u0001/g,t?"[\\S\\s]?":"\\S?").replace(/\u0002/g,t?"[\\S\\s]*?":"\\S*")}},{key:"setupIgnoreJoinersRegExp",value:function(e){return e.replace(/[^(|)\\]/g,function(e,t,n){var r=n.charAt(t+1);return/[(|)\\]/.test(r)||""===r?e:e+"\0"})}},{key:"createJoinersRegExp",value:function(e){var t=[],n=this.opt.ignorePunctuation;return Array.isArray(n)&&n.length&&t.push(this.escapeStr(n.join(""))),this.opt.ignoreJoiners&&t.push("\\u00ad\\u200b\\u200c\\u200d"),t.length?e.split(/\u0000+/).join("["+t.join("")+"]*"):e}},{key:"createDiacriticsRegExp",value:function(e){var t=this.opt.caseSensitive?"":"i",n=this.opt.caseSensitive?["aàáảãạăằắẳẵặâầấẩẫậäåāą","AÀÁẢÃẠĂẰẮẲẴẶÂẦẤẨẪẬÄÅĀĄ","cçćč","CÇĆČ","dđď","DĐĎ","eèéẻẽẹêềếểễệëěēę","EÈÉẺẼẸÊỀẾỂỄỆËĚĒĘ","iìíỉĩịîïī","IÌÍỈĨỊÎÏĪ","lł","LŁ","nñňń","NÑŇŃ","oòóỏõọôồốổỗộơởỡớờợöøō","OÒÓỎÕỌÔỒỐỔỖỘƠỞỠỚỜỢÖØŌ","rř","RŘ","sšśșş","SŠŚȘŞ","tťțţ","TŤȚŢ","uùúủũụưừứửữựûüůū","UÙÚỦŨỤƯỪỨỬỮỰÛÜŮŪ","yýỳỷỹỵÿ","YÝỲỶỸỴŸ","zžżź","ZŽŻŹ"]:["aàáảãạăằắẳẵặâầấẩẫậäåāąAÀÁẢÃẠĂẰẮẲẴẶÂẦẤẨẪẬÄÅĀĄ","cçćčCÇĆČ","dđďDĐĎ","eèéẻẽẹêềếểễệëěēęEÈÉẺẼẸÊỀẾỂỄỆËĚĒĘ","iìíỉĩịîïīIÌÍỈĨỊÎÏĪ","lłLŁ","nñňńNÑŇŃ","oòóỏõọôồốổỗộơởỡớờợöøōOÒÓỎÕỌÔỒỐỔỖỘƠỞỠỚỜỢÖØŌ","rřRŘ","sšśșşSŠŚȘŞ","tťțţTŤȚŢ","uùúủũụưừứửữựûüůūUÙÚỦŨỤƯỪỨỬỮỰÛÜŮŪ","yýỳỷỹỵÿYÝỲỶỸỴŸ","zžżźZŽŻŹ"],r=[];return e.split("").forEach(function(i){n.every(function(n){if(-1!==n.indexOf(i)){if(r.indexOf(n)>-1)return!1;e=e.replace(new RegExp("["+n+"]","gm"+t),"["+n+"]"),r.push(n)}return!0})}),e}},{key:"createMergedBlanksRegExp",value:function(e){return e.replace(/[\s]+/gim,"[\\s]+")}},{key:"createAccuracyRegExp",value:function(e){var t=this,n=this.opt.accuracy,r="string"==typeof n?n:n.value,i="";switch(("string"==typeof n?[]:n.limiters).forEach(function(e){i+="|"+t.escapeStr(e)}),r){case"partially":default:return"()("+e+")";case"complementary":return"()([^"+(i="\\s"+(i||this.escapeStr("!\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~¡¿")))+"]*"+e+"[^"+i+"]*)";case"exactly":return"(^|\\s"+i+")("+e+")(?=$|\\s"+i+")"}}}]),e}(),s=function(){function e(t){n(this,e),this.ctx=t,this.ie=!1;var r=window.navigator.userAgent;(r.indexOf("MSIE")>-1||r.indexOf("Trident")>-1)&&(this.ie=!0)}return r(e,[{key:"log",value:function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"debug",r=this.opt.log;this.opt.debug&&"object"===(void 0===r?"undefined":t(r))&&"function"==typeof r[n]&&r[n]("mark.js: "+e)}},{key:"getSeparatedKeywords",value:function(e){var t=this,n=[];return e.forEach(function(e){t.opt.separateWordSearch?e.split(" ").forEach(function(e){e.trim()&&-1===n.indexOf(e)&&n.push(e)}):e.trim()&&-1===n.indexOf(e)&&n.push(e)}),{keywords:n.sort(function(e,t){return t.length-e.length}),length:n.length}}},{key:"isNumeric",value:function(e){return Number(parseFloat(e))==e}},{key:"checkRanges",value:function(e){var t=this;if(!Array.isArray(e)||"[object Object]"!==Object.prototype.toString.call(e[0]))return this.log("markRanges() will only accept an array of objects"),this.opt.noMatch(e),[];var n=[],r=0;return e.sort(function(e,t){return e.start-t.start}).forEach(function(e){var i=t.callNoMatchOnInvalidRanges(e,r),o=i.start,a=i.end;i.valid&&(e.start=o,e.length=a-o,n.push(e),r=a)}),n}},{key:"callNoMatchOnInvalidRanges",value:function(e,t){var n=void 0,r=void 0,i=!1;return e&&void 0!==e.start?(r=(n=parseInt(e.start,10))+parseInt(e.length,10),this.isNumeric(e.start)&&this.isNumeric(e.length)&&r-t>0&&r-n>0?i=!0:(this.log("Ignoring invalid or overlapping range: "+JSON.stringify(e)),this.opt.noMatch(e))):(this.log("Ignoring invalid range: "+JSON.stringify(e)),this.opt.noMatch(e)),{start:n,end:r,valid:i}}},{key:"checkWhitespaceRanges",value:function(e,t,n){var r=void 0,i=!0,o=n.length,a=t-o,s=parseInt(e.start,10)-a;return(r=(s=s>o?o:s)+parseInt(e.length,10))>o&&(r=o,this.log("End range automatically set to the max value of "+o)),s<0||r-s<0||s>o||r>o?(i=!1,this.log("Invalid range: "+JSON.stringify(e)),this.opt.noMatch(e)):""===n.substring(s,r).replace(/\s+/g,"")&&(i=!1,this.log("Skipping whitespace only range: "+JSON.stringify(e)),this.opt.noMatch(e)),{start:s,end:r,valid:i}}},{key:"getTextNodes",value:function(e){var t=this,n="",r=[];this.iterator.forEachNode(NodeFilter.SHOW_TEXT,function(e){r.push({start:n.length,end:(n+=e.textContent).length,node:e})},function(e){return t.matchesExclude(e.parentNode)?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT},function(){e({value:n,nodes:r})})}},{key:"matchesExclude",value:function(e){return o.matches(e,this.opt.exclude.concat(["script","style","title","head","html"]))}},{key:"wrapRangeInTextNode",value:function(e,t,n){var r=this.opt.element?this.opt.element:"mark",i=e.splitText(t),o=i.splitText(n-t),a=document.createElement(r);return a.setAttribute("data-markjs","true"),this.opt.className&&a.setAttribute("class",this.opt.className),a.textContent=i.textContent,i.parentNode.replaceChild(a,i),o}},{key:"wrapRangeInMappedTextNode",value:function(e,t,n,r,i){var o=this;e.nodes.every(function(a,s){var c=e.nodes[s+1];if(void 0===c||c.start>t){if(!r(a.node))return!1;var u=t-a.start,l=(n>a.end?a.end:n)-a.start,h=e.value.substr(0,a.start),f=e.value.substr(l+a.start);if(a.node=o.wrapRangeInTextNode(a.node,u,l),e.value=h+f,e.nodes.forEach(function(t,n){n>=s&&(e.nodes[n].start>0&&n!==s&&(e.nodes[n].start-=l),e.nodes[n].end-=l)}),n-=l,i(a.node.previousSibling,a.start),!(n>a.end))return!1;t=a.end}return!0})}},{key:"wrapGroups",value:function(e,t,n,r){return r((e=this.wrapRangeInTextNode(e,t,t+n)).previousSibling),e}},{key:"separateGroups",value:function(e,t,n,r,i){for(var o=t.length,a=1;a<o;a++){var s=e.textContent.indexOf(t[a]);t[a]&&s>-1&&r(t[a],e)&&(e=this.wrapGroups(e,s,t[a].length,i))}return e}},{key:"wrapMatches",value:function(e,t,n,r,i){var o=this,a=0===t?0:t+1;this.getTextNodes(function(t){t.nodes.forEach(function(t){t=t.node;for(var i=void 0;null!==(i=e.exec(t.textContent))&&""!==i[a];){if(o.opt.separateGroups)t=o.separateGroups(t,i,a,n,r);else{if(!n(i[a],t))continue;var s=i.index;if(0!==a)for(var c=1;c<a;c++)s+=i[c].length;t=o.wrapGroups(t,s,i[a].length,r)}e.lastIndex=0}}),i()})}},{key:"wrapMatchesAcrossElements",value:function(e,t,n,r,i){var o=this,a=0===t?0:t+1;this.getTextNodes(function(t){for(var s=void 0;null!==(s=e.exec(t.value))&&""!==s[a];){var c=s.index;if(0!==a)for(var u=1;u<a;u++)c+=s[u].length;var l=c+s[a].length;o.wrapRangeInMappedTextNode(t,c,l,function(e){return n(s[a],e)},function(t,n){e.lastIndex=n,r(t)})}i()})}},{key:"wrapRangeFromIndex",value:function(e,t,n,r){var i=this;this.getTextNodes(function(o){var a=o.value.length;e.forEach(function(e,r){var s=i.checkWhitespaceRanges(e,a,o.value),c=s.start,u=s.end;s.valid&&i.wrapRangeInMappedTextNode(o,c,u,function(n){return t(n,e,o.value.substring(c,u),r)},function(t){n(t,e)})}),r()})}},{key:"unwrapMatches",value:function(e){for(var t=e.parentNode,n=document.createDocumentFragment();e.firstChild;)n.appendChild(e.removeChild(e.firstChild));t.replaceChild(n,e),this.ie?this.normalizeTextNode(t):t.normalize()}},{key:"normalizeTextNode",value:function(e){if(e){if(3===e.nodeType)for(;e.nextSibling&&3===e.nextSibling.nodeType;)e.nodeValue+=e.nextSibling.nodeValue,e.parentNode.removeChild(e.nextSibling);else this.normalizeTextNode(e.firstChild);this.normalizeTextNode(e.nextSibling)}}},{key:"markRegExp",value:function(e,t){var n=this;this.opt=t,this.log('Searching with expression "'+e+'"');var r=0,i="wrapMatches";this.opt.acrossElements&&(i="wrapMatchesAcrossElements"),this[i](e,this.opt.ignoreGroups,function(e,t){return n.opt.filter(t,e,r)},function(e){r++,n.opt.each(e)},function(){0===r&&n.opt.noMatch(e),n.opt.done(r)})}},{key:"mark",value:function(e,t){var n=this;this.opt=t;var r=0,i="wrapMatches",o=this.getSeparatedKeywords("string"==typeof e?[e]:e),s=o.keywords,c=o.length;this.opt.acrossElements&&(i="wrapMatchesAcrossElements"),0===c?this.opt.done(r):function e(t){var o=new a(n.opt).create(t),u=0;n.log('Searching with expression "'+o+'"'),n[i](o,1,function(e,i){return n.opt.filter(i,t,r,u)},function(e){u++,r++,n.opt.each(e)},function(){0===u&&n.opt.noMatch(t),s[c-1]===t?n.opt.done(r):e(s[s.indexOf(t)+1])})}(s[0])}},{key:"markRanges",value:function(e,t){var n=this;this.opt=t;var r=0,i=this.checkRanges(e);i&&i.length?(this.log("Starting to mark with the following ranges: "+JSON.stringify(i)),this.wrapRangeFromIndex(i,function(e,t,r,i){return n.opt.filter(e,t,r,i)},function(e,t){r++,n.opt.each(e,t)},function(){n.opt.done(r)})):this.opt.done(r)}},{key:"unmark",value:function(e){var t=this;this.opt=e;var n=this.opt.element?this.opt.element:"*";n+="[data-markjs]",this.opt.className&&(n+="."+this.opt.className),this.log('Removal selector "'+n+'"'),this.iterator.forEachNode(NodeFilter.SHOW_ELEMENT,function(e){t.unwrapMatches(e)},function(e){var r=o.matches(e,n),i=t.matchesExclude(e);return!r||i?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT},this.opt.done)}},{key:"opt",set:function(e){this._opt=i({},{element:"",className:"",exclude:[],iframes:!1,iframesTimeout:5e3,separateWordSearch:!0,acrossElements:!1,ignoreGroups:0,each:function(){},noMatch:function(){},filter:function(){return!0},done:function(){},debug:!1,log:window.console},e)},get:function(){return this._opt}},{key:"iterator",get:function(){return new o(this.ctx,this.opt.iframes,this.opt.exclude,this.opt.iframesTimeout)}}]),e}();return e.fn.mark=function(e,t){return new s(this.get()).mark(e,t),this},e.fn.markRegExp=function(e,t){return new s(this.get()).markRegExp(e,t),this},e.fn.markRanges=function(e,t){return new s(this.get()).markRanges(e,t),this},e.fn.unmark=function(e){return new s(this.get()).unmark(e),this},e});
diff --git a/koha-tmpl/intranet-tmpl/prog/css/preferences.css b/koha-tmpl/intranet-tmpl/prog/css/preferences.css
index b004267..da27393 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/preferences.css
+++ b/koha-tmpl/intranet-tmpl/prog/css/preferences.css
@@ -20,46 +20,30 @@ textarea.preference-code, .preference-file {
 	font-family: monospace;
 }
 
-a.expand-textarea {
+a.expand-textarea,
+a.collapse-textarea {
     display: block;
+    font-size: 125%;
+    font-weight: bold;
 }
+
 dl {
 	margin-left : 1em;
 }
 dt {
 	padding : .1em;
 }
-h1 {
-	font-size : 149%;
-}
-h2 {
-	font-size : 134%;
-}
-
-table {
-	width : 100%;
-}
 
-caption {
-	color : #003399;
+h2 {
+    background-color: #e6f0f2;
+    font-size: 150%;
+    padding: .4em;
+    text-shadow: 0 1px 0 rgb(255, 255, 255);
 }
 
-h3 {
+h4 label {
 	color : #003366;
-	margin : .4em 0;
-    width : 40%;
-}
-
-h3.expanded {
-    background: transparent url("../img/collapse.gif") 0 6px no-repeat;
-	cursor : pointer;
-	padding-left : 12px;
-}
-
-h3.collapsed {
-    background: transparent url("../img/expand.gif") 0 6px no-repeat;
-	cursor : pointer;
-	padding-left : 12px;
+    font-weight: bold;
 }
 
 .humanMsg strong {
@@ -67,9 +51,7 @@ h3.collapsed {
 	font-weight: normal;
 }
 
-#yui-main {
-	margin-bottom:2em;
-}
+
 #toolbar.floating {
     box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.5);
     border-radius: 0;
@@ -89,3 +71,37 @@ span.overridden {
     font-weight: bold;
     color: red;
 }
+
+.pref_line {
+    border: 1px solid #CCC;
+}
+
+#menu ul li.active a.pref_sublink {
+    background: #FFF none;
+    border: 0;
+    color: #004D99;
+    font-weight: normal;
+    font-size: 100%;
+    margin: 0;
+    padding: .2em .5em;
+    text-align: right;
+    text-decoration: underline;
+}
+
+dl.name-row {
+    border-bottom: 1px solid #EEE;
+    margin: .3em 0;
+    margin-left: 1em;
+    padding: .3em 0;
+}
+
+.name-cell label {
+    font-weight: bold;
+    font-size: 130%;
+    color: #336699;
+}
+
+dd {
+    text-indent: 0;
+    margin-left: 3em;
+}
\ No newline at end of file
diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
index dc72a32..05c1917 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -417,6 +417,11 @@ hr {
     margin: 1em 0;
 }
 
+mark {
+    background-color: #EFFF73;
+    padding: 0;
+}
+
 p {
     margin: .5em 0;
 }
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/about.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/about.tt
index bffb1ea..1c10993 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/about.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/about.tt
@@ -1055,6 +1055,9 @@
 
             <h2>Noto fonts</h2>
             <p><a href="https://github.com/googlei18n/noto-fonts">Noto</a> by Google is a family of fonts licensed under the <a href="http://scripts.sil.org/OFL">SIL Open Font License (OFL) v1.1</a>.</p>
+
+            <h2>mark.js</h2>
+            <p>The <a href="https://markjs.io/">mark.js</a> JavaScript library by <a href="https://github.com/julmot">Julian Kühnel</a> is licensed under the <a href="https://github.com/julmot/mark.js/blob/master/LICENSE">MIT Licenses</a>.</p>
         </div>
 
         <div id="translations">
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/preferences.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/preferences.tt
index 6cc0570..be79342 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/preferences.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/preferences.tt
@@ -10,6 +10,7 @@
 [% Asset.css("lib/jquery/plugins/multiple-select/multiple-select.css") | $raw %]
 [% Asset.css("css/humanmsg.css") | $raw %]
 </head>
+
 <body id="admin_preferences" class="admin">
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'prefs-admin-search.inc' %]
@@ -34,47 +35,53 @@
     [% ELSIF searchfield %]
         <h1>You searched for: [% searchfield | html %]</h1>
     [% END %]
+    [% IF ( searchfield && !search_not_found ) %]
+        <p>
+            Results in sections:
+            [% FOREACH TAB IN TABS %]
+                <a href="#[% TAB.tab_title %]">[% TAB.tab_title %]</a>[% UNLESS ( loop.last ) %] &bull; [% END %]
+            [% END %]
+        </p>
+    [% END %]
+    [% IF ( searchfield ) %]
+        <label for="keyword_filter">Filter: <input type="text" size="10" name="keyword_filter" id="keyword_filter" /> <a href="#" id="clear_filter" style="display:none;"><i class="fa fa-remove"></i></a></label>
+    [% END %]
     [% FOREACH TAB IN TABS %]
     <div class="prefs-tab">
-    <h2>[% TAB.tab_title | html %] preferences</h2>
+
+    <h2 id="[% TAB.tab_title | html %]">[% TAB.tab_title | html %] preferences</h2>
     <form action="/cgi-bin/koha/admin/preferences.pl" method="post">
-        [% UNLESS ( searchfield ) %]<div id="toolbar"><button class="save-all submit" type="submit">Save all [% TAB.tab_title | html %] preferences</button></div>[% END %]
+        [% UNLESS ( searchfield ) %]
+            <div id="toolbar">
+                <button class="save-all submit" type="submit">Save all [% TAB.tab_title | html %] preferences</button>
+                <label for="keyword_filter">Filter: <input type="text" size="10" name="keyword_filter" id="keyword_filter" /> <a href="#" id="clear_filter" style="display:none;"><i class="fa fa-remove"></i></a></label>
+            </div>
+        [% END %]
         <input type="hidden" name="op" value="save" />
         <input type="hidden" name="tab" value="[% TAB.tab_id | html %]" />
-
-            [% FOREACH LINE IN TAB.LINES %]
+        [% FOREACH LINE IN TAB.LINES %]
             [% IF ( LINE.is_group_title ) %]
-            [% UNLESS ( loop.first ) %]</tbody></table>[% END %]
-            <h3>[% LINE.title | html %]</h3>
-            <table class="preferences">
-            <thead><tr><th>Preference</th><th>Value</th></tr></thead>
-            [% UNLESS ( loop.last ) %]<tbody>[% END %]
+                [% UNLESS ( loop.first ) %][% END %]
+                <h3 class="name-row">[% LINE.title | html %]</h3>
+                [% UNLESS ( loop.last ) %][% END %]
             [% ELSE %]
-            [% IF ( loop.first ) %]<table class="preferences"><thead><tr><th>Preference</th><th>Value</th></tr></thead><tbody>[% END %]
-            <tr class="name-row">
-                <td class="name-cell">
-                    <code>
-                        [% FOREACH NAME IN LINE.NAMES %]
-						<label for="pref_[% NAME.name | html %]">
-							[% IF ( NAME.jumped ) %]
-							<span class="term" id="jumped">[% NAME.name | html %]</span>
-                            [% ELSIF ( NAME.highlighted ) %]
-							<span class="term">[% NAME.name | html %]</span>
-							[% ELSE %]
-							[% NAME.name | html %]
-							[% END %]
+                [% IF ( loop.first ) %][% END %]
+            <dl class="name-row">
+                <dt class="name-cell">
+                    [% FOREACH NAME IN LINE.NAMES %]
+                        <label for="pref_[% NAME.name | html %]">
+                            [% NAME.name | html %]
 
                             [% IF NAME.overridden %]
                                 <span class="overridden" title="The system preference [% NAME.name | html %] may have been overridden from this value by one or more virtual hosts.">
                                     [Overridden]
                                 </span>
                             [% END %]
-						</label>
-                        [% UNLESS ( loop.last ) %]<br />[% END %]
-                        [% END %]
-                    </code>
-                </td>
-                <td><div>
+                        </label>
+                    [% UNLESS ( loop.last ) %]<br />[% END %]
+                    [% END %]
+                </dt>
+                <dd><div>
                     [% FOREACH CHUNK IN LINE.CHUNKS %]
                     [% IF ( CHUNK.type_text ) %]
                     [% CHUNK.contents | $raw %]
@@ -100,9 +107,9 @@
                         [% IF ( CHUNK.type_htmlarea ) && ( Koha.Preference('UseWYSIWYGinSystemPreferences') ) %]
                         <textarea name="pref_[% CHUNK.name | html %]" id="pref_[% CHUNK.name | html %]" class="preference preference-[% CHUNK.class or "short" | html %] mce" rows="20" cols="60">[% CHUNK.value | html %]</textarea>
                         [% ELSE %]
-                        <a class="expand-textarea" style="display: none" href="#">Click to Edit</a>
+                        <a class="expand-textarea" style="display: none" href="#"><i class="fa fa-pencil"></i> Click to edit</a>
                         <textarea name="pref_[% CHUNK.name | html %]" id="pref_[% CHUNK.name | html %]" class="preference preference-[% CHUNK.class or "short" | html %]" rows="10" cols="40">[% CHUNK.value | html %]</textarea>
-                        <a class="collapse-textarea" style="display:none" href="#">Click to collapse</br></a>
+                        <a class="collapse-textarea" style="display:none" href="#"><i class="fa fa-angle-double-up"></i> Click to collapse</br></a>
                         [% END %]
                     [% ELSIF ( CHUNK.type_languages ) %]
                     <dl class="sortable">
@@ -137,9 +144,9 @@
                     </dl>
                     [% END %]
                     [% END %]
-                </div></td>
-            </tr>
-            [% IF ( loop.last ) %]</tbody></table>[% END %]
+                </div></dt>
+            </dl>
+            [% IF ( loop.last ) %][% END %]
             [% END %]
         [% END %]
         <fieldset class="action"><button class="save-all submit" type="submit">Save all [% TAB.tab_title | html %] preferences</button> <a href="/cgi-bin/koha/admin/preferences.pl" class="force_reload cancel">Cancel</a></fieldset>
@@ -193,8 +200,10 @@
         var MSG_SESSION_TIMED_OUT = _( "You need to log in again, your session has timed out" );
         var MSG_DATA_NOT_SAVED = _( "Error; your data might not have been saved" );
         var MSG_LOADING = _( "Loading..." );
+        var MSG_FILTER_NOT_FOUND = _("No matching terms were found on this page");
     </script>
     [% Asset.js("lib/jquery/plugins/humanmsg.js") | $raw %]
+    [% Asset.js("lib/jquery/plugins/jquery.mark.min.js") | $raw %]
     [% Asset.js("js/ajax.js") | $raw %]
     [% Asset.js("js/pages/preferences.js") | $raw %]
     [%# Add WYSIWYG editor for htmlarea system preferences %]
diff --git a/koha-tmpl/intranet-tmpl/prog/js/pages/preferences.js b/koha-tmpl/intranet-tmpl/prog/js/pages/preferences.js
index f7ed5e1..1aba1e2 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/pages/preferences.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/pages/preferences.js
@@ -45,14 +45,6 @@ KOHA.Preferences = {
 
 $( document ).ready( function () {
 
-    $("table.preferences").dataTable($.extend(true, {}, dataTablesDefaults, {
-        "sDom": 't',
-        "aoColumnDefs": [
-            { "aTargets": [ -1 ], "bSortable": false, "bSearchable": false }
-        ],
-        "bPaginate": false
-    }));
-
     function mark_modified() {
         $( this.form ).find( '.save-all' ).prop('disabled', false);
         $( this ).addClass( 'modified' );
@@ -118,29 +110,42 @@ $( document ).ready( function () {
         return false;
     });
 
+    if ( search_jumped ) {
+        document.location.hash = "jumped";
+    }
+
+    $(".name-row").mark( to_highlight );
 
-    $("h3").attr("class","expanded").attr("title",MSG_CLICK_TO_EXPAND);
-    var collapsible = $(".collapsed,.expanded");
 
-    $(collapsible).on("click",function(){
-        var panel = $(this).next("div");
-        if(panel.is(":visible")){
-            $(this).addClass("collapsed").removeClass("expanded").attr("title",MSG_CLICK_TO_EXPAND);
-            panel.hide();
+    // Filtering by mark.js
+    var keyword_filter = $("#keyword_filter"),
+    context = $(".name-row");
+    $("#clear_filter").on("click", function(e){
+        e.preventDefault();
+        keyword_filter.val("").trigger("input");
+    });
+    keyword_filter.on("input", function() {
+        var term = $(this).val();
+        context.show().unmark();
+        if (term) {
+            $("#clear_filter").show();
+            context.mark(term, {
+                done: function( total ) {
+                    if( total > 0 ){
+                        context.not(":has(mark)").hide();
+                    }
+                },
+                noMatch: function(term){
+                    if( $("#filter_empty").length < 1 ){
+                        $("main").prepend("<div id=\"filter_empty\" class=\"dialog alert\">" + MSG_FILTER_NOT_FOUND + "</div>");
+                    }
+                    context.not(":has(mark)").show();
+                }
+            });
         } else {
-            $(this).addClass("expanded").removeClass("collapsed").attr("title",MSG_CLICK_TO_COLLAPSE);
-            panel.show();
+            $("#clear_filter").hide();
+            $("#filter_empty").remove();
         }
     });
 
-    if ( to_highlight ) {
-        var words = to_highlight.split( ' ' );
-        $( '.prefs-tab table' ).find( 'td, th' ).not( '.name-cell' ).each( function ( i, td ) {
-            $.each( words, function ( i, word ) { $( td ).highlight( word ) } );
-        } ).find( 'option, textarea' ).removeHighlight();
-    }
-
-    if ( search_jumped ) {
-        document.location.hash = "jumped";
-    }
-} );
+});
-- 
2.1.4