SoM: Added notice about chromium webkit failures + documentation links.

go/src/infra/appengine/sheriff-o-matic/elements/som-alert-item.html

 <link rel="import" href="/bower_components/polymer/polymer.html">
 
 <link rel="import" href="/bower_components/iron-icon/iron-icon.html">
 <link rel="import" href="/bower_components/iron-icons/iron-icons.html">
 <link rel="import" href="/bower_components/paper-button/paper-button.html">
 <link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="/elements/som-extension-build-failure.html">
 <link rel="import" href="/elements/som-uberify-behavior.html">
 
 <dom-module id="som-alert-item">
@@ skipping 36 matching lines @@
      .file-bug-icon,
      .snooze-icon {
        color: #aaa;
      }
      .snoozed {
        opacity: 0.5;
      }
      #root {
        transition: opacity .25s;
      }
-     #bugsList {
+     #bugsList,
+     #handleLink {
        margin-left: 15px;
      }
      hr {
        width: 100%;
        background-color: #000;
      }
      .divider {
        width: 20px;
      }
     </style>
     <div id="root" class$="[[_cssClass]]">
       <div class$="[[_classForAlert(alert, selected)]]">
         <div class="list-item">
           <div class="alert-title-bar horizontal layout justified">
             <div class="horizontal layout">
-              <div class="alert-title self-center">[[alert.title]]</div>
+              <div class="alert-title self-center">[[alert.title]] </div>
+              <div id="handleLink" class="self-center" hidden$="[[!_helpLinkForAlert(alert)]]">
+                [<a href="[[_helpLinkForAlert(alert)]]">Help</a>]
+              </div>
               <div id="bugsList" hidden$="[[!_hasBugs]]" class="alert-links">
                 <template is="dom-repeat" items="[[annotation.bugs]]" as="bug">
                   <a target="_blank" href$="[[bug]]">[[_bugLabel(bug)]]</a>
                   <paper-button id="remove[[index]]" on-tap="_removeBug" raised>Remove</paper-button>
                 </template>
               </div>
             </div>
             <div class="alert-times">
               [[_duration]]
             </div>
@@ skipping 98 matching lines @@
         let deltaSec = Math.round((alert.time - alert.start_time));
         let hours = Math.floor(deltaSec/60/60);
         let minutes = Math.floor((deltaSec - hours*60*60)/60);
         let seconds = deltaSec - hours * 60*60 - minutes*60;
         if (hours == 0 && minutes == 0 && seconds == 0) {
           return '';
         }
         return `Active for: ${hours}h ${minutes}m ${seconds}s`;
       },
 
+      _helpLinkForAlert: function(alert) {
+        // TODO(zhangtiff): Add documentation links for other kinds of alerts
+        if (this._alertIsWebkit(alert)) {
+          return "http://www.chromium.org/blink/sheriffing";
+        }
+        return null;
+      },
+
+      _alertIsWebkit(alert) {
+        // TODO(zhangtiff): Find a better way to categorize alerts
+        return alert.key.includes("chromium.webkit");
+      },
+
       _classForAlert: function(alert, selected) {
         return 'alert' + (selected ? ' selected' : '');
       },
 
       _computeHasBugs: function(bugs) {
         return !!(bugs && bugs.length > 0);
       },
 
       _computeSnoozeText: function(snoozed) {
         return snoozed ? 'Unsnooze' : 'Snooze';
@@ skipping 38 matching lines @@
             change: {'snoozeTime': true},
           });
         } else {
           this.fire('snooze');
         }
       },
     });
   })();
   </script>
 </dom-module>