Profile plugin, trace viewer, does not work in Chrome 80+

Chrome 80+ deprecated two APIs: document.registerElement and Element.prototype.createShadowRoot. This broke Chrome’s trace viewer, Catapult, which was assuming presence of the APIs on Chrome (it did not include proper polyfills; was only meant to run in Chrome anyways!).

To overcome the issue, we have tried few things and I will try to enumerate what was tried:

• include the webcomponents polyfill
  • Catapult uses Polymer 1.x which uses document.registerElement
  • only polyfill v0.x (https://github.com/webcomponents/webcomponentsjs/tree/v0.7.24) contains the polyfill for document.registerElement
• catapult has checks for real shadow DOM as opposed to polyfilled shadow DOM
  • it uses the value here: https://github.com/Polymer/polymer/blob/7a0f0181f573b79a1ec0b42a12bee37508ca52c6/polymer-micro.html#L39
  • Polymer.Settings does feature detection by checking for certain APIs
  • webcomponentjs does not polyfill Element.prototype.createShadowRoot which is critical for the feature detection: https://github.com/Polymer/polymer/blob/7a0f0181f573b79a1ec0b42a12bee37508ca52c6/polymer-micro.html#L33
• We can manually polyfill Element.prototype.createShadowRoot by using Element.prototype.attachShadow

Element.prototype.createShadowRoot = function() {
      const name = this.tagName;
      if (name.includes('-') ||
          name == 'div' ||
          name ==  'article' ||
          name == 'aside' ||
          name == 'blockquote' ||
          name == 'body' ||
          name == 'div' ||
          name == 'footer' ||
          name == 'h1' ||
          name == 'h2' ||
          name == 'h3' ||
          name == 'h4' ||
          name == 'h5' ||
          name == 'h6' ||
          name == 'header' ||
          name == 'main' ||
          name == 'nav' ||
          name == 'p' ||
          name == 'section' ||
          name == 'span'
      ) {
        return this.attachShadow({mode: 'open'});
      }
    };

• Even with our polyfill for createShadowRoot, we still get below

Uncaught DOMException: Failed to execute 'appendChild' on 'Node': Nodes of type '#document-fragment' may not be inserted inside nodes of type '#document'.
    at DomApi.<computed> [as appendChild

At this point, we can try to identify the problem and manually patch everything to make sure trace_viewer works (barely), but I think we should try to look what it will take to:

1. turn off native shadow DOM requirement, and
2. upgrade dependency on catapult to use Polymer 2.x and polyfill v1

If above two things are done, we will be able to fix #1291.

@psybuzz I can see how to vulcanize the trace viewer but I have no idea how the dependencies are managed in Chromium/catapult. Can you please help us try above two? I think I can, too, check for correctness of (1).

[mathpluscode]

Got the same problem and if the Host is local, you need to add a point after local like host=local.&run= to make it work

[psybuzz]

If your TensorBoard process is running and you have a Chromium-based browser (e.g. the new Edge, Brave, Opera, Chrome), you can do this specifically as follows:

• Get the [run name] (e.g. “profile_demo/foo”) from the left sidepane (or if you know it). If you have any [host name] other than ‘default’, get that too
• Craft a URL in this form: http://<tensorboard-url>/data/plugin/profile/data?host=<host-name>&run=<run-name>&tag=trace_viewer. For example if you are running TensorBoard on the origin localhost:6006 with run profile_demo/foo and empty host name, you would write the URL: http://localhost:6006/data/plugin/profile/data?host=&run=profile_demo%2Ffoo&tag=trace_viewer
• In your browser, open a tab and navigate to the URL you crafted from the last step. The page should show you the raw JSON data, something like this:
• Now, you can do Ctrl+S to save the page as a .json file on your filesystem.
• Then in a new browser tab, navigate to the url about://tracing. This should open your browser’s trace viewing tool. Click the “load” button in the top-left
• Once you select the .json file that you saved earlier, it should load the trace into the viewer, and show what would normally appear in the TensorBoard Profile plugin:

Please let us know if one of these steps doesn’t work.