innerHTML vs removeChild

JavaScript performance comparison

Revision 429 of this test case created by

Preparation code

<div id='box'></div>
      
<script>
Benchmark.prototype.setup = function() {
  var box = document.getElementById('box');
  box.innerHTML = `<html lang="en"><head>
    <meta charset="utf-8">
    <title>Omnibox Debug Page</title>
    <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
    <style>/* Copyright (c) 2012 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. */
  
  /* Copyright 2018 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. */
  
  .column-provider-name {
    width: 100%;
  }
  
  .column-type {
    width: 160%;
  }
  
  .column-relevance {
    width: 100%;
  }
  
  .column-contents {
    width: 200%;
  }
  
  .column-description {
    width: 280%;
  }
  
  .column-destination-url {
    width: 220%;
  }
  
  .column-fill-into-edit {
    width: 180%;
  }
  
  .column-inline-autocompletion {
    width: 180%;
  }
  
  .column-transition {
    width: 60px;
  }
  
  .column-associated-keyword {
    width: 120%;
  }
  
  .column-keyword {
    width: 120%;
  }
  
  .column-additional-info {
    width: 240%;
  }
  
  .column-additional-properties {
    width: 240%;
  }
  
  .column-allowed-to-be-default-match,
  .column-starred,
  .column-has-tab-match,
  .column-deletable,
  .column-from-previous,
  .column-provider-done,
  .column-duplicates {
    width: 18px;
  }
  
  
  output-results-group {
    display: inline-block;
    margin-bottom: 60px;
  }
  
  output-results-group[hidden] {
    display: none;
  }
  
  .left-20 {
    margin-left: 20px
  }
  
  .check-mark,
  .x-mark {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 0;
    height: 16px;
    width: 16px;
  }
  
  .check-mark {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzBGOUQ1OCI+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+CiAgICA8cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptLTIgMTVsLTUtNSAxLjQxLTEuNDFMMTAgMTQuMTdsNy41OS03LjU5TDE5IDhsLTkgOXoiLz4KPC9zdmc+Cg==);
  }
  
  .x-mark {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI0RCNDQzNyI+CiAgICA8cGF0aCBkPSJNMTIgMkM2LjQ3IDIgMiA2LjQ3IDIgMTJzNC40NyAxMCAxMCAxMCAxMC00LjQ3IDEwLTEwUzE3LjUzIDIgMTIgMnptNSAxMy41OUwxNS41OSAxNyAxMiAxMy40MSA4LjQxIDE3IDcgMTUuNTkgMTAuNTkgMTIgNyA4LjQxIDguNDEgNyAxMiAxMC41OSAxNS41OSA3IDE3IDguNDEgMTMuNDEgMTIgMTcgMTUuNTl6Ii8+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+Cjwvc3ZnPgo=);
  }
  
  p,
  pre {
    margin: 0;
  }
  
  .section {
    margin-bottom: 10px;
    margin-top: 10px;
  }
  
  body {
    background-color: #fcfcfc;
  }
  
  table {
    background-color: white;
    border: 2px solid #ccc;
    border-spacing: 0;
    font-family: monospace;
    font-size: 12px;
    min-width: 900px;
    overflow-wrap: break-word;
    table-layout: fixed;
    text-align: left;
    width: 100%;
  }
  
  table * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  thead tr {
    background-color: #f8f8f8;
    color: #555;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0;
    vertical-align: bottom;
    white-space: nowrap;
  }
  
  tbody tr {
    height: 44px;
    transition-duration: 300ms;
  }
  
  tbody tr:hover * {
    background-color: #f8f8f8;
    white-space: normal;
  }
  
  th,
  td {
    padding: 0 5px;
  }
  
  th {
    padding-bottom: 10px;
    padding-top: 20px;
  }
  
  tbody:not(:first-of-type) td:first-of-type {
    font-size: 0;
  }
  
  .filtered-hidden {
    display: none;
  }
  
  .filtered-highlighted {
    background-color: lightskyblue;
    /* TODO(manukh) This is a placholder color until other ui changes occur. */
  }
  
  .toggle input,
  .toggle input:not(:checked) ~ .toggle-on,
  .toggle input:checked ~ .toggle-off {
    display: none;
  }
  
  .toggle span {
    user-select: none;
    display: inline-block;
    padding: 3px 5px;
    min-width: 60px;
    text-align: center;
    cursor: pointer;
    border: 1px solid;
  }
  
  .toggle span:hover {
    background-color: #f0f0f0;
  }
  </style>
    <script src="chrome://resources/js/cr.js"></script>
    <script src="chrome://resources/js/mojo_bindings_lite.js"></script>
    <script src="chrome://resources/js/util.js"></script>
    <script src="chrome/browser/ui/webui/omnibox/omnibox.mojom-lite.js"></script>
    <script src="omnibox_element.js"></script>
    <script src="omnibox_inputs.js"></script>
    <script src="omnibox_output.js"></script>
    <script src="omnibox.js"></script>
  </head>
  <body>
    <template id="omnibox-inputs-template">
      <style>/* Copyright (c) 2012 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. */
  
  /* Copyright 2018 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. */
  
  .column-provider-name {
    width: 100%;
  }
  
  .column-type {
    width: 160%;
  }
  
  .column-relevance {
    width: 100%;
  }
  
  .column-contents {
    width: 200%;
  }
  
  .column-description {
    width: 280%;
  }
  
  .column-destination-url {
    width: 220%;
  }
  
  .column-fill-into-edit {
    width: 180%;
  }
  
  .column-inline-autocompletion {
    width: 180%;
  }
  
  .column-transition {
    width: 60px;
  }
  
  .column-associated-keyword {
    width: 120%;
  }
  
  .column-keyword {
    width: 120%;
  }
  
  .column-additional-info {
    width: 240%;
  }
  
  .column-additional-properties {
    width: 240%;
  }
  
  .column-allowed-to-be-default-match,
  .column-starred,
  .column-has-tab-match,
  .column-deletable,
  .column-from-previous,
  .column-provider-done,
  .column-duplicates {
    width: 18px;
  }
  
  
  output-results-group {
    display: inline-block;
    margin-bottom: 60px;
  }
  
  output-results-group[hidden] {
    display: none;
  }
  
  .left-20 {
    margin-left: 20px
  }
  
  .check-mark,
  .x-mark {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 0;
    height: 16px;
    width: 16px;
  }
  
  .check-mark {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzBGOUQ1OCI+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+CiAgICA8cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptLTIgMTVsLTUtNSAxLjQxLTEuNDFMMTAgMTQuMTdsNy41OS03LjU5TDE5IDhsLTkgOXoiLz4KPC9zdmc+Cg==);
  }
  
  .x-mark {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI0RCNDQzNyI+CiAgICA8cGF0aCBkPSJNMTIgMkM2LjQ3IDIgMiA2LjQ3IDIgMTJzNC40NyAxMCAxMCAxMCAxMC00LjQ3IDEwLTEwUzE3LjUzIDIgMTIgMnptNSAxMy41OUwxNS41OSAxNyAxMiAxMy40MSA4LjQxIDE3IDcgMTUuNTkgMTAuNTkgMTIgNyA4LjQxIDguNDEgNyAxMiAxMC41OSAxNS41OSA3IDE3IDguNDEgMTMuNDEgMTIgMTcgMTUuNTl6Ii8+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+Cjwvc3ZnPgo=);
  }
  
  p,
  pre {
    margin: 0;
  }
  
  .section {
    margin-bottom: 10px;
    margin-top: 10px;
  }
  
  body {
    background-color: #fcfcfc;
  }
  
  table {
    background-color: white;
    border: 2px solid #ccc;
    border-spacing: 0;
    font-family: monospace;
    font-size: 12px;
    min-width: 900px;
    overflow-wrap: break-word;
    table-layout: fixed;
    text-align: left;
    width: 100%;
  }
  
  table * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  thead tr {
    background-color: #f8f8f8;
    color: #555;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0;
    vertical-align: bottom;
    white-space: nowrap;
  }
  
  tbody tr {
    height: 44px;
    transition-duration: 300ms;
  }
  
  tbody tr:hover * {
    background-color: #f8f8f8;
    white-space: normal;
  }
  
  th,
  td {
    padding: 0 5px;
  }
  
  th {
    padding-bottom: 10px;
    padding-top: 20px;
  }
  
  tbody:not(:first-of-type) td:first-of-type {
    font-size: 0;
  }
  
  .filtered-hidden {
    display: none;
  }
  
  .filtered-highlighted {
    background-color: lightskyblue;
    /* TODO(manukh) This is a placholder color until other ui changes occur. */
  }
  
  .toggle input,
  .toggle input:not(:checked) ~ .toggle-on,
  .toggle input:checked ~ .toggle-off {
    display: none;
  }
  
  .toggle span {
    user-select: none;
    display: inline-block;
    padding: 3px 5px;
    min-width: 60px;
    text-align: center;
    cursor: pointer;
    border: 1px solid;
  }
  
  .toggle span:hover {
    background-color: #f0f0f0;
  }
  </style>
      <p>
        <input id="input-text" type="text" size="60" placeholder="Enter omnibox input text" autofocus="">
      </p>
      <p>Input parameters:</p>
      <p>
        <label>
          <input id="lock-cursor-position" type="checkbox">
          Lock cursor position to end of input
        </label>
      </p>
      <p>
        <label>
          <input id="prevent-inline-autocomplete" type="checkbox">
          Prevent inline autocomplete
        </label>
      </p>
      <p>
        <label>
          <input id="prefer-keyword" type="checkbox">
          In keyword mode
        </label>
      </p>
      <p>
        Current page context:
        <select id="page-classification">
          <option value="0">Invalid spec</option>
          <option value="2">about:blank</option>
          <option value="3">user's home page</option>
          <option value="4">arbitrary URL</option>
          <option value="9">search result page not doing search term replacement</option>
          <option value="7" selected="">new tab page omnibox</option>
          <option value="8">new tab page fakebox</option>
          <option value="1">(OBSOLETE) new tab page</option>
          <option value="6">(OBSOLETE) search result page doing search term replacement</option>
        </select>
      </p>
      <p>Display parameters:</p>
      <p>
        <label>
          <input id="show-incomplete-results" type="checkbox">
          Show incomplete results
        </label>
      </p>
      <p>
        <label>
          <input id="show-details" type="checkbox">
          Show all details
        </label>
      </p>
      <p>
        <label>
          <input id="show-all-providers" type="checkbox">
          Show results per provider, not just merged results
        </label>
      </p>
      <div class="section">
        <button id="copy-text" title="Copy visible table in text format. This is affected by the visibility of ouput; i.e. toggling 'Show all details' affects what will be copied.">Copy as text</button>
        <button id="copy-json" title="Copy responses in JSON format. This is not affected by the visibility of output and will copy responses in their entirety.">Copy as JSON</button>
      </div>
  
      <div class="section">
        <input id="filter-text" type="text" size="60" placeholder="Filter output">
        <label class="toggle left-20">
          <input id="filter-hide" type="checkbox">
          <span class="toggle-off">Highlight</span>
          <span class="toggle-on">Filter</span>
        </label>
      </div>
    </template>
  
    <template id="omnibox-output-template">
      <style>/* Copyright (c) 2012 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. */
  
  /* Copyright 2018 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. */
  
  .column-provider-name {
    width: 100%;
  }
  
  .column-type {
    width: 160%;
  }
  
  .column-relevance {
    width: 100%;
  }
  
  .column-contents {
    width: 200%;
  }
  
  .column-description {
    width: 280%;
  }
  
  .column-destination-url {
    width: 220%;
  }
  
  .column-fill-into-edit {
    width: 180%;
  }
  
  .column-inline-autocompletion {
    width: 180%;
  }
  
  .column-transition {
    width: 60px;
  }
  
  .column-associated-keyword {
    width: 120%;
  }
  
  .column-keyword {
    width: 120%;
  }
  
  .column-additional-info {
    width: 240%;
  }
  
  .column-additional-properties {
    width: 240%;
  }
  
  .column-allowed-to-be-default-match,
  .column-starred,
  .column-has-tab-match,
  .column-deletable,
  .column-from-previous,
  .column-provider-done,
  .column-duplicates {
    width: 18px;
  }
  
  
  output-results-group {
    display: inline-block;
    margin-bottom: 60px;
  }
  
  output-results-group[hidden] {
    display: none;
  }
  
  .left-20 {
    margin-left: 20px
  }
  
  .check-mark,
  .x-mark {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 0;
    height: 16px;
    width: 16px;
  }
  
  .check-mark {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzBGOUQ1OCI+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+CiAgICA8cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptLTIgMTVsLTUtNSAxLjQxLTEuNDFMMTAgMTQuMTdsNy41OS03LjU5TDE5IDhsLTkgOXoiLz4KPC9zdmc+Cg==);
  }
  
  .x-mark {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI0RCNDQzNyI+CiAgICA8cGF0aCBkPSJNMTIgMkM2LjQ3IDIgMiA2LjQ3IDIgMTJzNC40NyAxMCAxMCAxMCAxMC00LjQ3IDEwLTEwUzE3LjUzIDIgMTIgMnptNSAxMy41OUwxNS41OSAxNyAxMiAxMy40MSA4LjQxIDE3IDcgMTUuNTkgMTAuNTkgMTIgNyA4LjQxIDguNDEgNyAxMiAxMC41OSAxNS41OSA3IDE3IDguNDEgMTMuNDEgMTIgMTcgMTUuNTl6Ii8+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+Cjwvc3ZnPgo=);
  }
  
  p,
  pre {
    margin: 0;
  }
  
  .section {
    margin-bottom: 10px;
    margin-top: 10px;
  }
  
  body {
    background-color: #fcfcfc;
  }
  
  table {
    background-color: white;
    border: 2px solid #ccc;
    border-spacing: 0;
    font-family: monospace;
    font-size: 12px;
    min-width: 900px;
    overflow-wrap: break-word;
    table-layout: fixed;
    text-align: left;
    width: 100%;
  }
  
  table * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  thead tr {
    background-color: #f8f8f8;
    color: #555;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0;
    vertical-align: bottom;
    white-space: nowrap;
  }
  
  tbody tr {
    height: 44px;
    transition-duration: 300ms;
  }
  
  tbody tr:hover * {
    background-color: #f8f8f8;
    white-space: normal;
  }
  
  th,
  td {
    padding: 0 5px;
  }
  
  th {
    padding-bottom: 10px;
    padding-top: 20px;
  }
  
  tbody:not(:first-of-type) td:first-of-type {
    font-size: 0;
  }
  
  .filtered-hidden {
    display: none;
  }
  
  .filtered-highlighted {
    background-color: lightskyblue;
    /* TODO(manukh) This is a placholder color until other ui changes occur. */
  }
  
  .toggle input,
  .toggle input:not(:checked) ~ .toggle-on,
  .toggle input:checked ~ .toggle-off {
    display: none;
  }
  
  .toggle span {
    user-select: none;
    display: inline-block;
    padding: 3px 5px;
    min-width: 60px;
    text-align: center;
    cursor: pointer;
    border: 1px solid;
  }
  
  .toggle span:hover {
    background-color: #f0f0f0;
  }
  </style>
      <div id="contents"></div>
    </template>
  
    <template id="details-and-table-template">
      <style>/* Copyright (c) 2012 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. */
  
  /* Copyright 2018 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. */
  
  .column-provider-name {
    width: 100%;
  }
  
  .column-type {
    width: 160%;
  }
  
  .column-relevance {
    width: 100%;
  }
  
  .column-contents {
    width: 200%;
  }
  
  .column-description {
    width: 280%;
  }
  
  .column-destination-url {
    width: 220%;
  }
  
  .column-fill-into-edit {
    width: 180%;
  }
  
  .column-inline-autocompletion {
    width: 180%;
  }
  
  .column-transition {
    width: 60px;
  }
  
  .column-associated-keyword {
    width: 120%;
  }
  
  .column-keyword {
    width: 120%;
  }
  
  .column-additional-info {
    width: 240%;
  }
  
  .column-additional-properties {
    width: 240%;
  }
  
  .column-allowed-to-be-default-match,
  .column-starred,
  .column-has-tab-match,
  .column-deletable,
  .column-from-previous,
  .column-provider-done,
  .column-duplicates {
    width: 18px;
  }
  
  
  output-results-group {
    display: inline-block;
    margin-bottom: 60px;
  }
  
  output-results-group[hidden] {
    display: none;
  }
  
  .left-20 {
    margin-left: 20px
  }
  
  .check-mark,
  .x-mark {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 0;
    height: 16px;
    width: 16px;
  }
  
  .check-mark {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzBGOUQ1OCI+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+CiAgICA8cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptLTIgMTVsLTUtNSAxLjQxLTEuNDFMMTAgMTQuMTdsNy41OS03LjU5TDE5IDhsLTkgOXoiLz4KPC9zdmc+Cg==);
  }
  
  .x-mark {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI0RCNDQzNyI+CiAgICA8cGF0aCBkPSJNMTIgMkM2LjQ3IDIgMiA2LjQ3IDIgMTJzNC40NyAxMCAxMCAxMCAxMC00LjQ3IDEwLTEwUzE3LjUzIDIgMTIgMnptNSAxMy41OUwxNS41OSAxNyAxMiAxMy40MSA4LjQxIDE3IDcgMTUuNTkgMTAuNTkgMTIgNyA4LjQxIDguNDEgNyAxMiAxMC41OSAxNS41OSA3IDE3IDguNDEgMTMuNDEgMTIgMTcgMTUuNTl6Ii8+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+Cjwvc3ZnPgo=);
  }
  
  p,
  pre {
    margin: 0;
  }
  
  .section {
    margin-bottom: 10px;
    margin-top: 10px;
  }
  
  body {
    background-color: #fcfcfc;
  }
  
  table {
    background-color: white;
    border: 2px solid #ccc;
    border-spacing: 0;
    font-family: monospace;
    font-size: 12px;
    min-width: 900px;
    overflow-wrap: break-word;
    table-layout: fixed;
    text-align: left;
    width: 100%;
  }
  
  table * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  thead tr {
    background-color: #f8f8f8;
    color: #555;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0;
    vertical-align: bottom;
    white-space: nowrap;
  }
  
  tbody tr {
    height: 44px;
    transition-duration: 300ms;
  }
  
  tbody tr:hover * {
    background-color: #f8f8f8;
    white-space: normal;
  }
  
  th,
  td {
    padding: 0 5px;
  }
  
  th {
    padding-bottom: 10px;
    padding-top: 20px;
  }
  
  tbody:not(:first-of-type) td:first-of-type {
    font-size: 0;
  }
  
  .filtered-hidden {
    display: none;
  }
  
  .filtered-highlighted {
    background-color: lightskyblue;
    /* TODO(manukh) This is a placholder color until other ui changes occur. */
  }
  
  .toggle input,
  .toggle input:not(:checked) ~ .toggle-on,
  .toggle input:checked ~ .toggle-off {
    display: none;
  }
  
  .toggle span {
    user-select: none;
    display: inline-block;
    padding: 3px 5px;
    min-width: 60px;
    text-align: center;
    cursor: pointer;
    border: 1px solid;
  }
  
  .toggle span:hover {
    background-color: #f0f0f0;
  }
  </style>
      <div id="details"></div>
      <table id="table"></table>
    </template>
  
    <template id="details-template">
      <p>cursor position = <span class="cursor-position"></span></p>
      <p>elapsed time = <span class="time"></span>ms</p>
      <p>all providers done = <span class="done"></span></p>
      <p>host = <span class="host"></span>, has isTypedHost = <span class="is-typed-host"></span></p>
    </template>
  
    <div class="section">
      <omnibox-inputs id="omnibox-inputs"></omnibox-inputs>
    </div>
    <div class="section">
      <omnibox-output id="omnibox-output"></omnibox-output>
    </div>
  
  
  </body></html>`

};

Benchmark.prototype.teardown = function() {
  box.innerHTML = `<html lang="en"><head>
    <meta charset="utf-8">
    <title>Omnibox Debug Page</title>
    <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
    <style>/* Copyright (c) 2012 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. */
  
  /* Copyright 2018 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. */
  
  .column-provider-name {
    width: 100%;
  }
  
  .column-type {
    width: 160%;
  }
  
  .column-relevance {
    width: 100%;
  }
  
  .column-contents {
    width: 200%;
  }
  
  .column-description {
    width: 280%;
  }
  
  .column-destination-url {
    width: 220%;
  }
  
  .column-fill-into-edit {
    width: 180%;
  }
  
  .column-inline-autocompletion {
    width: 180%;
  }
  
  .column-transition {
    width: 60px;
  }
  
  .column-associated-keyword {
    width: 120%;
  }
  
  .column-keyword {
    width: 120%;
  }
  
  .column-additional-info {
    width: 240%;
  }
  
  .column-additional-properties {
    width: 240%;
  }
  
  .column-allowed-to-be-default-match,
  .column-starred,
  .column-has-tab-match,
  .column-deletable,
  .column-from-previous,
  .column-provider-done,
  .column-duplicates {
    width: 18px;
  }
  
  
  output-results-group {
    display: inline-block;
    margin-bottom: 60px;
  }
  
  output-results-group[hidden] {
    display: none;
  }
  
  .left-20 {
    margin-left: 20px
  }
  
  .check-mark,
  .x-mark {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 0;
    height: 16px;
    width: 16px;
  }
  
  .check-mark {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzBGOUQ1OCI+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+CiAgICA8cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptLTIgMTVsLTUtNSAxLjQxLTEuNDFMMTAgMTQuMTdsNy41OS03LjU5TDE5IDhsLTkgOXoiLz4KPC9zdmc+Cg==);
  }
  
  .x-mark {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI0RCNDQzNyI+CiAgICA8cGF0aCBkPSJNMTIgMkM2LjQ3IDIgMiA2LjQ3IDIgMTJzNC40NyAxMCAxMCAxMCAxMC00LjQ3IDEwLTEwUzE3LjUzIDIgMTIgMnptNSAxMy41OUwxNS41OSAxNyAxMiAxMy40MSA4LjQxIDE3IDcgMTUuNTkgMTAuNTkgMTIgNyA4LjQxIDguNDEgNyAxMiAxMC41OSAxNS41OSA3IDE3IDguNDEgMTMuNDEgMTIgMTcgMTUuNTl6Ii8+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+Cjwvc3ZnPgo=);
  }
  
  p,
  pre {
    margin: 0;
  }
  
  .section {
    margin-bottom: 10px;
    margin-top: 10px;
  }
  
  body {
    background-color: #fcfcfc;
  }
  
  table {
    background-color: white;
    border: 2px solid #ccc;
    border-spacing: 0;
    font-family: monospace;
    font-size: 12px;
    min-width: 900px;
    overflow-wrap: break-word;
    table-layout: fixed;
    text-align: left;
    width: 100%;
  }
  
  table * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  thead tr {
    background-color: #f8f8f8;
    color: #555;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0;
    vertical-align: bottom;
    white-space: nowrap;
  }
  
  tbody tr {
    height: 44px;
    transition-duration: 300ms;
  }
  
  tbody tr:hover * {
    background-color: #f8f8f8;
    white-space: normal;
  }
  
  th,
  td {
    padding: 0 5px;
  }
  
  th {
    padding-bottom: 10px;
    padding-top: 20px;
  }
  
  tbody:not(:first-of-type) td:first-of-type {
    font-size: 0;
  }
  
  .filtered-hidden {
    display: none;
  }
  
  .filtered-highlighted {
    background-color: lightskyblue;
    /* TODO(manukh) This is a placholder color until other ui changes occur. */
  }
  
  .toggle input,
  .toggle input:not(:checked) ~ .toggle-on,
  .toggle input:checked ~ .toggle-off {
    display: none;
  }
  
  .toggle span {
    user-select: none;
    display: inline-block;
    padding: 3px 5px;
    min-width: 60px;
    text-align: center;
    cursor: pointer;
    border: 1px solid;
  }
  
  .toggle span:hover {
    background-color: #f0f0f0;
  }
  </style>
    <script src="chrome://resources/js/cr.js"></script>
    <script src="chrome://resources/js/mojo_bindings_lite.js"></script>
    <script src="chrome://resources/js/util.js"></script>
    <script src="chrome/browser/ui/webui/omnibox/omnibox.mojom-lite.js"></script>
    <script src="omnibox_element.js"></script>
    <script src="omnibox_inputs.js"></script>
    <script src="omnibox_output.js"></script>
    <script src="omnibox.js"></script>
  </head>
  <body>
    <template id="omnibox-inputs-template">
      <style>/* Copyright (c) 2012 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. */
  
  /* Copyright 2018 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. */
  
  .column-provider-name {
    width: 100%;
  }
  
  .column-type {
    width: 160%;
  }
  
  .column-relevance {
    width: 100%;
  }
  
  .column-contents {
    width: 200%;
  }
  
  .column-description {
    width: 280%;
  }
  
  .column-destination-url {
    width: 220%;
  }
  
  .column-fill-into-edit {
    width: 180%;
  }
  
  .column-inline-autocompletion {
    width: 180%;
  }
  
  .column-transition {
    width: 60px;
  }
  
  .column-associated-keyword {
    width: 120%;
  }
  
  .column-keyword {
    width: 120%;
  }
  
  .column-additional-info {
    width: 240%;
  }
  
  .column-additional-properties {
    width: 240%;
  }
  
  .column-allowed-to-be-default-match,
  .column-starred,
  .column-has-tab-match,
  .column-deletable,
  .column-from-previous,
  .column-provider-done,
  .column-duplicates {
    width: 18px;
  }
  
  
  output-results-group {
    display: inline-block;
    margin-bottom: 60px;
  }
  
  output-results-group[hidden] {
    display: none;
  }
  
  .left-20 {
    margin-left: 20px
  }
  
  .check-mark,
  .x-mark {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 0;
    height: 16px;
    width: 16px;
  }
  
  .check-mark {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzBGOUQ1OCI+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+CiAgICA8cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptLTIgMTVsLTUtNSAxLjQxLTEuNDFMMTAgMTQuMTdsNy41OS03LjU5TDE5IDhsLTkgOXoiLz4KPC9zdmc+Cg==);
  }
  
  .x-mark {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI0RCNDQzNyI+CiAgICA8cGF0aCBkPSJNMTIgMkM2LjQ3IDIgMiA2LjQ3IDIgMTJzNC40NyAxMCAxMCAxMCAxMC00LjQ3IDEwLTEwUzE3LjUzIDIgMTIgMnptNSAxMy41OUwxNS41OSAxNyAxMiAxMy40MSA4LjQxIDE3IDcgMTUuNTkgMTAuNTkgMTIgNyA4LjQxIDguNDEgNyAxMiAxMC41OSAxNS41OSA3IDE3IDguNDEgMTMuNDEgMTIgMTcgMTUuNTl6Ii8+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+Cjwvc3ZnPgo=);
  }
  
  p,
  pre {
    margin: 0;
  }
  
  .section {
    margin-bottom: 10px;
    margin-top: 10px;
  }
  
  body {
    background-color: #fcfcfc;
  }
  
  table {
    background-color: white;
    border: 2px solid #ccc;
    border-spacing: 0;
    font-family: monospace;
    font-size: 12px;
    min-width: 900px;
    overflow-wrap: break-word;
    table-layout: fixed;
    text-align: left;
    width: 100%;
  }
  
  table * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  thead tr {
    background-color: #f8f8f8;
    color: #555;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0;
    vertical-align: bottom;
    white-space: nowrap;
  }
  
  tbody tr {
    height: 44px;
    transition-duration: 300ms;
  }
  
  tbody tr:hover * {
    background-color: #f8f8f8;
    white-space: normal;
  }
  
  th,
  td {
    padding: 0 5px;
  }
  
  th {
    padding-bottom: 10px;
    padding-top: 20px;
  }
  
  tbody:not(:first-of-type) td:first-of-type {
    font-size: 0;
  }
  
  .filtered-hidden {
    display: none;
  }
  
  .filtered-highlighted {
    background-color: lightskyblue;
    /* TODO(manukh) This is a placholder color until other ui changes occur. */
  }
  
  .toggle input,
  .toggle input:not(:checked) ~ .toggle-on,
  .toggle input:checked ~ .toggle-off {
    display: none;
  }
  
  .toggle span {
    user-select: none;
    display: inline-block;
    padding: 3px 5px;
    min-width: 60px;
    text-align: center;
    cursor: pointer;
    border: 1px solid;
  }
  
  .toggle span:hover {
    background-color: #f0f0f0;
  }
  </style>
      <p>
        <input id="input-text" type="text" size="60" placeholder="Enter omnibox input text" autofocus="">
      </p>
      <p>Input parameters:</p>
      <p>
        <label>
          <input id="lock-cursor-position" type="checkbox">
          Lock cursor position to end of input
        </label>
      </p>
      <p>
        <label>
          <input id="prevent-inline-autocomplete" type="checkbox">
          Prevent inline autocomplete
        </label>
      </p>
      <p>
        <label>
          <input id="prefer-keyword" type="checkbox">
          In keyword mode
        </label>
      </p>
      <p>
        Current page context:
        <select id="page-classification">
          <option value="0">Invalid spec</option>
          <option value="2">about:blank</option>
          <option value="3">user's home page</option>
          <option value="4">arbitrary URL</option>
          <option value="9">search result page not doing search term replacement</option>
          <option value="7" selected="">new tab page omnibox</option>
          <option value="8">new tab page fakebox</option>
          <option value="1">(OBSOLETE) new tab page</option>
          <option value="6">(OBSOLETE) search result page doing search term replacement</option>
        </select>
      </p>
      <p>Display parameters:</p>
      <p>
        <label>
          <input id="show-incomplete-results" type="checkbox">
          Show incomplete results
        </label>
      </p>
      <p>
        <label>
          <input id="show-details" type="checkbox">
          Show all details
        </label>
      </p>
      <p>
        <label>
          <input id="show-all-providers" type="checkbox">
          Show results per provider, not just merged results
        </label>
      </p>
      <div class="section">
        <button id="copy-text" title="Copy visible table in text format. This is affected by the visibility of ouput; i.e. toggling 'Show all details' affects what will be copied.">Copy as text</button>
        <button id="copy-json" title="Copy responses in JSON format. This is not affected by the visibility of output and will copy responses in their entirety.">Copy as JSON</button>
      </div>
  
      <div class="section">
        <input id="filter-text" type="text" size="60" placeholder="Filter output">
        <label class="toggle left-20">
          <input id="filter-hide" type="checkbox">
          <span class="toggle-off">Highlight</span>
          <span class="toggle-on">Filter</span>
        </label>
      </div>
    </template>
  
    <template id="omnibox-output-template">
      <style>/* Copyright (c) 2012 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. */
  
  /* Copyright 2018 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. */
  
  .column-provider-name {
    width: 100%;
  }
  
  .column-type {
    width: 160%;
  }
  
  .column-relevance {
    width: 100%;
  }
  
  .column-contents {
    width: 200%;
  }
  
  .column-description {
    width: 280%;
  }
  
  .column-destination-url {
    width: 220%;
  }
  
  .column-fill-into-edit {
    width: 180%;
  }
  
  .column-inline-autocompletion {
    width: 180%;
  }
  
  .column-transition {
    width: 60px;
  }
  
  .column-associated-keyword {
    width: 120%;
  }
  
  .column-keyword {
    width: 120%;
  }
  
  .column-additional-info {
    width: 240%;
  }
  
  .column-additional-properties {
    width: 240%;
  }
  
  .column-allowed-to-be-default-match,
  .column-starred,
  .column-has-tab-match,
  .column-deletable,
  .column-from-previous,
  .column-provider-done,
  .column-duplicates {
    width: 18px;
  }
  
  
  output-results-group {
    display: inline-block;
    margin-bottom: 60px;
  }
  
  output-results-group[hidden] {
    display: none;
  }
  
  .left-20 {
    margin-left: 20px
  }
  
  .check-mark,
  .x-mark {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 0;
    height: 16px;
    width: 16px;
  }
  
  .check-mark {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzBGOUQ1OCI+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+CiAgICA8cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptLTIgMTVsLTUtNSAxLjQxLTEuNDFMMTAgMTQuMTdsNy41OS03LjU5TDE5IDhsLTkgOXoiLz4KPC9zdmc+Cg==);
  }
  
  .x-mark {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI0RCNDQzNyI+CiAgICA8cGF0aCBkPSJNMTIgMkM2LjQ3IDIgMiA2LjQ3IDIgMTJzNC40NyAxMCAxMCAxMCAxMC00LjQ3IDEwLTEwUzE3LjUzIDIgMTIgMnptNSAxMy41OUwxNS41OSAxNyAxMiAxMy40MSA4LjQxIDE3IDcgMTUuNTkgMTAuNTkgMTIgNyA4LjQxIDguNDEgNyAxMiAxMC41OSAxNS41OSA3IDE3IDguNDEgMTMuNDEgMTIgMTcgMTUuNTl6Ii8+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+Cjwvc3ZnPgo=);
  }
  
  p,
  pre {
    margin: 0;
  }
  
  .section {
    margin-bottom: 10px;
    margin-top: 10px;
  }
  
  body {
    background-color: #fcfcfc;
  }
  
  table {
    background-color: white;
    border: 2px solid #ccc;
    border-spacing: 0;
    font-family: monospace;
    font-size: 12px;
    min-width: 900px;
    overflow-wrap: break-word;
    table-layout: fixed;
    text-align: left;
    width: 100%;
  }
  
  table * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  thead tr {
    background-color: #f8f8f8;
    color: #555;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0;
    vertical-align: bottom;
    white-space: nowrap;
  }
  
  tbody tr {
    height: 44px;
    transition-duration: 300ms;
  }
  
  tbody tr:hover * {
    background-color: #f8f8f8;
    white-space: normal;
  }
  
  th,
  td {
    padding: 0 5px;
  }
  
  th {
    padding-bottom: 10px;
    padding-top: 20px;
  }
  
  tbody:not(:first-of-type) td:first-of-type {
    font-size: 0;
  }
  
  .filtered-hidden {
    display: none;
  }
  
  .filtered-highlighted {
    background-color: lightskyblue;
    /* TODO(manukh) This is a placholder color until other ui changes occur. */
  }
  
  .toggle input,
  .toggle input:not(:checked) ~ .toggle-on,
  .toggle input:checked ~ .toggle-off {
    display: none;
  }
  
  .toggle span {
    user-select: none;
    display: inline-block;
    padding: 3px 5px;
    min-width: 60px;
    text-align: center;
    cursor: pointer;
    border: 1px solid;
  }
  
  .toggle span:hover {
    background-color: #f0f0f0;
  }
  </style>
      <div id="contents"></div>
    </template>
  
    <template id="details-and-table-template">
      <style>/* Copyright (c) 2012 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. */
  
  /* Copyright 2018 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. */
  
  .column-provider-name {
    width: 100%;
  }
  
  .column-type {
    width: 160%;
  }
  
  .column-relevance {
    width: 100%;
  }
  
  .column-contents {
    width: 200%;
  }
  
  .column-description {
    width: 280%;
  }
  
  .column-destination-url {
    width: 220%;
  }
  
  .column-fill-into-edit {
    width: 180%;
  }
  
  .column-inline-autocompletion {
    width: 180%;
  }
  
  .column-transition {
    width: 60px;
  }
  
  .column-associated-keyword {
    width: 120%;
  }
  
  .column-keyword {
    width: 120%;
  }
  
  .column-additional-info {
    width: 240%;
  }
  
  .column-additional-properties {
    width: 240%;
  }
  
  .column-allowed-to-be-default-match,
  .column-starred,
  .column-has-tab-match,
  .column-deletable,
  .column-from-previous,
  .column-provider-done,
  .column-duplicates {
    width: 18px;
  }
  
  
  output-results-group {
    display: inline-block;
    margin-bottom: 60px;
  }
  
  output-results-group[hidden] {
    display: none;
  }
  
  .left-20 {
    margin-left: 20px
  }
  
  .check-mark,
  .x-mark {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    font-size: 0;
    height: 16px;
    width: 16px;
  }
  
  .check-mark {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzBGOUQ1OCI+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+CiAgICA8cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptLTIgMTVsLTUtNSAxLjQxLTEuNDFMMTAgMTQuMTdsNy41OS03LjU5TDE5IDhsLTkgOXoiLz4KPC9zdmc+Cg==);
  }
  
  .x-mark {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI0RCNDQzNyI+CiAgICA8cGF0aCBkPSJNMTIgMkM2LjQ3IDIgMiA2LjQ3IDIgMTJzNC40NyAxMCAxMCAxMCAxMC00LjQ3IDEwLTEwUzE3LjUzIDIgMTIgMnptNSAxMy41OUwxNS41OSAxNyAxMiAxMy40MSA4LjQxIDE3IDcgMTUuNTkgMTAuNTkgMTIgNyA4LjQxIDguNDEgNyAxMiAxMC41OSAxNS41OSA3IDE3IDguNDEgMTMuNDEgMTIgMTcgMTUuNTl6Ii8+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+Cjwvc3ZnPgo=);
  }
  
  p,
  pre {
    margin: 0;
  }
  
  .section {
    margin-bottom: 10px;
    margin-top: 10px;
  }
  
  body {
    background-color: #fcfcfc;
  }
  
  table {
    background-color: white;
    border: 2px solid #ccc;
    border-spacing: 0;
    font-family: monospace;
    font-size: 12px;
    min-width: 900px;
    overflow-wrap: break-word;
    table-layout: fixed;
    text-align: left;
    width: 100%;
  }
  
  table * {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  thead tr {
    background-color: #f8f8f8;
    color: #555;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0;
    vertical-align: bottom;
    white-space: nowrap;
  }
  
  tbody tr {
    height: 44px;
    transition-duration: 300ms;
  }
  
  tbody tr:hover * {
    background-color: #f8f8f8;
    white-space: normal;
  }
  
  th,
  td {
    padding: 0 5px;
  }
  
  th {
    padding-bottom: 10px;
    padding-top: 20px;
  }
  
  tbody:not(:first-of-type) td:first-of-type {
    font-size: 0;
  }
  
  .filtered-hidden {
    display: none;
  }
  
  .filtered-highlighted {
    background-color: lightskyblue;
    /* TODO(manukh) This is a placholder color until other ui changes occur. */
  }
  
  .toggle input,
  .toggle input:not(:checked) ~ .toggle-on,
  .toggle input:checked ~ .toggle-off {
    display: none;
  }
  
  .toggle span {
    user-select: none;
    display: inline-block;
    padding: 3px 5px;
    min-width: 60px;
    text-align: center;
    cursor: pointer;
    border: 1px solid;
  }
  
  .toggle span:hover {
    background-color: #f0f0f0;
  }
  </style>
      <div id="details"></div>
      <table id="table"></table>
    </template>
  
    <template id="details-template">
      <p>cursor position = <span class="cursor-position"></span></p>
      <p>elapsed time = <span class="time"></span>ms</p>
      <p>all providers done = <span class="done"></span></p>
      <p>host = <span class="host"></span>, has isTypedHost = <span class="is-typed-host"></span></p>
    </template>
  
    <div class="section">
      <omnibox-inputs id="omnibox-inputs"></omnibox-inputs>
    </div>
    <div class="section">
      <omnibox-output id="omnibox-output"></omnibox-output>
    </div>
  
  
  </body></html>`

};
</script>

Preparation code output

<div id='box'></div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
firstChild.remove
while (box.firstChild) {
  box.firstChild.remove();
}
pending…
lastChild Check firstChild.remove
while (box.lastChild) {
  box.firstChild.remove();
}
pending…
innerHTML
box.innerHTML = '';
pending…
removeChild(firstChild) in for-loop
for (let c = box.firstChild; c !== null; c = box.firstChild) {
  box.removeChild(c);
}
pending…
lastChild.remove
while (box.lastChild) {
  box.lastChild.remove();
}
pending…
firstChild check lastChild.remove
while (box.firstChild) {
  box.lastChild.remove();
}
pending…
removeChild(firstChild)
while (box.firstChild) {
  box.removeChild(box.firstChild);
}
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments