initial commit

redom · Apr 5, 2017 · 344caff · 344caff
commit 344caff
Show file tree

Hide file tree

Showing 15 changed files with 166 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist.zip
diff --git a/build.js b/build.js
@@ -0,0 +1,42 @@
+const fs = require('fs');
+const archiver = require('archiver');
+
+const pkg = require('./package.json');
+const distPkg = require('./dist/manifest.json');
+
+if (distPkg.version !== pkg.version) {
+  console.log('changing', 'dist/package.json from', distPkg.version, 'to', pkg.version);
+  distPkg.version = pkg.version;
+  fs.writeFileSync('./dist/manifest.json', JSON.stringify(distPkg, null, 2));
+}
+
+console.log('Creating dist.zip');
+
+const zip = fs.createWriteStream('./dist.zip');
+const archive = archiver('zip', {
+  zlib: { level: 9 }
+});
+
+zip.on('close', function () {
+  console.log('done!');
+});
+
+archive.on('error', function (err) {
+  throw err;
+});
+
+archive.pipe(zip);
+
+fs.readdir('./dist', (err, files) => {
+  if (err) {
+    throw err;
+  }
+  files.forEach(file => {
+    if (file[0] === '.') {
+      return;
+    }
+    console.log(file);
+    archive.append(fs.createReadStream('./dist/' + file), { name: file });
+  });
+  archive.finalize();
+});
diff --git a/dist/devtools.html b/dist/devtools.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <script src="devtools.js"></script>
+  </body>
+</html>
diff --git a/dist/devtools.js b/dist/devtools.js
@@ -0,0 +1,45 @@
+/* global chrome, $0 */
+const getView = function () {
+  return $0 && $0.__redom_view;
+};
+
+const init = function () {
+  const view = window.$r = $0 && $0.__redom_view;
+
+  return view && view.constructor.name;
+};
+
+const findFirstViews = function () {
+  return iterate($0, []);
+
+  function iterate (node, results) {
+    let traverse = node.firstChild;
+
+    while (traverse) {
+      if (traverse.__redom_view) {
+        results.push(traverse);
+      } else {
+        iterate(traverse, results);
+      }
+      traverse = traverse.nextSibling;
+    }
+
+    return results;
+  }
+};
+
+chrome.devtools.panels.create('RE:DOM', 'icon48.png', 'doc.html');
+
+chrome.devtools.panels.elements.createSidebarPane('RE:DOM', function (sidebar) {
+  const updateElementProperties = () => {
+    chrome.devtools.inspectedWindow.eval(`(${init.toString()})()`, function (result) {
+      if (result) {
+        sidebar.setExpression(`(${getView.toString()})()`, 'View: ' + result);
+      } else {
+        sidebar.setExpression(`(${findFirstViews.toString()})()`, 'Child views');
+      }
+    });
+  };
+  updateElementProperties();
+  chrome.devtools.panels.elements.onSelectionChanged.addListener(updateElementProperties);
+});
diff --git a/dist/doc.html b/dist/doc.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      body {
+        color: #222;
+      }
+      code {
+        font-size: inherit;
+        background-color: #e5e5e5;
+        margin: -.1rem 0;
+        padding: .1rem .2rem;
+      }
+      #logo {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+      #screenshot {
+        display: block;
+        margin: 1.5rem auto;
+        max-width: calc(100% - 3rem);
+        box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .25);
+      }
+    </style>
+  </head>
+  <body>
+    <h1>RE:DOM Developer Tools</h1>
+    <ul>
+      <li>Open elements panel</li>
+      <li>Select element you want to inspect</li>
+      <li>Open RE:DOM tab</li>
+      <li>Use <code>$r</code> shortcut in console</li>
+    </ul>
+    <img id="screenshot" src="screenshot.png">
+    <img id="logo" src="icon128.png">
+  </body>
+</html>
diff --git a/dist/icon128.png b/dist/icon128.png
diff --git a/dist/icon16.png b/dist/icon16.png
diff --git a/dist/icon48.png b/dist/icon48.png
diff --git a/dist/manifest.json b/dist/manifest.json
@@ -0,0 +1,16 @@
+{
+  "manifest_version": 2,
+  "name": "RE:DOM dev tools",
+  "version": "1.0.0",
+  "description": "RE:DOM extension for Chrome devtools",
+  "devtools_page": "devtools.html",
+  "web_accessible_resources": [
+    "devtools.html",
+    "sidebarpane.html"
+  ],
+  "icons": {
+    "16": "icon16.png",
+    "48": "icon48.png",
+    "128": "icon128.png"
+  }
+}
diff --git a/dist/screenshot.png b/dist/screenshot.png
diff --git a/imgs/1280x800.png b/imgs/1280x800.png
diff --git a/imgs/1400x560.png b/imgs/1400x560.png
diff --git a/imgs/440x280.png b/imgs/440x280.png
diff --git a/imgs/920x680.png b/imgs/920x680.png
diff --git a/package.json b/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "redom-devtools",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "node build",
+    "version": "node run build && git add .",
+    "postversion": "git push --tags",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "archiver": "~1.3.0"
+  }
+}