Fix #9574 htmlreport: fix sticky sidebar (#2495)

* rename JS functions
* Use the native font stack
* Update cppcheck-htmlreport
* Use a class for hiding content and toggle that instead. This should improve performance with huge reports.
* reorder selectors
* use classes for header and footer
* remove unneeded clear property (we don't have floats anymore)
* fix wrong `font-size` and `margin` properties
* remove `dir=rtl`

Related ticket: https://trac.cppcheck.net/ticket/9574

htmlreport/cppcheck-htmlreport

@@ -24,7 +24,9 @@ with syntax highlighted source code.
 
 STYLE_FILE = """
 body {
-    font: 13px Arial, Verdana, Sans-Serif;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+    font-size: 13px;
+    line-height: 1.5;
     margin: 0;
     width: auto;
 }
@@ -33,10 +35,72 @@ h1 {
     margin: 10px;
 }
 
-#footer > p {
+.header {
+    border-bottom: thin solid #aaa;
+}
+
+.footer {
+    border-top: thin solid #aaa;
+    font-size: 90%;
+    margin-top: 5px;
+}
+
+.footer ul {
+    list-style-type: none;
+    padding-left: 0;
+}
+
+.footer > p {
     margin: 4px;
 }
 
+.wrapper {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: justify;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+}
+
+#menu,
+#menu_index {
+    text-align: left;
+    width: 350px;
+    height: 90vh;
+    min-height: 200px;
+    overflow: auto;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    padding: 0 15px 15px 15px;
+}
+
+#menu > a {
+    display: block;
+    margin-left: 10px;
+    font-size: 12px;
+    z-index: 1;
+}
+
+#content,
+#content_index {
+    background-color: #fff;
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    padding: 0 15px 15px 15px;
+    width: calc(100% - 350px);
+    height: 100%;
+    overflow-x: auto;
+}
+
+#filename {
+    margin-left: 10px;
+    font-size: 12px;
+    z-index: 1;
+}
+
 .error {
     background-color: #ffb7b7;
 }
@@ -58,13 +122,13 @@ h1 {
     margin-left: 4px;
 }
 
-div.verbose {
+.verbose {
     display: inline-block;
     vertical-align: top;
     cursor: help;
 }
 
-div.verbose div.content {
+.verbose .content {
     display: none;
     position: absolute;
     padding: 10px;
@@ -80,77 +144,11 @@ div.verbose div.content {
     padding: 1px;
 }
 
-#header {
-    border-bottom: thin solid #aaa;
-}
-
-#menu {
-    float: left;
-    margin-top: 5px;
-    text-align: left;
-    width: 150px;
-    /*height: 75%;*/
-    position: fixed;
-    overflow: auto;
-    z-index: 1;
-}
-
-#menu_index {
-    float: left;
-    margin-top: 5px;
-    padding-left: 5px;
-    text-align: left;
-    width: 300px;
-    /*height: 75%;*/
-    position: fixed;
-    overflow: auto;
-    z-index: 1;
-}
-
-#menu > a {
-    display: block;
-    margin-left: 10px;
-    font: 12px;
-    z-index: 1;
-}
-
-#filename {
-    margin-left: 10px;
-    font: 12px;
-    z-index: 1;
-}
-
 .highlighttable {
     background-color: #fff;
     z-index: 10;
     position: relative;
-    margin: -10 px;
+    margin: -10px;
-}
-
-#content {
-    background-color: #fff;
-    -webkit-box-sizing: content-box;
-    -moz-box-sizing: content-box;
-    box-sizing: content-box;
-    float: left;
-    margin: 5px;
-    margin-left: 10px;
-    padding: 0 10px 10px 10px;
-    width: 80%;
-    padding-left: 150px;
-}
-
-#content_index {
-    background-color: #fff;
-    -webkit-box-sizing: content-box;
-    -moz-box-sizing: content-box;
-    box-sizing: content-box;
-    float: left;
-    margin: 5px;
-    margin-left: 10px;
-    padding: 0 10px 10px 10px;
-    width: 80%;
-    padding-left: 300px;
 }
 
 .linenos {
@@ -159,16 +157,8 @@ div.verbose div.content {
     padding-right: 6px;
 }
 
-#footer {
+.d-none {
-    border-top: thin solid #aaa;
+    display: none;
-    clear: both;
-    font-size: 90%;
-    margin-top: 5px;
-}
-
-#footer ul {
-    list-style-type: none;
-    padding-left: 0;
 }
 """
 
@@ -185,10 +175,13 @@ HTML_HEAD = """
     <script>
       function getStyle(el, styleProp) {
         var y;
-        if (el.currentStyle)
+
+        if (el.currentStyle) {
           y = el.currentStyle[styleProp];
-        else if (window.getComputedStyle)
+        } else if (window.getComputedStyle) {
           y = document.defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
+        }
+
         return y;
       }
 
@@ -205,11 +198,11 @@ HTML_HEAD = """
         }
       }
 
-      function init_expandables() {
+      function initExpandables() {
-        var elts = document.querySelectorAll(".expandable");
+        var elements = document.querySelectorAll(".expandable");
 
-        for (var i = 0, len = elts.length; i < len; i++) {
+        for (var i = 0, len = elements.length; i < len; i++) {
-          var el = elts[i];
+          var el = elements[i];
           var clickable = el.querySelector("span");
           var marker = clickable.querySelector(".marker");
           var content = el.querySelector(".content");
@@ -221,42 +214,40 @@ HTML_HEAD = """
         }
       }
 
-      function set_class_display(c, st) {
+      function toggleDisplay(id) {
-        var elements = document.querySelectorAll("." + c);
+        var elements = document.querySelectorAll("." + id);
 
         for (var i = 0, len = elements.length; i < len; i++) {
-          elements[i].style.display = st;
+          elements[i].classList.toggle("d-none");
         }
       }
 
-      function toggle_class_visibility(id) {
+      function toggleAll() {
-        var box = document.getElementById(id);
+        var elements = document.querySelectorAll("input");
-        set_class_display(id, box.checked ? "" : "none");
-      }
 
-      function toggle_all() {
+        // starting from 1 since 0 is the "toggle all" input
-        var elts = document.querySelectorAll("input");
+        for (var i = 1, len = elements.length; i < len; i++) {
+          var el = elements[i];
 
-        for (var i = 1; i < elts.length; i++) {
-          var el = elts[i];
           if (el.checked) {
             el.checked = false;
           } else {
             el.checked = true;
           }
-          toggle_class_visibility(el.id);
+
+          toggleDisplay(el.id);
         }
       }
-
+      window.addEventListener("load", initExpandables);
-      window.addEventListener("load", init_expandables);
     </script>
   </head>
   <body>
-    <div id="header">
+    <div id="header" class="header">
-      <h1>Cppcheck report - %s: %s </h1>
+      <h1>Cppcheck report - %s: %s</h1>
     </div>
-    <div id="menu" dir="rtl">
+    <div class="wrapper">
-     <p id="filename"><a href="index.html">Defects:</a> %s</p>
+      <div id="menu">
+       <p id="filename"><a href="index.html">Defects:</a> %s</p>
 """
 
 HTML_HEAD_END = """
@@ -265,13 +256,14 @@ HTML_HEAD_END = """
 """
 
 HTML_FOOTER = """
+      </div> <!-- /.wrapper -->
     </div>
-    <div id="footer">
+    <div id="footer" class="footer">
       <p>
-       Cppcheck %s - a tool for static C/C++ code analysis<br>
+        Cppcheck %s - a tool for static C/C++ code analysis<br>
-       <br>
+        <br>
-       Internet: <a href="http://cppcheck.net">http://cppcheck.net</a><br>
+        Internet: <a href="http://cppcheck.net">http://cppcheck.net</a><br>
-       IRC: <a href="irc://irc.freenode.net/cppcheck">irc://irc.freenode.net/cppcheck</a><br>
+        IRC: <a href="irc://irc.freenode.net/cppcheck">irc://irc.freenode.net/cppcheck</a><br>
       </p>
     </div>
   </body>
@@ -586,13 +578,13 @@ if __name__ == '__main__':
         except IndexError:
             cnt_min = 0
 
-        stat_fmt = "\n            <tr><td><input type=\"checkbox\" onclick=\"toggle_class_visibility(this.id)\" id=\"{}\" name=\"{}\" checked></td><td>{}</td><td>{}</td></tr>"
+        stat_fmt = "\n            <tr><td><input type=\"checkbox\" onclick=\"toggleDisplay(this.id)\" id=\"{}\" name=\"{}\" checked></td><td>{}</td><td>{}</td></tr>"
         for occurrences in reversed(range(cnt_min, cnt_max + 1)):
             for _id in [k for k, v in sorted(counter.items()) if v == occurrences]:
                 stat_html.append(stat_fmt.format(_id, _id, dict(counter.most_common())[_id], _id))
 
-        output_file.write(HTML_HEAD.replace('id="menu" dir="rtl"', 'id="menu_index"', 1).replace("Defects:", "Defect summary;", 1) % (options.title, '', options.title, '', ''))
+        output_file.write(HTML_HEAD.replace('id="menu"', 'id="menu_index"', 1).replace("Defects:", "Defect summary;", 1) % (options.title, '', options.title, '', ''))
-        output_file.write('\n       <label><input type="checkbox" onclick="toggle_all()" checked> Toggle all</label>')
+        output_file.write('\n       <label><input type="checkbox" onclick="toggleAll()" checked> Toggle all</label>')
         output_file.write('\n       <table>')
         output_file.write('\n           <tr><th>Show</th><th>#</th><th>Defect ID</th></tr>')
         output_file.write(''.join(stat_html))
@@ -679,7 +671,7 @@ if __name__ == '__main__':
 
     with io.open(os.path.join(options.report_dir, 'stats.html'), 'w') as stats_file:
 
-        stats_file.write(HTML_HEAD.replace('id="menu" dir="rtl"', 'id="menu_index"', 1).replace("Defects:", "Back to summary", 1) % (options.title, '', options.title, 'Statistics', ''))
+        stats_file.write(HTML_HEAD.replace('id="menu"', 'id="menu_index"', 1).replace("Defects:", "Back to summary", 1) % (options.title, '', options.title, 'Statistics', ''))
         stats_file.write(HTML_HEAD_END.replace("content", "content_index", 1))
 
         for sev in SEVERITIES: