Libdoc: Persistent shortcut/tag list styles.

pekkaklarck · pekkaklarck · commit f06de6c46164 · 2020-08-28T14:13:58.000+03:00
See issue robotframework#3635 and PR robotframework#3634 for more details.
diff --git a/src/robot/htmldata/libdoc/libdoc.css b/src/robot/htmldata/libdoc/libdoc.css
@@ -43,7 +43,7 @@ a:hover {
     font-weight: normal !important;
     letter-spacing: 0 !important;
 }
-.list-style-toggle {
+.shortcut-list-toggle, .tag-list-toggle {
     margin-bottom: 1em;
     font-size: 0.9em;
 }
diff --git a/src/robot/htmldata/libdoc/libdoc.html b/src/robot/htmldata/libdoc/libdoc.html
@@ -12,6 +12,7 @@
 <link rel="stylesheet" type="text/css" href="print.css" media="print">
 <link rel="stylesheet" type="text/css" href="../common/js_disabled.css" media="all">
 <link rel="stylesheet" type="text/css" href="../common/doc_formatting.css" media="all">
+<script type="text/javascript" src="../common/storage.js"></script>
 <script type="text/javascript" src="../rebot/util.js"></script> <!-- TODO: Should util.js be moved under common? -->
 <script type="text/javascript" src="../lib/jquery.min.js"></script>
 <script type="text/javascript" src="../lib/jquery.tmpl.min.js"></script>
@@ -39,13 +40,16 @@ <h1>Opening library documentation failed</h1>
     $(document).ready(function() {
         parseTemplates();
         document.title = libdoc.name;
+        storage.init('libdoc');
         renderTemplate('base', libdoc, $('body'));
         if (libdoc.inits.length) {
             renderTemplate('importing', libdoc);
         }
         renderTemplate('shortcuts', libdoc);
+        initShortcutListStyle('shortcut');
         if (libdoc.contains_tags) {
             renderTemplate('tags', libdoc);
+            initShortcutListStyle('tag');
         }
         renderTemplate('keywords', libdoc);
         renderTemplate('footer', libdoc);
@@ -81,9 +85,17 @@ <h1>Opening library documentation failed</h1>
         $('.shortcuts a').width('max-content');
     }
 
-    function toggleListStyle(locator) {
-        var separator = $(locator).text()[0];
-        $(locator).html(separator == '\u00b7' ? '<br>' : '&middot;');
+    function initShortcutListStyle(name) {
+        if (storage.get(name + '-list-style', 'compact') != 'compact') {
+            $('.' + name + '-list-separator').html('<br>');
+            $('.' + name + '-list-toggle .switch').prop('checked', true);
+        }
+    }
+
+    function setShortcutListStyle(name) {
+        var compact = !$('.' + name + '-list-toggle .switch').prop('checked');
+        $('.' + name + '-list-separator').html(compact ? '&middot;' : '<br>');
+        storage.set(name + '-list-style', compact ? 'compact' : 'expanded');
     }
 
     function handleKeyDown(event) {
@@ -325,10 +337,10 @@ <h2 id="Importing">Importing</h2>
 <script type="text/x-jquery-tmpl" id="shortcuts-template">
     <h2 id="Shortcuts">Shortcuts</h2>
     {{if keywords.length > 3}}
-    <div class="list-style-toggle">
+    <div class="shortcut-list-toggle">
         <b>List style:</b>&nbsp; Compact
         <label title="Switch between compact list and expanded list">
-            <input type="checkbox" class="switch" onclick="toggleListStyle('.shortcut-separator');">
+            <input type="checkbox" class="switch" onclick="setShortcutListStyle('shortcut');">
             <span class="slider"></span>
         </label>
         Expanded
@@ -340,7 +352,7 @@ <h2 id="Shortcuts">Shortcuts</h2>
         class="{{if $value.matched === false}}no-{{/if}}match"
         title="${$value.shortdoc}">${$value.name}</a>
         {{if $index < keywords.length-1}}
-        <span class="shortcut-separator">&middot;</span>
+        <span class="shortcut-list-separator">&middot;</span>
         {{/if}}
         {{/each}}
     </div>
@@ -349,10 +361,10 @@ <h2 id="Shortcuts">Shortcuts</h2>
 <script type="text/x-jquery-tmpl" id="tags-template">
     <h2 id="Tags">Tags</h2>
     {{if all_tags.length > 3}}
-    <div class="list-style-toggle">
+    <div class="tag-list-toggle">
         <b>List style:</b>&nbsp; Compact
         <label title="Switch between compact list and expanded list">
-            <input type="checkbox" class="switch" onclick="toggleListStyle('.tag-separator');">
+            <input type="checkbox" class="switch" onclick="setShortcutListStyle('tag');">
             <span class="slider"></span>
         </label>
         Expanded
@@ -362,7 +374,7 @@ <h2 id="Tags">Tags</h2>
         {{each all_tags}}
         <a href="javascript:tagSearch('${$value}')"
            title="Show keywords with this tag">${$value}</a>
-        <span class="tag-separator">&middot;</span>
+        <span class="tag-list-separator">&middot;</span>
         {{/each}}
         <a href="javascript:resetKeywords()" class="normal-first-letter"
            title="Show all keywords">[Reset]</a>

Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,7 @@ a:hover {`
`43`	`43`	`font-weight: normal !important;`
`44`	`44`	`letter-spacing: 0 !important;`
`45`	`45`	`}`
`46`		`-.list-style-toggle {`
	`46`	`+.shortcut-list-toggle, .tag-list-toggle {`
`47`	`47`	`margin-bottom: 1em;`
`48`	`48`	`font-size: 0.9em;`
`49`	`49`	`}`