GoogleChromeLabs · argyleink · Sep 6, 2018 · Sep 23, 2018 · Sep 23, 2018 · Oct 6, 2018
diff --git a/app/components/tool-pallete/toolpallete.element.js b/app/components/tool-pallete/toolpallete.element.js
@@ -43,9 +43,9 @@ export default class ToolPallete extends HTMLElement {
     this.$shadow = this.attachShadow({mode: 'open'})
     this.$shadow.innerHTML = this.render()
 
-    this.selectorEngine = Selectable()
-    this.colorPicker    = ColorPicker(this.$shadow, this.selectorEngine)
-    provideSelectorEngine(this.selectorEngine)
+    this._selectorEngine = Selectable()
+    this.colorPicker    = ColorPicker(this.$shadow, this._selectorEngine)
+    provideSelectorEngine(this._selectorEngine)
   }
 
   connectedCallback() {
@@ -62,7 +62,7 @@ export default class ToolPallete extends HTMLElement {
 
   disconnectedCallback() {
     this.deactivate_feature()
-    this.selectorEngine.disconnect()
+    this._selectorEngine.disconnect()
     hotkeys.unbind(
       Object.keys(this.toolbar_model).reduce((events, key) =>
         events += ',' + key, ''))
@@ -135,9 +135,9 @@ export default class ToolPallete extends HTMLElement {
   } 
 
   text() {
-    this.selectorEngine.onSelectedUpdate(EditText)
+    this._selectorEngine.onSelectedUpdate(EditText)
     this.deactivate_feature = () => 
-      this.selectorEngine.removeSelectedCallback(EditText)
+      this._selectorEngine.removeSelectedCallback(EditText)
   }
 
   align() {
@@ -154,15 +154,15 @@ export default class ToolPallete extends HTMLElement {
 
   hueshift() {
     let feature = HueShift(this.colorPicker)
-    this.selectorEngine.onSelectedUpdate(feature.onNodesSelected)
+    this._selectorEngine.onSelectedUpdate(feature.onNodesSelected)
     this.deactivate_feature = () => {
-      this.selectorEngine.removeSelectedCallback(feature.onNodesSelected)
+      this._selectorEngine.removeSelectedCallback(feature.onNodesSelected)
       feature.disconnect()
     }
   }
 
   inspector() {
-    this.deactivate_feature = MetaTip(this.selectorEngine)
+    this.deactivate_feature = MetaTip(this._selectorEngine)
   }
 
   accessibility() {
@@ -179,16 +179,20 @@ export default class ToolPallete extends HTMLElement {
 
   position() {
     let feature = Position()
-    this.selectorEngine.onSelectedUpdate(feature.onNodesSelected)
+    this._selectorEngine.onSelectedUpdate(feature.onNodesSelected)
     this.deactivate_feature = () => {
-      this.selectorEngine.removeSelectedCallback(feature.onNodesSelected)
+      this._selectorEngine.removeSelectedCallback(feature.onNodesSelected)
       feature.disconnect()
     }
   }
 
   get activeTool() {
     return this.active_tool.dataset.tool
   }
+
+  get selectorEngine() {
+    return this._selectorEngine
+  }
 }
 
 customElements.define('tool-pallete', ToolPallete)
diff --git a/extension/manifest.json b/extension/manifest.json
@@ -1,11 +1,13 @@
 {
   "name": "PixelBug",
-  "version": "0.1.5",
+  "version": "0.1.51",
   "description": "Hacking for Designers",
   "manifest_version": 2,
   "icons": { "128": "icons/128.png" },
+  "devtools_page": "panel/index.html",
   "permissions": [
-    "activeTab"
+    "activeTab",
+    "contextMenus"
   ],
   "background": {
     "persistent": true,

diff --git a/extension/pane/pixelbug/index.html b/extension/pane/pixelbug/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+<head>
+  <style>
+    body {
+      margin: 0;
+    }
+  </style>
+</head>
+<body>
+  <p>Hello from PixelBug</p>
+</body>
+</html>
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/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('PixelBug', sidebar => {
+  sidebar.setPage('../pane/pixelbug/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,89 @@
+: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: hsl(0,0%,100%);
+  background-color: var(--bg);
+  color: hsl(0,0%,10%);
+  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: hsl(0,0%,100%);
+  background-color: var(--bg);
+  color: hsl(0,0%,10%);
+  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: hsl(0,0%,95%);
+    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: hsl(0,0%,90%);
+  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>