[analyzer] Add keyboard shortcuts to report.html

[dcoughlin]

Summary

Adds three keyboard shortcuts to report.html
to make navigation faster:

Jump to next path: j
Jump to previous path: k
Show Help: ?

[dcoughlin]

Thanks for the patch! This looks very useful. What browsers does the JavaScript support?

One thing I noticed is that after immediately loading a new report page the 'j' and 'k' shortcuts don't work for me. In Safari, I get:

TypeError: null is not an object (evaluating 'document.location.hash.match(/Path\d+|EndPath/)')
Jumpkeyboard-shortcuts.js:3
onkeydownkeyboard-shortcuts.js:29

After clicking on the location link in the summary the keys do work. (I guess this has to with the # in the location?) Would it be possible to make these navigation keys go to the end of the path after the page has loaded but before the user has clicked on the location link?

tools/scan-build/keyboard-shortcuts.js

24

Will this work on international keyboards where ? is not Shift + '/'? (E.g., AZERTY or QWERTZ?)

[skomski]

Included mousetrap to get keyboard shortcuts working on all international keyboards.
Fixed behaviour without hash path present: Jump to #Path1 on j or k

[dcoughlin]

Thanks for the update. Unfortunately, we can't accept the mousetrap code. Any code contributed to clang needs to be under the UIUC license. The original copyright owner would need to contribute the code under that license.

I think it would be fine to revert to your previous version -- but with a FIXME stating that this doesn't work on non-QWERTY keyboards.

Other than that, this LGTM.

[dcoughlin]

Commandeering and closing this revision as it has been more than a year.

tools/scan-build/keyboard-shortcuts.js

+/* mousetrap v1.5.3 craig.is/killing/mice */
+(function(C,r,g){function t(a,b,h){a.addEventListener?a.addEventListener(b,h,!1):a.attachEvent("on"+b,h)}function x(a){if("keypress"==a.type){var b=String.fromCharCode(a.which);a.shiftKey||(b=b.toLowerCase());return b}return l[a.which]?l[a.which]:p[a.which]?p[a.which]:String.fromCharCode(a.which).toLowerCase()}function D(a){var b=[];a.shiftKey&&b.push("shift");a.altKey&&b.push("alt");a.ctrlKey&&b.push("ctrl");a.metaKey&&b.push("meta");return b}function u(a){return"shift"==a||"ctrl"==a||"alt"==a||
+"meta"==a}function y(a,b){var h,c,e,g=[];h=a;"+"===h?h=["+"]:(h=h.replace(/\+{2}/g,"+plus"),h=h.split("+"));for(e=0;e<h.length;++e)c=h[e],z[c]&&(c=z[c]),b&&"keypress"!=b&&A[c]&&(c=A[c],g.push("shift")),u(c)&&g.push(c);h=c;e=b;if(!e){if(!k){k={};for(var m in l)95<m&&112>m||l.hasOwnProperty(m)&&(k[l[m]]=m)}e=k[h]?"keydown":"keypress"}"keypress"==e&&g.length&&(e="keydown");return{key:c,modifiers:g,action:e}}function B(a,b){return null===a||a===r?!1:a===b?!0:B(a.parentNode,b)}function c(a){function b(a){a=
+a||{};var b=!1,n;for(n in q)a[n]?b=!0:q[n]=0;b||(v=!1)}function h(a,b,n,f,c,h){var g,e,l=[],m=n.type;if(!d._callbacks[a])return[];"keyup"==m&&u(a)&&(b=[a]);for(g=0;g<d._callbacks[a].length;++g)if(e=d._callbacks[a][g],(f||!e.seq||q[e.seq]==e.level)&&m==e.action){var k;(k="keypress"==m&&!n.metaKey&&!n.ctrlKey)||(k=e.modifiers,k=b.sort().join(",")===k.sort().join(","));k&&(k=f&&e.seq==f&&e.level==h,(!f&&e.combo==c||k)&&d._callbacks[a].splice(g,1),l.push(e))}return l}function g(a,b,n,f){d.stopCallback(b,
+b.target||b.srcElement,n,f)||!1!==a(b,n)||(b.preventDefault?b.preventDefault():b.returnValue=!1,b.stopPropagation?b.stopPropagation():b.cancelBubble=!0)}function e(a){"number"!==typeof a.which&&(a.which=a.keyCode);var b=x(a);b&&("keyup"==a.type&&w===b?w=!1:d.handleKey(b,D(a),a))}function l(a,c,n,f){function e(c){return function(){v=c;++q[a];clearTimeout(k);k=setTimeout(b,1E3)}}function h(c){g(n,c,a);"keyup"!==f&&(w=x(c));setTimeout(b,10)}for(var d=q[a]=0;d<c.length;++d){var p=d+1===c.length?h:e(f||
+y(c[d+1]).action);m(c[d],p,f,a,d)}}function m(a,b,c,f,e){d._directMap[a+":"+c]=b;a=a.replace(/\s+/g," ");var g=a.split(" ");1<g.length?l(a,g,b,c):(c=y(a,c),d._callbacks[c.key]=d._callbacks[c.key]||[],h(c.key,c.modifiers,{type:c.action},f,a,e),d._callbacks[c.key][f?"unshift":"push"]({callback:b,modifiers:c.modifiers,action:c.action,seq:f,level:e,combo:a}))}var d=this;a=a||r;if(!(d instanceof c))return new c(a);d.target=a;d._callbacks={};d._directMap={};var q={},k,w=!1,p=!1,v=!1;d._handleKey=function(a,
+c,e){var f=h(a,c,e),d;c={};var k=0,l=!1;for(d=0;d<f.length;++d)f[d].seq&&(k=Math.max(k,f[d].level));for(d=0;d<f.length;++d)f[d].seq?f[d].level==k&&(l=!0,c[f[d].seq]=1,g(f[d].callback,e,f[d].combo,f[d].seq)):l||g(f[d].callback,e,f[d].combo);f="keypress"==e.type&&p;e.type!=v||u(a)||f||b(c);p=l&&"keydown"==e.type};d._bindMultiple=function(a,b,c){for(var d=0;d<a.length;++d)m(a[d],b,c)};t(a,"keypress",e);t(a,"keydown",e);t(a,"keyup",e)}var l={8:"backspace",9:"tab",13:"enter",16:"shift",17:"ctrl",18:"alt",
+20:"capslock",27:"esc",32:"space",33:"pageup",34:"pagedown",35:"end",36:"home",37:"left",38:"up",39:"right",40:"down",45:"ins",46:"del",91:"meta",93:"meta",224:"meta"},p={106:"*",107:"+",109:"-",110:".",111:"/",186:";",187:"=",188:",",189:"-",190:".",191:"/",192:"`",219:"[",220:"\\",221:"]",222:"'"},A={"~":"`","!":"1","@":"2","#":"3",$:"4","%":"5","^":"6","&":"7","*":"8","(":"9",")":"0",_:"-","+":"=",":":";",'"':"'","<":",",">":".","?":"/","|":"\\"},z={option:"alt",command:"meta","return":"enter",
+escape:"esc",plus:"+",mod:/Mac|iPod|iPhone|iPad/.test(navigator.platform)?"meta":"ctrl"},k;for(g=1;20>g;++g)l[111+g]="f"+g;for(g=0;9>=g;++g)l[g+96]=g;c.prototype.bind=function(a,b,c){a=a instanceof Array?a:[a];this._bindMultiple.call(this,a,b,c);return this};c.prototype.unbind=function(a,b){return this.bind.call(this,a,function(){},b)};c.prototype.trigger=function(a,b){if(this._directMap[a+":"+b])this._directMap[a+":"+b]({},a);return this};c.prototype.reset=function(){this._callbacks={};this._directMap=
+{};return this};c.prototype.stopCallback=function(a,b){return-1<(" "+b.className+" ").indexOf(" mousetrap ")||B(b,this.target)?!1:"INPUT"==b.tagName||"SELECT"==b.tagName||"TEXTAREA"==b.tagName||b.isContentEditable};c.prototype.handleKey=function(){return this._handleKey.apply(this,arguments)};c.init=function(){var a=c(r),b;for(b in a)"_"!==b.charAt(0)&&(c[b]=function(b){return function(){return a[b].apply(a,arguments)}}(b))};c.init();C.Mousetrap=c;"undefined"!==typeof module&&module.exports&&(module.exports=
+c);"function"===typeof define&&define.amd&&define(function(){return c})})(window,document);
+
+
 (function () {
+'use strict';
 
 function Jump(matchTarget, lastBlock) {
-  var match = document.location.hash.match(/Path\d+|EndPath/)[0];
-  var matches = document.querySelectorAll('#' + match + ' .PathNav')
+  var match = document.location.hash.match(/Path\d+|EndPath/);
+  if (!match) {
+    document.location.hash = '#Path1';
+    return;
+  }
+  var matches = document.querySelectorAll('#' + match[0] + ' .PathNav');
   if (matches.length == 2) {
     document.location = matches[matchTarget].children[0].href;
   } else {

       document.location = matches[0].children[0].href;
     }
   }
-};
+}
 
 function ShowHelp() {
-  alert("Keyboard shortcuts:\n\n" +
-        "Jump to next path: j\n"  +
-        "Jump to previous path: k\n");
+  alert('Keyboard shortcuts:\n\n' +
+        'Jump to next path: j\n'  +
+        'Jump to previous path: k\n');
 }
 
-const KEYS = {
-  J: 74,
-  K: 75,
-  SLASH: 191
-}
+Mousetrap.bind('j', function() {
+  Jump(1, '#EndPath');
+});
 
-document.onkeydown = function (e) {
-  switch(e.keyCode) {
-    case KEYS.J:
-      Jump(1, '#EndPath');
-      break;
-    case KEYS.K:
-      Jump(0, '#Path1');
-      break;
-    case KEYS.SLASH:
-      ShowHelp();
-      break;
-  }
-};
+Mousetrap.bind('k', function() {
+  Jump(0, '#Path1');
+});
+
+Mousetrap.bind('?', function() {
+  ShowHelp();
+});
 
 }());