feat: improved popup

Author: Akryum

packages/shell-chrome/popups/devtools-screenshot.png

@@ -1,7 +1,19 @@
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="./popup.css">
 
-<p>
-  <strong>Vue.js is detected on this page.</strong><br/>
-  Open DevTools and look for the Vue panel.
-</p>
+<div class="flex">
+  <div class="screenshot">
+    <img src="./devtools-screenshot.png" alt="Screenshot">
+  </div>
+
+  <div>
+    <p>
+      <strong>Vue.js is detected on this page.</strong><br/>
+      Open DevTools and look for the Vue panel.
+    </p>
+    
+    <p>
+      <a href="https://devtools.vuejs.org/guide/faq.html#the-vue-devtools-don-t-show-up" target="_blank">Troubleshooting</a>
+    </p>
+  </div>
+</div>

packages/shell-chrome/popups/enabled.html

@@ -1,7 +1,19 @@
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="./popup.css">
 
-<p>
-  <strong>Nuxt.js + Vue.js is detected on this page.</strong><br/>
-  Open DevTools and look for the Vue panel.
-</p>
+<div class="flex">
+  <div class="screenshot">
+    <img src="./devtools-screenshot.png" alt="Screenshot">
+  </div>
+
+  <div>
+    <p>
+      <strong>Nuxt.js + Vue.js is detected on this page.</strong><br/>
+      Open DevTools and look for the Vue panel.
+    </p>
+    
+    <p>
+      <a href="https://devtools.vuejs.org/guide/faq.html#the-vue-devtools-don-t-show-up" target="_blank">Troubleshooting</a>
+    </p>
+  </div>
+</div>

packages/shell-chrome/popups/enabled.nuxt.html

@@ -1,9 +1,11 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700,700i');
+
 body {
   font-family: Roboto, Avenir, Helvetica, Arial, sans-serif;
   font-size: 14px;
   font-weight: 400;
   line-height: 1.4;
-  padding: 10px 12px 12px 12px;
+  padding: 18px 24px;
   color: #2c3e50;
 }
 
@@ -21,3 +23,25 @@ p {
   min-width: initial;
   white-space: nowrap;
 }
+
+a {
+  color: #42B983;
+}
+
+.flex {
+  display: flex;
+  align-items: center;
+}
+
+.screenshot {
+  position: relative;
+}
+
+.screenshot > img {
+  width: 140px;
+  height: 140px;
+  object-fit: cover;
+  border-radius: 100%;
+  margin-right: 24px;
+  box-shadow: 0 0 15px rgb(0 0 0 / 10%);
+}