Add directions to the old media-internals UI

If the experiment to disable chrome://media-internals is enabled, then
we need to tell users what is up, and how to access the new version.
Of course this is dependent on the new UI getting checked in.

Bug: 794255
Change-Id: I84f71e6034c53be97a943d4c3cbc3dc2c0a9aca6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1767423
Commit-Queue: Ted Meyer <tmathmeyer@chromium.org>
Reviewed-by: Avi Drissman <avi@chromium.org>
Reviewed-by: Frank Liberato <liberato@chromium.org>
Cr-Commit-Position: refs/heads/master@{#703988}

content/browser/media/media_internals_ui.cc

@@ -12,6 +12,7 @@
 #include "content/public/browser/web_ui_data_source.h"
 #include "content/public/common/content_switches.h"
 #include "content/public/common/url_constants.h"
+#include "media/base/media_switches.h"
 
 namespace content {
 namespace {
@@ -22,7 +23,13 @@ WebUIDataSource* CreateMediaInternalsHTMLSource() {
 
   source->UseStringsJs();
 
-  source->AddResourcePath("media_internals.js", IDR_MEDIA_INTERNALS_JS);
+  if (base::FeatureList::IsEnabled(media::kMediaInspectorLogging)) {
+    source->AddResourcePath("media_internals.js",
+                            IDR_MEDIA_INTERNALS_JS_DISABLED);
+  } else {
+    source->AddResourcePath("media_internals.js", IDR_MEDIA_INTERNALS_JS);
+  }
+
   source->SetDefaultResource(IDR_MEDIA_INTERNALS_HTML);
   return source;
 }

content/browser/resources/media/manager_experiment_disabler.js

+// Copyright 2013 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 Keeps track of all the existing PlayerInfo and
+ * audio stream objects and is the entry-point for messages from the backend.
+ *
+ * The events captured by Manager (add, remove, update) are relayed
+ * to the clientRenderer which it can choose to use to modify the UI.
+ */
+var Manager = (function() {
+  'use strict';
+
+  function createChild(parent, tag) {
+    const node = document.createElement(tag);
+    parent.appendChild(node);
+    node.createTextNode = function(text) {
+      const textNode = document.createTextNode(text);
+      node.appendChild(textNode);
+    };
+    return node;
+  }
+
+  function CreateNotice() {
+    const newContents = document.createElement('div');
+    createChild(newContents, 'h1')
+        .createTextNode('Media Internals Is being moved to devtools!');
+    createChild(newContents, 'h3').createTextNode('Here\'s how to use it:');
+
+    const directions = createChild(newContents, 'ol');
+
+    const devtoolsExperiments = createChild(directions, 'li');
+    devtoolsExperiments.createTextNode(
+        'Ensure Devtools Experiments is enabled.  ');
+
+    const experimentsLink = createChild(devtoolsExperiments, 'a');
+    experimentsLink.href = 'chrome://flags/#enable-devtools-experiments';
+    experimentsLink.createTextNode('Enable Flag Here');
+
+    createChild(directions, 'li')
+        .createTextNode('In devtools (F11) press F1 (open settings).');
+    createChild(directions, 'li')
+        .createTextNode(
+            'Select the "Experiments" tab on the side,' +
+            ' and check the "Media Element Inspection" box');
+    createChild(directions, 'li')
+        .createTextNode(
+            'Restart devtools, and find "Media" under the "More Tools" menu.');
+    return newContents;
+  }
+
+  function Manager(clientRenderer) {
+    this.clientRenderer_ = clientRenderer;
+    // Remove contents and add message.
+    this.media_tab_ = $('players');
+    this.media_tab_.innerHTML = '';
+    this.media_tab_.appendChild(CreateNotice());
+  }
+
+  Manager.prototype = {};
+
+  return Manager;
+}());

content/browser/resources/media/media_internals_disabled.js

+// Copyright 2013 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.
+
+var media = {};
+
+// <include src="main.js">
+// <include src="util.js">
+// <include src="player_info.js">
+// <include src="manager.js">
+// <include src="manager_experiment_disabler.js">
+// <include src="client_renderer.js">
+
+media.initialize(new Manager(new ClientRenderer()));
+if (cr.ui) {
+  cr.ui.decorate('tabbox', cr.ui.TabBox);
+}

content/content_resources.grd

@@ -30,6 +30,7 @@
       <include name="IDR_INDEXED_DB_INTERNALS_CSS" file="browser/resources/indexed_db/indexeddb_internals.css" flattenhtml="true" compress="gzip" type="BINDATA" />
       <include name="IDR_MEDIA_INTERNALS_HTML" file="browser/resources/media/media_internals.html" flattenhtml="true" allowexternalscript="true" compress="gzip" type="BINDATA" />
       <include name="IDR_MEDIA_INTERNALS_JS" file="browser/resources/media/media_internals.js" flattenhtml="true" compress="gzip" type="BINDATA" />
+      <include name="IDR_MEDIA_INTERNALS_JS_DISABLED" file="browser/resources/media/media_internals_disabled.js" flattenhtml="true" compress="gzip" type="BINDATA" />
       <include name="IDR_NETWORK_ERROR_LISTING_HTML" file="browser/resources/net/network_errors_listing.html" flattenhtml="true" allowexternalscript="true" compress="gzip" type="BINDATA" />
       <include name="IDR_NETWORK_ERROR_LISTING_JS" file="browser/resources/net/network_errors_listing.js" flattenhtml="true" type="BINDATA" compress="gzip" />
       <include name="IDR_NETWORK_ERROR_LISTING_CSS" file="browser/resources/net/network_errors_listing.css" flattenhtml="true" type="BINDATA" compress="gzip" />