Style tweeks for chrome

Author: Timothy Johnson

dest/background.js

@@ -80,6 +80,7 @@ async function loadInlineScripts() {
           const newTag = document.createElement('script')
           newTag.text = "${script.source
             .replace(/"/g, '\\"')
+            .replace(/\\n/g, '\\\\n')
             .replace(/\n/g, '\\n')}"
           if (tag == null)
             document.head.append(newTag)

dest/devtools/index.js

@@ -5,7 +5,7 @@ chrome.devtools.panels.create(
   panel =>
     panel.onShown.addListener(() =>
       chrome.devtools.inspectedWindow.eval(
-        '__svelte_devtools_select_element($0)',
+        'window.__svelte_devtools_select_element($0)',
         (result, err) => err && console.error(err)
       )
     )

dest/devtools/panel.html

@@ -6,14 +6,14 @@
     <style>
       html {
         height: 100%;
-        font-size: 11px;
-        font-family: monospace;
       }
 
       body {
         display: flex;
         margin: 0;
         height: 100%;
+        font-size: 11px;
+        font-family: monospace;
       }
 
       ul {

dest/privilegedContent.js

@@ -6,8 +6,7 @@
 
   window.__svelte_devtools_select_element = function(element) {
     let node = nodeMap.get(element)
-    if (node)
-      window.postMessage({ type: 'setSelected', node: serializeNode(node) })
+    if (node) window.postMessage({ type: 'inspect', node: serializeNode(node) })
   }
 
   window.addEventListener('message', e => handleMessage(e.data), false)

src/App.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <style>
-  div {
+  ul {
     flex-grow: 1;
     margin-top: 8px;
   }
@@ -19,11 +19,11 @@
 </style>
 
 {#if $rootNodes.length}
-  <div on:mouseleave={e => ($hoveredNodeId = null)}>
+  <ul on:mouseleave={e => ($hoveredNodeId = null)}>
     {#each $rootNodes as node (node.id)}
       <Node {node} />
     {/each}
-  </div>
+  </ul>
   <ComponentView />
 {:else}
   <p>

src/Editable.svelte

@@ -47,6 +47,7 @@
   input {
     flex-grow: 1;
     margin-right: 10px;
+    outline: none;
     border: none;
     box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
     font-size: inherit;

src/store.js

@@ -75,7 +75,7 @@ port.onMessage.addListener(msg => {
       break
     }
 
-    case 'setSelected': {
+    case 'inspect': {
       let node = nodeMap.get(msg.node.id)
       selectedNode.set(node)
       while ((node = node.parent)) node.collapsed = false