Merge pull request #8 from redvanworkshop/feature/link-override

Automated Business Manager Links

Author: manifestinteractive

.eslintrc.js

@@ -19,6 +19,7 @@ module.exports = {
   rules: {
     'quotes': [2, 'single', { allowTemplateLiterals: true }],
     'arrow-parens': 0,
+    'no-prototype-builtins': 0,
     'generator-star-spacing': 0,
     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
   }

.firefox/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "__MSG_extensionName__",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "__MSG_extensionDescription__",
   "author": "Red Van Workshop",
   "devtools_page": "devtools.html",
@@ -13,6 +13,8 @@
     "128": "icons/128.png"
   },
   "permissions": [
-    "activeTab"
+    "activeTab",
+    "browsingData",
+    "storage"
   ]
 }

README.md

@@ -12,6 +12,7 @@
 - [X] Adds new `SFCC` Side Panel to `Elements` Panel
 - [X] Open ISML, Pipelines & Controllers in VS Code / Eclipse
 - [X] Open Content Slots & Assets in Business Manager
+- [X] Automatically Open Related Sites by Client ID & Site ID
 - [X] Supports Light & Dark Themes
 
 ## Installation
@@ -147,4 +148,4 @@ npm run pack
 Disclaimer
 ===
 
-The trademarks and product names of Salesforce®, including the mark Salesforce®, are the property of Salesforce.com. Red Van Workshop is not affiliated with Salesforce.com, nor does Salesforce.com sponsor or endorse the Red Van Workshop products or website. The use of the Salesforce® trademark on this project does not indicate an endorsement, recommendation, or business relationship between Salesforce.com and Red Van Workshop.
+The trademarks and product names of Salesforce®, including the mark Salesforce®, are the property of Salesforce.com. Red Van Workshop is not affiliated with Salesforce.com, nor does Salesforce.com sponsor or endorse the Red Van Workshop products or website. The use of the Salesforce® trademark on this project does not indicate an endorsement, recommendation, or business relationship between Salesforce.com and Red Van Workshop.

dist/sfcc-devtools-firefox.zip

@@ -1,6 +1,6 @@
 {
   "name": "sfcc-devtools",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Support Browser Interaction with VS Code, Eclipse, and SFCC Business Manager via DevTools Web Inspector.",
   "author": "Red van Workshop",
   "license": "MIT",

dist/sfcc-devtools-webkit.crx

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "__MSG_extensionName__",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "__MSG_extensionDescription__",
   "author": "Red Van Workshop",
   "devtools_page": "devtools.html",
@@ -14,6 +14,8 @@
   },
   "permissions": [
     "activeTab",
+    "browsingData",
+    "storage",
     "http://localhost:60606/*"
   ],
   "content_security_policy": "script-src 'self' http://localhost:60606; object-src 'self'"

dist/sfcc-devtools-webkit.zip

@@ -17,6 +17,13 @@
         --whiteText: #FFFFFF;
       }
 
+      html {
+        box-sizing: border-box;
+      }
+      *, *:before, *:after {
+        box-sizing: inherit;
+      }
+
       body.dark {
         background-color: var(--darkThemeBG);
         color: var(--darkThemeText);
@@ -37,7 +44,7 @@
       }
 
       #error a {
-        background: #FFF;
+        background: var(--lightThemeBG);
         border-radius: 3px;
         color: var(--error);
         font-size: 10px;
@@ -55,7 +62,8 @@
       }
 
       #sidebar {
-        padding: 10px;
+        padding: 20px;
+        height: 100vh;
       }
 
       a.button {
@@ -69,6 +77,29 @@
         position: relative;
         text-decoration: none;
         text-transform: uppercase;
+        z-index: 1;
+      }
+
+      a.button.primary.has-dropdown {
+        border-radius: 4px 0 0 4px;
+      }
+
+      a.button.dropdown {
+        border-radius: 0 4px 4px 0;
+        border-left: 1px solid rgba(255, 255, 255, 0.15);
+        cursor: pointer;
+      }
+
+      a.button.dropdown span {
+        transform: rotate(0deg);
+        display: block;
+        position: relative;
+        top: 0;
+      }
+
+      a.button.dropdown.expanded span {
+        transform: rotate(180deg);
+        top: 1px;
       }
 
       a.button:hover {
@@ -122,6 +153,72 @@
         width: 24px;
       }
 
+      .dropdown-list {
+        position: relative;
+        top: -20px;
+        background: var(--primary);
+        padding: 10px 0;
+        left: 5px;
+        width: 180px;
+        border-radius: 0 0 5px 5px;
+        box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.25);
+        z-index: 0;
+      }
+
+      .dropdown-list.collapsed {
+        display: none;
+      }
+
+      .dropdown-list a {
+        color: var(--whiteText);
+        line-height: 22px;
+        display: block;
+        padding: 0 12px;
+        font-size: 10px;
+        text-decoration: none;
+        text-transform: uppercase;
+        position: relative;
+      }
+
+      .dropdown-list a::after {
+        content: '';
+        position: absolute;
+        right: 12px;
+        color: rgba(0, 0, 0, 0.75);
+        font-size: 8px;
+        font-weight: bold;
+        opacity: 0;
+      }
+
+      .dropdown-list a:hover::after {
+        opacity: 1;
+      }
+
+      .dropdown-list a.sbx::after {
+        content: 'sbx';
+      }
+
+      .dropdown-list a.dev::after {
+        content: 'dev';
+      }
+
+      .dropdown-list a.stg::after {
+        content: 'stg';
+      }
+
+      .dropdown-list a.prd::after {
+        content: 'prd';
+      }
+
+      .dropdown-list a:hover {
+        background: var(--primaryActive);
+      }
+
+      .dropdown-list a:active {
+        background: var(--primaryActive);
+        box-shadow: 0 0 0 2px var(--primaryHighlight);
+      }
+
       @keyframes spinner {
         to {transform: rotate(360deg);}
       }
@@ -136,4 +233,4 @@
     <script src="browser-polyfill.js"></script>
     <script src="sidebar.js"></script>
   </body>
-</html>
+</html>