updated core styles for hover, blur, and background color additions s…

…o would show above overlay.

updated to use background.js for turning features on/off

src/chrome/manifest.json

@@ -3,7 +3,7 @@
     "name": "Contentful Sidekick",
     "short_name": "Contentful Sidekick",
     "description": "Chrome Extension that enables inline editing for websites created in Contentful",
-    "version": "0.0.6",
+    "version": "0.0.7",
     "permissions": [
       "activeTab",
       "cookies",
@@ -14,13 +14,24 @@
       "https://*/*",
       "*://*/*"
     ],
-    "browser_action": {
-      "default_icon": "img/icon-128.png",
-      "default_popup": "html/popup.html"
+    "icons": {
+      "16": "img/icon16.png",
+      "32": "img/icon32.png",
+      "48": "img/icon48.png",
+      "64": "img/icon64.png",
+      "128": "img/icon128.png",
+      "256": "img/icon256.png"
+    },
+    "browser_action": {},
+    "background": {
+      "scripts": [
+        "js/background.js"
+      ]
     },
     "content_scripts": [
       {
         "matches": ["http://*/*", "https://*/*"], 
+        "run_at": "document_idle",
         "js": ["js/vendor.js", "js/content.js"],
         "css": ["css/content.css"]
       }

src/shared/css/content.css

@@ -1,22 +1,61 @@
-.csk-element {
-  outline: 1px dashed #00a7f7;
+
+
+[data-init-csk] [data-csk-entry-id] {
   cursor: pointer;
+  position: relative;
+  transform: scale(1);
 }
-.csk-element:hover {
-  outline: 1px solid #00a7f7;
-  box-shadow: 0 0 0 4px rgba(0, 167, 247, 0.3);
+[data-init-csk] [data-csk-entry-id]:hover {
+  z-index: 1031;
 }
 
-.csk-element:hover:before {
+[data-init-csk] [data-csk-entry-id]:hover::before {
   content: 'EDIT';
   position: absolute;
-  padding: 2px 5px;
-  background-color: #00a4fa;
-  border-radius: 2px 2px 0 0;
+  background-color: #00a7f7;
+  border-radius: 0.25rem 0.25rem 0 0;
   color: #FFF;
-  font-size: 9px;
+  font-size: 0.75rem;
   font-weight: bold;
   letter-spacing: 1px;
   text-transform: uppercase;
-  margin-top: -16px;
+  top: -1.75rem;
+  left: -2px;
+  padding: 0.375rem 0.5rem 0.25rem 0.5rem;
+}
+
+[data-init-csk] [data-csk-entry-id]::after {
+  content: "";
+  position: absolute;
+  outline: 0.125rem dashed #00a7f7;
+  background-color: var(--bgColor);
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: -1;
+}
+
+[data-init-csk] [data-csk-entry-id]:hover::after {
+  outline: 0.125rem solid #00a7f7;
+}
+
+[data-init-csk] #csk-overlay {
+  transition: background-color 0.25s, backdrop-filter 0.25s;
+  transition-delay: 0.25s;
+  height: 100vh;
+  width: 100vw;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0);
+  backdrop-filter: blur(0);
+  z-index: -1;
+}
+
+[data-init-csk] #csk-overlay.show {
+  background-color: rgba(0, 0, 0, 0.1);
+  transition-delay: 0s;
+  backdrop-filter: blur(2px);
+  z-index: 1;
 }

src/shared/js/background.js

@@ -0,0 +1,23 @@
+/* global chrome */
+// Called when the user clicks on the browser action
+
+const toggleActive = () => {
+  chrome.storage.sync.get({
+    sideKickEnabled: false,
+  }, (items) => {
+    const curEnabled = !items.sideKickEnabled;
+    chrome.storage.sync.set({ sideKickEnabled: curEnabled });
+
+    chrome.tabs.query({ active: true, currentWindow: true },
+      (tabs) => {
+        const activeTab = tabs[0];
+        chrome.tabs.sendMessage(activeTab.id,
+          { message: curEnabled ? 'enable' : 'disable' });
+      });
+  });
+};
+
+
+chrome.browserAction.onClicked.addListener((tab) => {
+  toggleActive();
+});