GoogleChromeLabs · argyleink · Nov 19, 2018 · Nov 19, 2018 · Jan 14, 2021 · Jan 14, 2021
diff --git a/app/features/selectable.js b/app/features/selectable.js
@@ -710,9 +710,20 @@ export function Selectable(visbug) {
   const removeSelectedCallback = cb =>
     selectedCallbacks = selectedCallbacks.filter(callback => callback != cb)
 
-  const tellWatchers = () =>
+  const layersFromDOM = ({nodeName, className, id, children}) => ({
+    nodeName, className, id,
+    children: [...children].map(layersFromDOM),
+  })
+
+  const tellWatchers = () => {
     selectedCallbacks.forEach(cb => cb(selected))
 
+    visbug.$shadow.host.dispatchEvent(new CustomEvent('selected', {
+      bubbles: true,
+      detail: JSON.stringify(selected.map(layersFromDOM)),
+    }))
+  }
+
   const disconnect = () => {
     unselect_all()
     unlisten()

diff --git a/extension/manifest.json b/extension/manifest.json
@@ -4,6 +4,7 @@
   "description": "Open source browser design tools",
   "manifest_version": 2,
   "icons": { "128": "icons/visbug.png" },
+  "devtools_page": "panel/index.html",
   "permissions": [
     "activeTab",
     "contextMenus",

diff --git a/extension/pane/sizing/index.html b/extension/pane/sizing/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<head>
+  <style>
+    body {
+      margin: 0;
+    }
+  </style>
+</head>
+<body>
+  <p>Calculated/authored/natural/responsive</p>
+</body>
+</html>
diff --git a/extension/pane/styleguide/index.html b/extension/pane/styleguide/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<head>
+  <style>
+    body {
+      margin: 0;
+    }
+  </style>
+</head>
+<body>
+  <p>fonts/colors/spacing/etc</p>
+</body>
+</html>
diff --git a/extension/pane/visbug/index.html b/extension/pane/visbug/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<head>
+  <style>
+    body {
+      margin: 0;
+    }
+  </style>
+</head>
+<body>
+  <p>Hello from VisBug</p>
+</body>
+</html>
diff --git a/extension/panel/demo.png b/extension/panel/demo.png
diff --git a/extension/panel/index.html b/extension/panel/index.html
@@ -0,0 +1,6 @@
+<html>
+<head></head>
+<body>
+  <script src="index.js" type="module"></script>
+</body>
+</html>
diff --git a/extension/panel/index.js b/extension/panel/index.js
@@ -0,0 +1,20 @@
+// init panels
+chrome.devtools.panels.create('Design', null, 'panel/panel.html', design_panel => {
+  // design_panel.onShown.addListener(e =>
+  //   post({action: 'show-toolbar'}))
+})
+
+chrome.devtools.panels.elements.createSidebarPane('VisBug', sidebar => {
+  sidebar.setPage('../pane/visbug/index.html')
+  sidebar.setHeight('8ex')
+})
+
+chrome.devtools.panels.elements.createSidebarPane('Style Guide', sidebar => {
+  sidebar.setPage('../pane/styleguide/index.html')
+  sidebar.setHeight('8ex')
+})
+
+chrome.devtools.panels.elements.createSidebarPane('Sizing', sidebar => {
+  sidebar.setPage('../pane/sizing/index.html')
+  sidebar.setHeight('8ex')
+})
diff --git a/extension/panel/panel.bundle.css b/extension/panel/panel.bundle.css
@@ -0,0 +1,83 @@
+:root {
+  --bg: hsl(0,0%,100%);
+  --bg-hover: hsl(0,0%,95%);
+  --dot: hsl(0,0%,90%);
+  --text: hsl(0,0%,10%);
+}
+
+body {
+  margin: 0;
+  background-color: var(--bg);
+  color: var(--text);
+  background-image: -webkit-repeating-radial-gradient(
+    center center, 
+    rgba(0,0,0,.05), 
+    rgba(0,0,0,.05) 1px, 
+    transparent 1px, 
+    transparent 100%
+  );
+  background-size: 0.5rem 0.5rem
+}
+
+body.dark {
+    --bg: hsl(0,0%,15%);
+    --bg-hover: hsl(0,0%,20%);
+    --dot: hsl(0,0%,25%);
+    --text: hsl(0,0%,80%);
+  }
+
+img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+#layers {
+  background-color: var(--bg);
+  color: var(--text);
+  padding: 0.5rem;
+}
+
+ol {
+  padding: 0;
+  margin: 0;
+  list-style-type: none
+}
+
+ol > li,
+  ol li > .layer {
+    margin-left: 0.8rem;
+  }
+
+details > summary:focus {
+    /*outline-color: hotpink;*/
+    outline: none;
+  }
+
+details > summary::-webkit-details-marker {
+    color: hotpink;
+  }
+
+details .layer {
+  padding: 0.5rem 1rem;
+  border-radius: 1rem
+}
+
+details .layer:hover {
+    background: var(--bg-hover);
+    cursor: pointer;
+  }
+
+.layer {
+  display: inline-flex;
+  align-items: center;
+}
+
+details [icon] {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background-color: var(--dot);
+  display: inline-block;
+  margin-right: 0.5rem;
+}
diff --git a/extension/panel/panel.css b/extension/panel/panel.css
@@ -0,0 +1,85 @@
+:root {
+  --bg: hsl(0,0%,100%);
+  --bg-hover: hsl(0,0%,95%);
+  --dot: hsl(0,0%,90%);
+  --text: hsl(0,0%,10%);
+}
+
+body {
+  margin: 0;
+  background-color: var(--bg);
+  color: var(--text);
+  background-image: -webkit-repeating-radial-gradient(
+    center center, 
+    rgba(0,0,0,.05), 
+    rgba(0,0,0,.05) 1px, 
+    transparent 1px, 
+    transparent 100%
+  );
+  background-size: 0.5rem 0.5rem;
+
+  &.dark {
+    --bg: hsl(0,0%,15%);
+    --bg-hover: hsl(0,0%,20%);
+    --dot: hsl(0,0%,25%);
+    --text: hsl(0,0%,80%);
+  }
+}
+
+img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+#layers {
+  background-color: var(--bg);
+  color: var(--text);
+  padding: 0.5rem;
+}
+
+ol {
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+
+  & > li,
+  & li > .layer {
+    margin-left: 0.8rem;
+  }
+}
+
+details > summary {
+  &:focus {
+    /*outline-color: hotpink;*/
+    outline: none;
+  }
+
+  &::-webkit-details-marker {
+    color: hotpink;
+  }
+}
+
+details .layer {
+  padding: 0.5rem 1rem;
+  border-radius: 1rem;
+
+  &:hover {
+    background: var(--bg-hover);
+    cursor: pointer;
+  }
+}
+
+.layer {
+  display: inline-flex;
+  align-items: center;
+}
+
+details [icon] {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background-color: var(--dot);
+  display: inline-block;
+  margin-right: 0.5rem;
+}
diff --git a/extension/panel/panel.html b/extension/panel/panel.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+  <link rel="stylesheet" href="panel.bundle.css">
+</head>
+<body>
+  <!-- <img src="demo.png"> -->
+
+  <div id="layers"></div>
+
+  <script src="panel.js" type="module"></script>
+</body>
+</html>
diff --git a/extension/panel/panel.js b/extension/panel/panel.js
@@ -0,0 +1,54 @@
+import Channel from '../utils/channel.js'
+
+const channel_name = 'design-panel'
+const Pipe = new Channel({
+  name: channel_name,
+  model: {
+    tabId:          chrome.devtools.inspectedWindow.tabId,
+    src_channel:    channel_name,
+    target_channel: 'design-artboard',
+  }
+})
+
+document.body.classList.add(
+  chrome.devtools.panels.themeName)
+
+Pipe.port.onMessage.addListener((message, sender) => {
+  console.log(`${channel_name} recieved port message`, message, sender)
+
+  if (message.action == 'selected')
+    render_layers(message.payload)
+})
+
+Pipe.message.onMessage.addListener((request, sender, sendResponse) => {
+  console.log(`${channel_name} onMessage`, request)
+})
+
+// todo: render node props then children
+const recurse_nodes = ({nodeName, className, id, children}) => `
+  <details open>
+    <summary class="layer">
+      <span icon></span>
+      ${nodeName}${id ? '#' + id : ''} ${className}
+    </summary>
+    <ol>
+      ${children.map(node =>
+        node.children.length
+          ? `<li>${recurse_nodes(node)}</li>`
+          : `
+              <li>
+                <span class="layer">
+                  <span icon></span>
+                  ${node.nodeName}${node.id ? '#' + node.id : ''} ${node.className}
+                </span>
+              </li>
+            `
+      ).join('')}
+    </ol>
+  </details>
+`
+
+const render_layers = nodes => {
+  console.log('show in dom', nodes)
+  document.getElementById('layers').innerHTML = nodes.map(recurse_nodes).join('')
+}