contrib/pep8analysis/www/index.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4         <title>Pep/8 Analysis</title>
   5
   6     <meta charset="utf-8">
   7     <meta http-equiv="X-UA-Compatible" content="IE=edge">
   8         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   9
  10         <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  11         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  12         <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  13
  14         <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.2.0/codemirror.css">
  15         <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.2.0/codemirror.min.js"></script>
  16         <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.2.0/mode/z80/z80.js"></script>
  17
  18         <script>
  19
  20                 var _gaq = _gaq || [];
  21                 _gaq.push(['_setAccount', 'UA-574578-5']);
  22                 _gaq.push(['_trackPageview']);
  23
  24                 (function() {
  25                         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  26                         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  27                         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  28                 })();
  29
  30                 // Both Viz and Pep8 use emscripten
  31                 // We put aside the module of each program and bring it back before each use
  32                 var VizModule = null
  33
  34                 function ready() {
  35                         $("#loading").hide()
  36                         $("#analyze").prop('disabled', false)
  37                 }
  38
  39                 function complete() {
  40                         // Show and set color of output console
  41                         $("#consolePanel").removeClass("panel-success panel-warning panel-danger")
  42                         var analysis = $("#console").text();
  43                         if (analysis.indexOf("Error") >= 0) {
  44                                 $("#consolePanel").addClass("panel-danger")
  45                                 _gaq.push(['_trackEvent', 'Result', 'Error'])
  46                         }
  47                         else if (analysis.indexOf("Warning") >= 0) {
  48                                 $("#consolePanel").addClass("panel-warning")
  49                                 _gaq.push(['_trackEvent', 'Result', 'Warning'])
  50                         }
  51                         else {
  52                                 $("#consolePanel").addClass("panel-success")
  53                                 _gaq.push(['_trackEvent', 'Result', 'Success'])
  54                         }
  55                         $("#working").hide()
  56                         $("#consolePanel").show()
  57                         $("#analyze").prop('disabled', false)
  58                 }
  59
  60                 function exception(ex) {
  61                         console.debug("Tool invocation failed, with:\n" + $("#console").text() + "\n" + ex )
  62                         _gaq.push(['_trackEvent', 'Bug', 'Analysis', $("#console").text()])
  63                         $("#fatal-error").show()
  64                         $("#analyze").prop('disabled', true)
  65                 }
  66
  67                 function stdout(text) {
  68                         $("#console").append(text + "<br>")
  69                 }
  70
  71                 function exec() {
  72                         $("#working").show()
  73                         $("#consolePanel").hide()
  74
  75                         // Clean output console
  76                         $("#console").text("")
  77
  78                         // Get code
  79                         var input = editor.getValue()
  80
  81                         // Update GA stats
  82                         _gaq.push(['_trackEvent', 'Action', 'Analyze'])
  83
  84                         // Invoke the full Nit program
  85                         if(typeof(Worker) !== "undefined") {
  86                                 // Async version
  87                                 $("#analyze").prop('disabled', true)
  88                                 worker.postMessage(input)
  89                         } else {
  90                                 // Sync version
  91                                 _gaq.push(['_trackEvent', 'Bug', 'No Webworkers', $("#console").text()])
  92                                 Module = Pep8Module
  93                                 try {
  94                                         run_analysis = Module.cwrap('pep8analysis_web___NativeString_run_analysis', null, ['string'])
  95                                         run_analysis(input)
  96
  97                                         complete()
  98                                 } catch(e) {
  99                                         exception(e)
 100                                 }
 101                         }
 102                 }
 103
 104                 function load(file) {
 105                         // Load a sample program
 106                         $.get('samples/' + file, function(data){
 107                                 editor.setValue(data)
 108                         })
 109                 }
 110
 111                 function show_graph(source) {
 112                         Module = VizModule
 113                         var res = Viz(source, "svg", "dot")
 114                         VizModule = Module
 115                         $("#graph").html(res)
 116                 }
 117         </script>
 118 </head>
 119 <body>
 120
 121 <nav class="navbar navbar-default" role="navigation">
 122   <div class="container-fluid">
 123     <div class="navbar-header">
 124       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
 125         <span class="sr-only">Toggle navigation</span>
 126                 <span class="icon-bar"></span>
 127                 <span class="icon-bar"></span>
 128                 <span class="icon-bar"></span>
 129       </button>
 130       <a class="navbar-brand" href="http://xymus.net/">Xymus.net</a>
 131     </div>
 132
 133     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 134       <ul class="nav navbar-nav">
 135         <li><a href="http://xymus.net/ens/">Enseignement</a></li>
 136         <li class="active"><a href="http://pep8.xymus.net/">Pep/8 Analysis</a></li>
 137         <li><a href="http://tnitter.xymus.net/">Tnitter</a></li>
 138         <li><a href="http://benitlux.xymus.net/">Benitlux</a></li>
 139                 <li><a href="http://xymus.net/opportunity/">Opportunité</a></li>
 140         <li><a href="http://nitlanguage.org/">Nit</a></li>
 141       </ul>
 142
 143       <ul class="nav navbar-nav pull-right">
 144         <li><a href="https://github.com/nitlang/nit/tree/master/contrib/pep8analysis/">Source and manual</a></li>
 145         <li><a href="https://code.google.com/p/pep8-1/">Pep/8 project</a></li>
 146       </ul>
 147     </div>
 148   </div>
 149 </nav>
 150
 151 <div class="container-fluid">
 152         <div class="alert alert-warning" id="loading">Loading the tool... This may take some time.</div>
 153         <div class="alert alert-danger" id="fatal-error" style="display: none;">
 154                 <h2>The JavaScript tool crashed</h2>
 155                 <p>Please refresh the page to try again, or use Firefox. An error report has been sent to the developer</p>
 156         </div>
 157
 158         <div class="row">
 159           <div class="col-sm-12 col-lg-6">
 160                 <div class="panel panel-default" id="panelIntro">
 161                         <div class="panel-heading">Description and Usage
 162                                 <button type="button" class="close" onClick="$('#panelIntro').hide()" aria-hidden="true">&times;</button>
 163                         </div>
 164                         <div class="panel-body" id="code-panel">
 165                                 <p>This tools finds strange behavior in Pep/8 programs by exploring all detectable execution paths.</p>
 166                                 <p>Upon analyzing a program, this tool reports dead code blocks and data within the execution path. It also detects wrongful use of data such as accessing uninitialized memory, printing a word and reading code.</p>
 167                                 <p><strong>To use:</strong> copy-paste your code in the source code block and launch the analysis using the <em>Analyze program</em> button.</p>
 168                         </div>
 169                 </div>
 170
 171                 <div class="panel panel-default">
 172                         <div class="panel-heading">Pep/8 Source Code</div>
 173                         <div class="panel-body" id="code-panel">
 174                                 <textarea id="listing"></textarea>
 175                                 <script>
 176                                         var editor = CodeMirror.fromTextArea(listing, {
 177                                                 lineNumbers: true,
 178                                                 mode: "z80"
 179                                         });
 180                                         editor.setSize("100%", 500);
 181                                 </script>
 182
 183                                 <div class="btn-group">
 184                                   <button type="button" class="btn btn-default" id="analyze" onclick="exec();" disabled>Analyze program</button>
 185                                   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
 186                                          <span class="glyphicon glyphicon-folder-open"></span>
 187                                         Load sample program
 188                                         <span class="caret"></span>
 189                                   </button>
 190                                   <ul class="dropdown-menu">
 191                                         <li><a onclick="load('02-fibo.pep')">fibo.pep - clean program </a></li>
 192                                         <li><a onclick="load('06-calc-non-pur.pep');">calc-non-pur.pep - self rewriting program </a></li>
 193                                         <li><a onclick="load('types.pep');"/>types.pep - strange data manipulation </a></li>
 194                                         <li><a onclick="load('directive-in-code.pep');">directive-in-code.pep - mixed directives and instructions</a></li>
 195                                   </ul>
 196                                 </div>
 197                         </div>
 198                 </div>
 199           </div>
 200
 201           <div class="clearfix visible-xs"></div>
 202           <div class="col-sm-12 col-lg-6">
 203                 <div class="alert alert-warning" id="working" style="display: none;">The tool is evaluating all possible execution paths... This may take some time.</div>
 204                 <div class="panel" id="consolePanel" style="display: none;">
 205                         <div class="panel-heading">Analysis Result</div>
 206                         <div class="panel-body">
 207                                 <samp id="console"></samp>
 208                                 <button type="button" class="btn btn-default" onclick="$('#panelGraph').show();$('#panelGraphExp').show();">
 209                                         Show control flow graph</button>
 210                                 <em class="pull-right" id="panelGraphExp" style="display: none;">The graph is at the bottom of the page...</em>
 211                         </div>
 212                 </div>
 213           </div>
 214
 215           <div class="col-sm-12 col-lg-6">
 216                 <div class="panel panel-default" id="panelRef">
 217                         <div class="panel-heading">Output Documentation
 218                                 <button type="button" class="close" onClick="$('#panelRef').hide()" aria-hidden="true">&times;</button>
 219                         </div>
 220                         <div class="panel-body" id="code-panel">
 221                                 <h4>Line and memory references</h4>
 222                                 <p>Shorthand are used in the error messages, some refer directly to the line numbers others to the address in the memory of the running program.</p>
 223                                 <table class="table table-striped">
 224                                 <tr>
 225                                         <th>Shorthand</th>
 226                                         <th>Description</th>
 227                                 </tr><tr>
 228                                         <td>web:5</td>
 229                                         <td>Source line 5</td>
 230                                 </tr><tr>
 231                                         <td>L8</td>
 232                                         <td>Source line 8</td>
 233                                 </tr><tr>
 234                                         <td>rA, rX</td>
 235                                         <td>Registers A, X</td>
 236                                 </tr><tr>
 237                                         <td>m24</td>
 238                                         <td>Memory at address 24 (bytes)</td>
 239                                 </tr><tr>
 240                                         <td>instr@m24</td>
 241                                         <td>Intruction at address 24 (bytes). Usually, this would be the (24/4+1=) 7th instruction, if there is no data blocks. And the 7th line if there is no data blocks or comments.</td>
 242                                 </tr>
 243                                 </table>
 244
 245                                 <h4>Common errors and warnings</h4>
 246
 247                                 <p>Note that the tool reports <em>possible</em> errors and strange behaviors. For an advanced or expert user, it may raise errors on correct code.</p>
 248
 249                                 <table class="table table-striped">
 250                                 <tr>
 251                                         <th>Error</th>
 252                                         <th>Meaning</th>
 253                                 </tr><tr>
 254                                         <td>... the CFG may be wrong</td>
 255                                         <td>The program structure is too complex to analyze. This happens when jumping to dynamic addresses and when using switch statements.</td>
 256                                 </tr><tr>
 257                                         <td>unreachable instructions</td>
 258                                         <td>There's dead code.</td>
 259                                 </tr><tr>
 260                                         <td>data in program flow</td>
 261                                         <td>The program may execute raw data. There's probably a <code>BR</code> missing.</td>
 262                                 </tr><tr>
 263                                         <td>overwriting code at...</td>
 264                                         <td>An instruction writes over an existing instruction (probably your code).</td>
 265                                 </tr><tr>
 266                                         <td>expected "type" in "address", got "something"</td>
 267                                         <td>An instruction uses data with an unexepected type. It may be a <code>CHARO</code> using something other than a char. Or a copy of uninitialized data over an initialized word.<br>
 268                                         </td>
 269                                 </tr>
 270                                 </table>
 271                         </div>
 272                 </div>
 273           </div>
 274         </div>
 275
 276           <div class="col-sm-12 col-lg-12">
 277                 <div class="panel panel-default" id="panelGraph" style="display: none;">
 278                         <div class="panel-heading">Control Flow Graph (CFG)
 279                                 <button type="button" class="close" onClick="$('#panelGraph').hide()" aria-hidden="true">&times;</button>
 280                         </div>
 281                         <div class="panel-body">
 282                                 <div id="graph"></div>
 283                         </div>
 284                 </div>
 285           </div>
 286
 287         <script>
 288                 if(typeof(Worker) !== "undefined") {
 289                         // Async version
 290                         var worker = new Worker("worker.js")
 291                         worker.onmessage = function(event) {
 292                                 if (event.data.type == "ready") {
 293                                         ready()
 294                                 } else if (event.data.type == "complete") {
 295                                         complete()
 296                                 } else if (event.data.type == "exception") {
 297                                         exception(event.data.data)
 298                                 } else if (event.data.type == "stdout") {
 299                                         stdout(event.data.data)
 300                                 } else if (event.data.type == "show_graph") {
 301                                         show_graph(event.data.data)
 302                                 } else {
 303                                         console.out(event.data)
 304                                 }
 305                         }
 306                 } else {
 307                         // Synced version
 308                         $(document).ready(function() {
 309                                 // Report full loading
 310                                 $("#loading").hide()
 311                                 $("#analyze").prop('disabled', false)
 312                         });
 313                         var Module = {
 314                                 'print': stdout,
 315                                 'TOTAL_MEMORY': 512000000
 316                         }
 317                         importScripts("pep8analysis.js")
 318                         var Pep8Module = Module
 319                 }
 320         </script>
 321         <script src="viz.js"></script>
 322 </div>
 323
 324 </body>
 325 </html>