Clear existing HTML when adding new Histograms

addHistograms can be called from either page load or refresh button.
This change fixes a bug where refresh button would append new content
instead of replacing them.

Bug: 1084234
Change-Id: Ibf041f1c6c85535c88fae34bbb9ef75cdc44660e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2207957Reviewed-by: Alexei Svitkine <asvitkine@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Commit-Queue: Jun Kokatsu <Jun.Kokatsu@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#771256}

chrome/test/data/webui/BUILD.gn

@@ -76,6 +76,7 @@ js2gtest("browser_tests_js_webui") {
     "cr_elements/cr_elements_v3_browsertest.js",
     "find_shortcut_behavior_browsertest.js",
     "find_shortcut_behavior_v3_browsertest.js",
+    "histograms/histograms_internals_ui_browsertest.js",
     "history/history_browsertest.js",
     "js/webui_resource_module_async_browsertest.js",
     "js2gtest_browsertest.js",

chrome/test/data/webui/histograms/histograms_internals_ui_browsertest.js

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview Test suite for the Histograms WebUI.
+ */
+
+GEN('#include "base/metrics/histogram.h"');
+GEN('#include "content/public/test/browser_test.h"');
+
+function HistogramsInternalsUIBrowserTest() {}
+
+HistogramsInternalsUIBrowserTest.prototype = {
+  __proto__: testing.Test.prototype,
+
+  browsePreload: 'chrome://histograms',
+
+  isAsync: true,
+
+  testGenPreamble: function() {
+    GEN('base::HistogramBase* histogram =');
+    GEN('    base::LinearHistogram::FactoryGet("HTMLOut", /*minimum=*/1, /*maximum=*/10,');
+    GEN('                                /*bucket_count=*/5, base::HistogramBase::kNoFlags);');
+    GEN('histogram->AddCount(/*sample=*/4, /*value=*/5);');
+  },
+
+  extraLibraries: [
+    '//third_party/mocha/mocha.js',
+    '//chrome/test/data/webui/mocha_adapter.js',
+  ],
+};
+
+TEST_F('HistogramsInternalsUIBrowserTest', 'RefreshHistograms', function() {
+  test('check refresh button replaces existing histograms', function() {
+    cr.sendWithPromise('requestHistograms', '')
+        .then(addHistograms)
+        .finally(() => {
+          const histogramHeader = 'Histogram: HTMLOut recorded 5 samples';
+          assertEquals(
+              document.body.textContent.indexOf(histogramHeader),
+              document.body.textContent.lastIndexOf(histogramHeader),
+              'refresh should replace existing histograms');
+        });
+  });
+
+  mocha.run();
+});
\ No newline at end of file

content/browser/resources/histograms/histograms_internals.js

@@ -19,6 +19,7 @@ function requestHistograms() {
  *     of header and body strings representing histograms.
  */
 function addHistograms(histograms) {
+  $('histograms').innerHTML = trustedTypes.emptyHTML;
   // TBD(jar) Write a nice HTML bar chart, with divs an mouse-overs etc.
   for (const histogram of histograms) {
     const {header, body} = histogram;