| <!-- |
| The fuzzer/res/fuzzer.js file must be included before this file. |
| |
| This in an HTML Import-able file that contains the definition |
| of the following elements: |
| |
| <fuzzer-collapse-details-sk> |
| |
| To use this file import it: |
| |
| <link href="/res/imp/fuzzer-collapse-details-sk.html" rel="import" /> |
| |
| Usage: |
| |
| <fuzzer-collapse-details-sk></fuzzer-collapse-details-sk> |
| |
| Properties: |
| details - The details object. Expected to have the following attributes: |
| lineNumber: Number, |
| count: Number, The full number of reports. |
| reports: Array of Reports. If non-empty, |
| an expandable details panel will be created containing representations of the reports. |
| If empty, just the summary will be shown. |
| Reports are objects and have the following attributes: |
| - name: String, The name of the binary, likely an md5 hash |
| - type: String, The type of the binary |
| - flags: map of String -> Array<String>, Flags associated with a given config |
| (e.g. TerminatedGracefully) |
| - stacktraces map of String -> Object, Stacktrace associated with config |
| (see fuzzer-stacktrace-sk.html for schema) |
| - category: String. |
| detailsBase: String, the base url for details (should include file and function name) |
| expand: Boolean, if this element should be auto expanded. |
| |
| Methods: |
| setDetails(details) - Programmatically set the details object. |
| showMore() - Programmatically show up to 6 more details panels. |
| showFewer() - Programmatically show up to 6 fewer details panels. |
| |
| Events: |
| None. |
| --> |
| <link rel="import" href="/res/common/imp/details-summary.html"> |
| <link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html"> |
| <link rel="import" href="/res/imp/bower_components/iron-collapse/iron-collapse.html"> |
| <link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html"> |
| <link rel="import" href="/res/imp/bower_components/paper-button/paper-button.html"> |
| <link rel="import" href="fuzzer-stacktrace-sk.html"> |
| <dom-module id="fuzzer-collapse-details-sk"> |
| <template> |
| <style include="iron-flex iron-flex-alignment"> |
| #wrapper { |
| padding: 16px; |
| border-radius: 8px; |
| background-color: #DEDEDE; |
| color: #000000; |
| } |
| |
| .panel-container .title { |
| margin-top: .5em; |
| font-weight: bold; |
| font-size: 1.1em; |
| } |
| |
| .panel { |
| min-width: 100px; |
| background-color: lightblue; |
| border-radius: 6px; |
| margin: 4px; |
| padding: 5px; |
| } |
| |
| .flags { |
| max-width: 600px; |
| } |
| |
| .raw { |
| font-size: 0.7em; |
| display: inline-block; |
| } |
| |
| .show-more-less-bar { |
| width: 100%; |
| background-color: white; |
| border-radius: 8px; |
| } |
| |
| .center { |
| margin: auto; |
| } |
| </style> |
| <div id="wrapper"> |
| <li> |
| <details-sk open="[[expand]]"> |
| <summary-sk> |
| <a href$="[[_getDetailsLink(detailsBase, details)]]">Line [[details.lineNumber]]</a> |
| -- [[details.count]] crash-causing fuzzes |
| </summary-sk> |
| <div class="panel-container horizontal layout wrap start"> |
| <template is="dom-repeat" items="[[reports]]" as="report"> |
| <div class="panel"> |
| <div class="title"> |
| File: |
| <a href$="[[_getDownloadLink(report)]]">[[report.fuzzName]]</a> |
| |
| <a href$="[[_getPermaLink(report)]]"><iron-icon icon="icons:link" title="permalink"></iron-icon></a> |
| |
| <a href$="[[_getNewBugLink(report)]]" target="_blank"><iron-icon icon="icons:bug-report" title="file a bug about this fuzz"></iron-icon></a> |
| </div> |
| <div class="raw"> |
| <a href$="[[_getMetaLink(report,'debug','asan')]]">debug_asan</a> |
| <a href$="[[_getMetaLink(report,'release','asan')]]">release_asan</a> |
| <a href$="[[_getMetaLink(report,'debug','err')]]">debug_err</a> |
| <a href$="[[_getMetaLink(report,'release','err')]]">release_err</a> |
| <a href$="[[_getMetaLink(report,'debug','dump')]]">debug_dump</a> |
| <a href$="[[_getMetaLink(report,'release','dump')]]">release_dump</a> |
| </div> |
| <div class="flags">[[_getFlags(report)]]</div> |
| <div><b>OS/Architecture:</b> [[report.architecture]]</div> |
| <h4>Debug Stack Trace</h4> |
| <fuzzer-stacktrace-sk trace="[[_stacktrace(report, 'ASAN_DEBUG', 'CLANG_DEBUG')]]"></fuzzer-stacktrace-sk> |
| <h4>Release Stack Trace</h4> |
| <fuzzer-stacktrace-sk trace="[[_stacktrace(report, 'ASAN_RELEASE', 'CLANG_RELEASE')]]"></fuzzer-stacktrace-sk> |
| </div> |
| </template> |
| <div class="show-more-less-bar horizontal layout"> |
| <paper-button disabled$="[[!hasFewer]]" on-click="showFewer">Show Fewer</paper-button> |
| <span class="status horizontal layout flex"> |
| <span class="center">Showing [[toShow]]/ |
| [[details.count]]</span> |
| </span> |
| <paper-button disabled$="[[!hasMore]]" on-click="showMore">Show More</paper-button> |
| </div> |
| </div> |
| </details-sk> |
| </li> |
| </div> |
| </template> |
| <script> |
| (function(){ |
| var FLAG_ORDER=["ASAN_DEBUG", "CLANG_DEBUG", "ASAN_RELEASE", "CLANG_RELEASE"]; |
| Polymer({ |
| is: 'fuzzer-collapse-details-sk', |
| |
| properties: { |
| details: { // expected to be provided |
| type: Object, |
| value: function() { |
| return {}; |
| } |
| }, |
| expand: { |
| type: Boolean, |
| value: false, |
| }, |
| // detailsBase is the base url to the details page for the parent element. |
| // We will use fuzzer.getLinkToDetails() to append the line information to the link. |
| detailsBase: { |
| type: String, |
| value: "" |
| }, |
| // The number of detail panels to show |
| toShow: { |
| type: Number, |
| value: 0, |
| readOnly: true, |
| }, |
| // Returns true if there are more detail panels to show |
| hasMore: { |
| type: Boolean, |
| computed: "_hasMore(details, toShow)" |
| }, |
| // Returns true if there are not 0 detail panels currently displayed. |
| hasFewer: { |
| type: Boolean, |
| computed: "_hasFewer(toShow)" |
| }, |
| // Returns the amount of detail panels equal to 'toShow' |
| reports: { |
| type: Array, |
| computed: "_getSomeReports(details, toShow)", |
| }, |
| }, |
| |
| ready: function() { |
| if (this.details.reports) { |
| this._setToShow(Math.min(6, this.details.reports.length)); |
| } |
| }, |
| |
| setDetails: function(details) { |
| this.details = details; |
| this._setToShow(Math.min(6, this.details.reports.length)); |
| }, |
| |
| _getFlags: function(report) { |
| let s = ""; |
| for (let c of FLAG_ORDER) { |
| let flags = report.flags[c] || ["<none>"]; |
| s += `${c} -> (${flags.join(" | ")}) `; |
| } |
| return s; |
| }, |
| |
| showMore: function() { |
| this._setToShow(Math.min(this.toShow + 6, this.details.reports.length)); |
| }, |
| |
| showFewer: function() { |
| this._setToShow(Math.max(this.toShow - 6, 0)); |
| }, |
| |
| _hasMore: function(details, toShow) { |
| return details.reports && toShow < details.reports.length; |
| }, |
| |
| _hasFewer: function(toShow) { |
| return toShow > 0; |
| }, |
| |
| // _getSomeReports returns up to {{toShow}} reports from details |
| _getSomeReports: function(details, toShow) { |
| if (!details.reports) { |
| return []; |
| } |
| if (toShow > details.reports.length) { |
| return details.reports; |
| } |
| return details.reports.slice(0, toShow); |
| }, |
| |
| _getDownloadLink: function(report) { |
| return "/fuzz/" + report.fuzzName; |
| }, |
| |
| _getMetaLink: function(report, build, extension) { |
| var name = report.fuzzName +"_" + build +"." + extension; |
| return "/metadata/" + name; |
| }, |
| |
| _getDetailsLink: function(detailsBase, details) { |
| return fuzzer.getLinkToDetails(detailsBase, 'line', details.lineNumber); |
| }, |
| |
| _getPermaLink: function(report) { |
| return "/category/"+report.category + "/name/" + report.fuzzName; |
| }, |
| |
| _getNewBugLink: function(report) { |
| return "/newBug?name=" + report.fuzzName + "&category="+report.category; |
| }, |
| |
| _stacktrace: function(report, stackA, stackB) { |
| if (report.stacktraces[stackA].frames) { |
| return report.stacktraces[stackA]; |
| } |
| return report.stacktraces[stackB]; |
| } |
| }); |
| })() |
| </script> |
| </dom-module> |
