Index

1. Frontend Overview
2. Landing Page
3. Bug Type Summary
4. File Report

FrontEnd Overview

For WebSVF Frontend Server, It contains three these pages currently:

• Landing Page
• Bug Type Summary
• File Report

These pages were generated by node server and different js files. the node-server related code are under WebSVF-front-end-server/node-scripts folder and the js files are under WebSVF-front-end-server/public/js folder.

Landing page

For bug-type-summary page, it mainly composed by index.html, landingpage.css, genLandingPageFiles.js and genLandingPageAnalysis.js.

• index.html

This page generated the basic layout of the landing page.

• landingPage.css

  includes all element CSS in landing page and bugTypeSummary page.

• genLandingPageFiles.js

  This file generates the cross-origin tab and the error box in the landing page.

  The code below generates the pill tab which contains the test file name as tab header.

  

  The code below generated the error tab body template.

  ![] (https://i.imgur.com/x5pmvKR.png)

  The code below generates the cross-origin description

  

  The code below generates the syntax error boxes

  

• genLandingPageAnalysis.js

  This file generates the bug-type-checkbox part and bug statistic table.

  If you want to change the checkbox component part code, you should check the code below Checkbox Initial code:

  

  If you want to change the bug statistic table, you should check the code below: Table initial code:

  

Bug Type Summary

For bug-type-summary page, it mainly composed by bugTypeSummary.html, landingpage.css and genBugTypeSummary.js.

• bugTypeSummary.html

  Generates bugTypeSummary page without bug type summary and bug description tabs.

• landingPage.css

  Includes all element CSS in landing page and bugTypeSummary page.

• genBugTypeSummary.js

  Generate three different bug type tabs and summary tabs.

  If you want to change the different error type's tab content or layout, you should check the make_pill object firstly. It will generate the tab which contains the error type summary content.

Then you can check the code between line 110 to line 205, the function will generate different type error box according to the bugReportJSON.js data.

File Report

For file-report page, It mainly composed by file-report.html, file-report.js, drawErrlines.js, fileReport.css and leader-line-pseudo_code.js.

• file-report.html

  Generates the basic file-report page without test code and error box.

• fileReport.css

  Includes all elements' CSS in filereport.page

• drawErrlines.js

  Generates the Stack Trace lines.

• leader-line-pseudo_code.js

  Generate error line between error code line and error box, and all lines affected by this bug.

• bugreportJson.js

  Contains all bugs' information.

  For file-report.html content, if you want to change the layout or the content of test code and its' corresponding error box. The test code and error box parts' HTML code were generated by pretty.js and file-report.js. The function below will add the corresponding code to the file-report.html's pre-DOM, then the pre-DOM's content will be rendered by the pretty.js.

If you want to change the different error lines, you need to check the leader-line-pseudo.js file, the function "showLines" was assigned to the "show lines button", which will show the error reference lines and the error lines between the error box and corresponding error code line. change the line.obj's properties will change the error line's style.

If you want to change the stack trace lines, you should check the dreawErrLines.js, the function ad_arrLines will generate these stack trace Lines. The line.obj and line_clr can change these lines' style.