[WebAudio DevTools] Add Dagre as a devtools/front_end module

- What is dagre?
- Dagre is a graph layouting library used by the graph visualizer of
  web_audio. It implements several research papers about layouting graph.
  License: MIT license.
  Size: The size of dagre.js 323 KB. The core of dagre.js is 83 KB.
  Github repo: https://github.com/dagrejs/dagre

- Why should we add Dagre as a module, instead of a folder under web_audio?
- Dagre is used by both web_audio and web_audio_worker. Therefore,
  it seems better to be a module that can be used as a dependency.
  web_audio_worker is a Web Worker that runs `dagre.layout()`. For more
  information about web_audio and web_audio_worker, here is a link to
  the POC CL:
  https://chromium-review.googlesource.com/c/chromium/src/+/1744801

Bug: 974343
Change-Id: Id81de6c171f64781baefac92abb79b691eee57a7
Tricium: disable
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1749643Reviewed-by: Erik Luo <luoe@chromium.org>
Commit-Queue: Hongchan Choi <hongchan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#702556}

third_party/blink/renderer/devtools/BUILD.gn

@@ -195,6 +195,8 @@ all_devtools_files = [
   "front_end/coverage_test_runner/module.json",
   "front_end/cpu_profiler_test_runner/module.json",
   "front_end/cpu_profiler_test_runner/ProfilerTestRunner.js",
+  "front_end/dagre_layout/dagre.js",
+  "front_end/dagre_layout/module.json",
   "front_end/data_grid/dataGrid.css",
   "front_end/data_grid/DataGrid.js",
   "front_end/data_grid/module.json",
@@ -1356,6 +1358,7 @@ generated_remote_modules = [
   "$resources_out_dir/accessibility/accessibility_module.js",
   "$resources_out_dir/audits_worker/audits_worker_module.js",
   "$resources_out_dir/cm_modes/cm_modes_module.js",
+  "$resources_out_dir/dagre_layout/dagre_layout_module.js",
   "$resources_out_dir/emulated_devices/emulated_devices_module.js",
   "$resources_out_dir/product_registry_impl/product_registry_impl_module.js",
 ]

third_party/blink/renderer/devtools/front_end/dagre_layout/LICENSE

+MIT License
+
+Copyright (c) 2012-2014 Chris Pettitt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

third_party/blink/renderer/devtools/front_end/dagre_layout/README.md

+# Rolling Dagre
+
+## What is dagre?
+Dagre is a third-party graph layouting library, which is used by the graph visualizer of
+Chrome `DevTools/web_audio`. It implements several research papers about layouting graph.
+1. Size: The size of dagre.js 323 KB. The core of dagre.js is 83 KB.
+2. Github repo: https://github.com/dagrejs/dagre
+
+## Why should we add Dagre as a module, instead of a folder under web_audio?
+Dagre is used by both `DevTools/web_audio` and `DevTools/web_audio_worker`. Therefore,
+it seems better to be a module that can be used as a dependency. For example,
+`web_audio` constructs `dagre.graphlib.Graph` and sends to `web_audio_worker`, which is a Web Worker that runs `dagre.layout()`.
+
+## Updating Dagre
+1. Download from https://github.com/dagrejs/dagre/blob/master/dist/dagre.js
+2. Optionally add a comment "// clang-format off" at the beginning of `dagre.js`.

third_party/blink/renderer/devtools/front_end/dagre_layout/module.json

+{
+  "scripts": [
+      "dagre.js"
+  ],
+  "skip_compilation": [
+      "dagre.js"
+  ]
+}

third_party/blink/renderer/devtools/front_end/devtools_app.json

@@ -10,6 +10,7 @@
     { "name": "browser_debugger" },
     { "name": "css_overview" },
     { "name": "cookie_table" },
+    { "name": "dagre_layout", "type": "remote" },
     { "name": "devices" },
     { "name": "elements" },
     { "name": "emulated_devices" , "type": "remote" },

third_party/blink/renderer/devtools/front_end/externs.js

@@ -723,6 +723,38 @@ Acorn.Comment;
  */
 Acorn.TokenOrComment;
 
+const dagre = {};
+dagre.graphlib = {};
+/**
+ * @constructor
+ */
+dagre.graphlib.Graph = function() {};
+
+dagre.graphlib.json = {};
+
+/**
+ * @param {string} graphData
+ * @return {!dagre.graphlib.Graph}
+ */
+dagre.graphlib.json.read = function(graphData) {};
+
+/**
+ * @param {!dagre.graphlib.Graph} graph
+ * @return {string}
+ */
+dagre.graphlib.json.write = function(graph) {};
+
+/**
+ * @param {!dagre.graphlib.Graph} graph
+ * @param {?Object=} options
+ */
+dagre.layout = function(graph, options) {};
+// Since the object types in JSDoc should use capitalized `Dagre`, dagre is renamed as Dagre below.
+// Note that `var Dagre={}` will be added in dagre_module.js, so to prevent variable redefinition,
+// the workaround is to name the module+folder as `dagre_layout`. This workaround is similar to
+// `cm` and `CodeMirror`.
+const Dagre = dagre;
+
 const ESTree = {};
 
 /**