DevTools: visualize deps

See bug for screenshots. You can use it with graphviz or d3! BUG=679901 Review-Url: https://codereview.chromium.org/2624873002 Cr-Commit-Position: refs/heads/master@{#442769}

DevTools: visualize deps
See bug for screenshots. You can use it with graphviz or d3! BUG=679901 Review-Url: https://codereview.chromium.org/2624873002 Cr-Commit-Position: refs/heads/master@{#442769}
f3c65860 · chenwilliam · Commit bot · 9ef6c424 · f3c65860 · f3c65860
Commit f3c65860 authored Jan 10, 2017 by chenwilliam Committed by Commit bot Jan 11, 2017
4 changed files
--- a/third_party/WebKit/Source/devtools/.gitignore
+++ b/third_party/WebKit/Source/devtools/.gitignore
@@ -15,4 +15,5 @@ npm-debug.log
 /devtools-node-modules
 /release
 /scripts/local_node/runtimes
-/front_end/protocol_externs.js
+/scripts/visualize_deps/out
+/front_end/protocol_externs.js
\ No newline at end of file
--- a/third_party/WebKit/Source/devtools/scripts/visualize_deps/d3.html
+++ b/third_party/WebKit/Source/devtools/scripts/visualize_deps/d3.html
+<!doctype html>
+<meta charset="utf-8">
+<script src="http://d3plus.org/js/d3.js"></script>
+<script src="http://d3plus.org/js/d3plus.js"></script>
+<script src="out/modules.js"></script>
+<div id="viz"></div>
+
+<script>
+function getParameterByName(name, url) {
+      if (!url) {
+              url = window.location.href;
+                  }
+          name = name.replace(/[\[\]]/g, "\\$&");
+              var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+                  results = regex.exec(url);
+                  if (!results) return null;
+                      if (!results[2]) return '';
+                          return decodeURIComponent(results[2].replace(/\+/g, " "));
+}
+
+var visualization = d3plus.viz()
+  .container("#viz")
+  .type("rings")
+  .edges(modules.map(([k, v])=> {return {source: k, target: v}}))
+  .edges({"arrows": true})
+  .focus(getParameterByName('id') || "sdk")
+  .draw();
+</script>
--- a/third_party/WebKit/Source/devtools/scripts/visualize_deps/generate_dot.js
+++ b/third_party/WebKit/Source/devtools/scripts/visualize_deps/generate_dot.js
+// Copyright 2016 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.
+
+"use strict";
+
+const fs = require('fs');
+const path = require('path');
+
+const utils = require('../utils');
+
+const FRONTEND_PATH = path.resolve(__dirname, '..', '..', 'front_end');
+const OUT = path.resolve(__dirname, 'out', 'dependencies.dot');
+
+function main() {
+  const modules = new Set();
+  const moduleToDependencyList = ['digraph dependencies {'];
+  fs.readdirSync(FRONTEND_PATH).forEach(function(file) {
+    const moduleJSONPath = path.join(FRONTEND_PATH, file, 'module.json');
+    if (fs.statSync(path.join(FRONTEND_PATH, file)).isDirectory() &&
+      utils.isFile(moduleJSONPath)) {
+      const module = file;
+      modules.add(module);
+      const moduleJSON = require(moduleJSONPath);
+      if (moduleJSON.dependencies) {
+        for (let d of moduleJSON.dependencies) {
+          moduleToDependencyList.push(`  ${module} -> ${d}`);
+        }
+      }
+    }
+  });
+  moduleToDependencyList.push('}');
+  const content = moduleToDependencyList.join('\n');
+  fs.writeFileSync(OUT, content);
+}
+
+if (require.main === module)
+  main();
\ No newline at end of file
--- a/third_party/WebKit/Source/devtools/scripts/visualize_deps/generate_js.js
+++ b/third_party/WebKit/Source/devtools/scripts/visualize_deps/generate_js.js
+"use strict";
+
+const fs = require('fs');
+const path = require('path');
+
+const utils = require('../utils');
+
+const FRONTEND_PATH = path.resolve(__dirname, '..', '..', 'front_end');
+const OUT = path.resolve(__dirname, 'out', 'modules.js');
+
+function main() {
+  const modules = new Set();
+  const moduleToDependencyList = [];
+  fs.readdirSync(FRONTEND_PATH).forEach(function(file) {
+    const moduleJSONPath = path.join(FRONTEND_PATH, file, 'module.json');
+    if (fs.statSync(path.join(FRONTEND_PATH, file)).isDirectory() &&
+      utils.isFile(moduleJSONPath)) {
+      const module = file;
+      modules.add(module);
+      const moduleJSON = require(moduleJSONPath);
+      if (moduleJSON.dependencies) {
+        for (let d of moduleJSON.dependencies) {
+          moduleToDependencyList.push([module, d]);
+        }
+      }
+    }
+  });
+  const nodes = Array.from(modules);
+  fs.writeFileSync(OUT, `var modules = ${JSON.stringify(moduleToDependencyList)}; var nodes = ${JSON.stringify(nodes)};`);
+}
+
+if (require.main === module)
+  main();
\ No newline at end of file