update all indirect references to native strings
[nit.git] / contrib / pep8analysis / www / index.html
index 1f72b50..045087f 100644 (file)
        <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.2.0/codemirror.css">
        <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.2.0/codemirror.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.2.0/mode/z80/z80.js"></script>
+
        <script>
-               // Redirect print to HTML
-               var Module = {
-                       'print': function(text) {
-                               $("#console").append(text + "<br>")
-                       },
-                       'noInitialRun': true,
-               }
 
-               $(document).ready(function() {
-                       // Report full loading
+               var _gaq = _gaq || [];
+               _gaq.push(['_setAccount', 'UA-574578-5']);
+               _gaq.push(['_trackPageview']);
+
+               (function() {
+                       var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+                       ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+                       var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+               })();
+
+               // Both Viz and Pep8 use emscripten
+               // We put aside the module of each program and bring it back before each use
+               var VizModule = null
+
+               function ready() {
                        $("#loading").hide()
                        $("#analyze").prop('disabled', false)
-               });
+               }
+
+               function complete() {
+                       // Show and set color of output console
+                       $("#consolePanel").removeClass("panel-success panel-warning panel-danger")
+                       var analysis = $("#console").text();
+                       if (analysis.indexOf("Error") >= 0) {
+                               $("#consolePanel").addClass("panel-danger")
+                               _gaq.push(['_trackEvent', 'Result', 'Error'])
+                       }
+                       else if (analysis.indexOf("Warning") >= 0) {
+                               $("#consolePanel").addClass("panel-warning")
+                               _gaq.push(['_trackEvent', 'Result', 'Warning'])
+                       }
+                       else {
+                               $("#consolePanel").addClass("panel-success")
+                               _gaq.push(['_trackEvent', 'Result', 'Success'])
+                       }
+                       $("#working").hide()
+                       $("#consolePanel").show()
+                       $("#analyze").prop('disabled', false)
+               }
+
+               function exception(ex) {
+                       console.debug("Tool invocation failed, with:\n" + $("#console").text() + "\n" + ex )
+                       _gaq.push(['_trackEvent', 'Bug', 'Analysis', $("#console").text()])
+                       $("#fatal-error").show()
+                       $("#analyze").prop('disabled', true)
+               }
+
+               function stdout(text) {
+                       $("#console").append(text + "<br>")
+               }
 
                function exec() {
+                       $("#working").show()
+                       $("#consolePanel").hide()
+
                        // Clean output console
                        $("#console").text("")
 
                        // Get code
                        var input = editor.getValue()
 
+                       // Update GA stats
+                       _gaq.push(['_trackEvent', 'Action', 'Analyze'])
+
                        // Invoke the full Nit program
-               ret = Module['callMain']([input])
+                       if(typeof(Worker) !== "undefined") {
+                               // Async version
+                               $("#analyze").prop('disabled', true)
+                               worker.postMessage(input)
+                       } else {
+                               // Sync version
+                               _gaq.push(['_trackEvent', 'Bug', 'No Webworkers', $("#console").text()])
+                               Module = Pep8Module
+                               try {
+                                       run_analysis = Module.cwrap('pep8analysis_web___CString_run_analysis', null, ['string'])
+                                       run_analysis(input)
 
-                       // Shot and set color of output console
-                       $("#consolePanel").removeClass("panel-success panel-warning panel-danger")
-                       $("#consolePanel").show()
-                       var analysis = $("#consolePanel").text();
-                       if (analysis.indexOf("Error") >= 0)
-                               $("#consolePanel").addClass("panel-danger")
-                       else if (analysis.indexOf("Warning") >= 0)
-                               $("#consolePanel").addClass("panel-warning")
-                       else
-                               $("#consolePanel").addClass("panel-success")
+                                       complete()
+                               } catch(e) {
+                                       exception(e)
+                               }
+                       }
                }
 
                function load(file) {
                                editor.setValue(data)
                        })
                }
+
+               function show_graph(source) {
+                       Module = VizModule
+                       var res = Viz(source, "svg", "dot")
+                       VizModule = Module
+                       $("#graph").html(res)
                }
        </script>
 </head>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
       </button>
-      <a class="navbar-brand">Pep/8 Analysis</a>
+      <a class="navbar-brand" href="http://xymus.net/">Xymus.net</a>
     </div>
 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
       <ul class="nav navbar-nav">
-        <li class="active"><a>Web interface</a></li>
-        <li><a href="https://github.com/privat/nit/tree/master/contrib/pep8analysis/">Tool source and manual</a></li>
+        <li><a href="http://xymus.net/ens/">Enseignement</a></li>
+        <li><a href="http://xymus.net/opportunity/"><img height="22px" src="/static/opportunity-small-fr.png"></a></li>
+        <li><a href="http://xymus.net/tnitter/"><img height="22px" src="/static/tnitter-small.png"></a></li>
+        <li class="active"><a href="http://xymus.net/pep8/">Pep/8 Analysis</a></li>
+        <li><a href="http://xymus.net/benitlux/">Benitlux</a></li>
       </ul>
-      <ul class="nav navbar-nav navbar-right">
-        <li><a href="http://nitlanguage.org/">nitlanguage.org</a></li>
+
+      <ul class="nav navbar-nav pull-right">
+        <li><a href="https://github.com/nitlang/nit/tree/master/contrib/pep8analysis/">Source and manual</a></li>
         <li><a href="https://code.google.com/p/pep8-1/">Pep/8 project</a></li>
       </ul>
     </div>
 </nav>
 
 <div class="container-fluid">
-
        <div class="alert alert-warning" id="loading">Loading the tool... This may take some time.</div>
+       <div class="alert alert-danger" id="fatal-error" style="display: none;">
+               <h2>The JavaScript tool crashed</h2>
+               <p>Please refresh the page to try again, or use Firefox. An error report has been sent to the developer</p>
+       </div>
 
        <div class="row">
          <div class="col-sm-12 col-lg-6">
+               <div class="panel panel-default" id="panelIntro">
+                       <div class="panel-heading">Description and Usage
+                               <button type="button" class="close" onClick="$('#panelIntro').hide()" aria-hidden="true">&times;</button>
+                       </div>
+                       <div class="panel-body" id="code-panel">
+                               <p>This tools finds strange behavior in Pep/8 programs by exploring all detectable execution paths.</p>
+                               <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>
+                               <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>
+                       </div>
+               </div>
+
                <div class="panel panel-default">
                        <div class="panel-heading">Pep/8 Source Code</div>
                        <div class="panel-body" id="code-panel">
 
          <div class="clearfix visible-xs"></div>
          <div class="col-sm-12 col-lg-6">
+               <div class="alert alert-warning" id="working" style="display: none;">The tool is evaluating all possible execution paths... This may take some time.</div>
                <div class="panel" id="consolePanel" style="display: none;">
                        <div class="panel-heading">Analysis Result</div>
                        <div class="panel-body">
                                <samp id="console"></samp>
+                               <button type="button" class="btn btn-default" onclick="$('#panelGraph').show();$('#panelGraphExp').show();">
+                                       Show control flow graph</button>
+                               <em class="pull-right" id="panelGraphExp" style="display: none;">The graph is at the bottom of the page...</em>
+                       </div>
+               </div>
+         </div>
+
+         <div class="col-sm-12 col-lg-6">
+               <div class="panel panel-default" id="panelRef">
+                       <div class="panel-heading">Output Documentation
+                               <button type="button" class="close" onClick="$('#panelRef').hide()" aria-hidden="true">&times;</button>
+                       </div>
+                       <div class="panel-body" id="code-panel">
+                               <h4>Line and memory references</h4>
+                               <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>
+                               <table class="table table-striped">
+                               <tr>
+                                       <th>Shorthand</th>
+                                       <th>Description</th>
+                               </tr><tr>
+                                       <td>web:5</td>
+                                       <td>Source line 5</td>
+                               </tr><tr>
+                                       <td>L8</td>
+                                       <td>Source line 8</td>
+                               </tr><tr>
+                                       <td>rA, rX</td>
+                                       <td>Registers A, X</td>
+                               </tr><tr>
+                                       <td>m24</td>
+                                       <td>Memory at address 24 (bytes)</td>
+                               </tr><tr>
+                                       <td>instr@m24</td>
+                                       <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>
+                               </tr>
+                               </table>
+
+                               <h4>Common errors and warnings</h4>
+
+                               <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>
+
+                               <table class="table table-striped">
+                               <tr>
+                                       <th>Error</th>
+                                       <th>Meaning</th>
+                               </tr><tr>
+                                       <td>... the CFG may be wrong</td>
+                                       <td>The program structure is too complex to analyze. This happens when jumping to dynamic addresses and when using switch statements.</td>
+                               </tr><tr>
+                                       <td>unreachable instructions</td>
+                                       <td>There's dead code.</td>
+                               </tr><tr>
+                                       <td>data in program flow</td>
+                                       <td>The program may execute raw data. There's probably a <code>BR</code> missing.</td>
+                               </tr><tr>
+                                       <td>overwriting code at...</td>
+                                       <td>An instruction writes over an existing instruction (probably your code).</td>
+                               </tr><tr>
+                                       <td>expected "type" in "address", got "something"</td>
+                                       <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>
+                                       </td>
+                               </tr>
+                               </table>
                        </div>
                </div>
          </div>
        </div>
+
+         <div class="col-sm-12 col-lg-12">
+               <div class="panel panel-default" id="panelGraph" style="display: none;">
+                       <div class="panel-heading">Control Flow Graph (CFG)
+                               <button type="button" class="close" onClick="$('#panelGraph').hide()" aria-hidden="true">&times;</button>
+                       </div>
+                       <div class="panel-body">
+                               <div id="graph"></div>
+                       </div>
+               </div>
+         </div>
        
-       <script src="pep8analysis.js"></script>
+       <script>
+               if(typeof(Worker) !== "undefined") {
+                       // Async version
+                       var worker = new Worker("worker.js")
+                       worker.onmessage = function(event) {
+                               if (event.data.type == "ready") {
+                                       ready()
+                               } else if (event.data.type == "complete") {
+                                       complete()
+                               } else if (event.data.type == "exception") {
+                                       exception(event.data.data)
+                               } else if (event.data.type == "stdout") {
+                                       stdout(event.data.data)
+                               } else if (event.data.type == "show_graph") {
+                                       show_graph(event.data.data)
+                               } else {
+                                       console.out(event.data)
+                               }
+                       }
+               } else {
+                       // Synced version
+                       $(document).ready(function() {
+                               // Report full loading
+                               $("#loading").hide()
+                               $("#analyze").prop('disabled', false)
+                       });
+                       var Module = {
+                               'print': stdout,
+                               'TOTAL_MEMORY': 512000000
+                       }
+                       importScripts("pep8analysis.js")
+                       var Pep8Module = Module
+               }
+       </script>
+       <script src="viz.js"></script>
 </div>
 
 </body>