Add fuzzer-stacktrace-sk and demo

fuzzer/res/imp/fuzzer-stacktrace-sk.html

+<!--
+  The common.js file must be included before this file.
+
+  This in an HTML Import-able file that contains the definition
+  of the following elements:
+
+    <fuzzer-stacktrace-sk>
+
+  <fuzzer-stacktrace-sk> displays a strack trace showing the first 8 frames and can be expanded with a click.
+
+  To use this file import it:
+
+    <link href="/res/imp/fuzzer-stacktrace-sk.html" rel="import" />
+
+  Usage:
+
+    <fuzzer-stacktrace-sk></fuzzer-stacktrace-sk>
+
+  Properties:
+    trace - The stack trace object.  Expected to be provided. Expected to have the following attributes:
+      - frames: An array of elements with the following attributes:
+        - packageName : String
+        - fileName : String
+        - lineNumber : Number
+        - functionName [optional]
+
+  Methods:
+    None.
+
+  Events:
+    None.
+-->
+<link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout.html">

[jcgregorio, 2015/11/05 21:23:37]

I don't think this is used anywhere.

[KevinL, 2015/11/06 13:56:54]

You are correct - removed.

+<link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html">
+<dom-module id="fuzzer-stacktrace-sk">
+  <template>
+    <style>
+      .stacktrace{
+        padding:4px 8px;
+      }
+      .frame {
+        padding:2px 10px;
+        border-radius:8px;
+        margin:1px;
+      }
+      .frame:nth-child(odd) {
+        background-color:#EEE;
+      }
+      .frame:nth-child(even) {
+        background-color:#DDF;

[jcgregorio, 2015/11/05 21:23:37]

Alternating rows of #fff and #eee would be more readable while still
highlighting alternating rows.

[KevinL, 2015/11/06 13:56:54]

Done.

+      }
+      #expand{
+        cursor:pointer;
+        /*Make this a bit bigger than normal (24px) */
+        --iron-icon-height: 30px;
+        --iron-icon-width: 30px;
+      }
+      .hidden{
+        display:none;
+      }
+    </style>
+    <div class="stacktrace">
+      <template is="dom-repeat" items="{{frames}}" as="frame">
+        <div class="frame">

[jcgregorio, 2015/11/05 21:23:37]

Can you make this a table so all the function names line up?

[KevinL, 2015/11/06 13:56:54]

Done.

+          <span>{{frame.packageName}}{{frame.fileName}}:{{frame.lineNumber}}<span>
+          <template is="dom-if" if="{{frame.functionName}}">
+            <span> --- {{frame.functionName}}</span>
+          </template>
+        </div>
+      </template>
+
+    <iron-icon role="button" id="expand" icon="icons:more-horiz" on-click="showMore" title="expand stacktrace"></iron-icon>

[jcgregorio, 2015/11/05 21:23:37]

Making this an icon-button will make it clearer that you can click to expand.

You can also use a paper-button with the word "More" in it.

[KevinL, 2015/11/06 13:56:54]

Changed to icon-button.  I like the icon over the word because when we put a lot
of these together: https://screenshot.googleplex.com/YXRBS2Yyihh

I'd rather not have the clutter of "More" "More" "More".

+
+    <div>
+  </template>
+
+  <script>
+    Polymer({
+      is: 'fuzzer-stacktrace-sk',
+
+      properties: {
+        trace: {
+          type: Object,
+          value: function() { return {}; },
+        },
+        expanded: {
+          type: Boolean,
+          value: false
+        },
+        frames: {
+          type: Array,
+          computed: "_getStackFrames(trace, expanded)"
+        }
+      },
+
+      setStackTrace: function(trace) {
+        this.trace = trace;
+      },
+
+      _getStackFrames: function(trace, expanded) {
+        if (expanded || trace.frames.length < 8) {
+          return trace.frames;
+        }
+        return trace.frames.slice(0, 8);
+      },
+      showMore: function() {

[jcgregorio, 2015/11/05 21:23:37]

Blank line above this.

[KevinL, 2015/11/06 13:56:54]

Done.

+        this.expanded = true;
+        this.$.expand.toggleClass("hidden");
+      }
+    });
+  </script
+</dom-module id="fuzzer-stacktrace-sk">