polygerrit-ui/app/samples/coverage-plugin.html

<dom-module id="coverage-plugin">
  <script>

    function populateWithDummyData(coverageData) {
      coverageData['NewFile'] = {
        linesMissingCoverage: [1, 2, 3],
        totalLines: 5,
        changeNum: 94,
        patchNum: 2,
      };
      coverageData['/COMMIT_MSG'] = {
        linesMissingCoverage: [3, 4, 7, 14],
        totalLines: 14,
        changeNum: 94,
        patchNum: 2,
      };
      coverageData['DEPS'] = {
        linesMissingCoverage: [3, 4, 7, 14],
        totalLines: 16,
        changeNum: 77001,
        patchNum: 1,
      };
      coverageData['go/sklog/sklog.go'] = {
        linesMissingCoverage: [3, 322, 323, 324],
        totalLines: 350,
        changeNum: 85963,
        patchNum: 13,
      };
    }

    Gerrit.install(plugin => {
      const coverageData = {};
      let displayCoverage = false;
      const annotationApi = plugin.annotationApi();
      const styleApi = plugin.styles();

      const coverageStyle = styleApi.css('background-color: #EF9B9B !important');
      const emptyStyle = styleApi.css('');

      annotationApi.addLayer(context => {
        if (Object.keys(coverageData).length === 0) {
           // Coverage data is not ready yet.
          return;
        }
        const path = context.path;
        const line = context.line;
          // Highlight lines missing coverage with this background color if
          // coverage should be displayed, else do nothing.
        const annotationStyle = displayCoverage
                         ? coverageStyle
                         : emptyStyle;
        if (coverageData[path] &&
              coverageData[path].changeNum === context.changeNum &&
              coverageData[path].patchNum === context.patchNum) {
          const linesMissingCoverage = coverageData[path].linesMissingCoverage;
          if (linesMissingCoverage.includes(line.afterNumber)) {
            context.annotateRange(0, line.text.length, annotationStyle, 'right');
            context.annotateLineNumber(annotationStyle, 'right');
          }
        }
      }).enableToggleCheckbox('Display Coverage', checkbox => {
        // Checkbox is attached so now add the notifier that will be controlled
        // by the checkbox.
        annotationApi.addNotifier(notifyFunc => {
          new Promise(resolve => setTimeout(resolve, 3000)).then(() => {
            populateWithDummyData(coverageData);
            checkbox.disabled = false;
            checkbox.onclick = e => {
              displayCoverage = e.target.checked;
              Object.keys(coverageData).forEach(file => {
                notifyFunc(file, 0, coverageData[file].totalLines, 'right');
              });
            };
          });
        });
      });
    });
  </script>
</dom-module>