Shadow DOM

1995eaton · Aug 14, 2015 · 6be6ad1 · 6be6ad1
1 parent 598c175
commit 6be6ad1
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 14 deletions.
diff --git a/background_scripts/options.js b/background_scripts/options.js
@@ -76,7 +76,7 @@ var defaultSettings = {
   MAPPINGS: '',
   GISTURL: '',
   FUNCTIONS: {},
-  COMMANDBARCSS: '#cVim-link-container, .cVim-link-hint, #cVim-command-bar, #cVim-command-bar-mode, #cVim-command-bar-input, #cVim-command-bar-search-results, .cVim-completion-item, .cVim-completion-item .cVim-full, .cVim-completion-item .cVim-left, .cVim-completion-item .cVim-right, #cVim-hud, #cVim-status-bar {\n  font-family: Helvetica, Helvetica Neue, Neue, sans-serif, monospace, Arial;\n  font-size: 10pt !important;\n  -webkit-font-smoothing: antialiased !important;\n}\n\n#cVim-link-container {\n  position: absolute;\n  pointer-events: none;\n  width: 100%; left: 0;\n  height: 100%; top: 0;\n  z-index: 2147483647;\n}\n\n.cVim-link-hint {\n  color: #302505 !important;\n  background-color: #ffd76e !important;\n  border-radius: 2px !important;\n  padding: 2px !important;\n  font-size: 8pt !important;\n  font-weight: 500 !important;\n  text-transform: uppercase !important;\n  border: 1px solid #ad810c;\n  display: inline-block !important;\n  vertical-align: middle !important;\n  text-align: center !important;\n  box-shadow: 2px 2px 1px rgba(0,0,0,0.25) !important;\n  position: absolute !important;\n}\n\n.cVim-link-hint_match {\n  color: #777;\n  text-transform: uppercase !important;\n}\n\n#cVim-command-bar {\n  position: fixed !important;\n  z-index: 2147483646 !important;\n  background-color: #1b1d1e !important;\n  color: #bbb !important;\n  display: none;\n  box-sizing: content-box !important;\n  box-shadow: 0 3px 3px rgba(0,0,0,0.4);\n  left: 0 !important;\n  width: 100% !important;\n  height: 20px !important;\n}\n\n#cVim-command-bar-mode {\n  display: inline-block;\n  vertical-align: middle;\n  box-sizing: border-box !important;\n  padding-left: 2px !important;\n  height: 100% !important;\n  width: 10px !important;\n  padding-top: 2px !important;\n  color: #888 !important;\n}\n\n#cVim-command-bar-input {\n  background-color: #1b1d1e !important;\n  color: #bbb !important;\n  height: 100% !important;\n  right: 0 !important;\n  top: 0 !important;\n  width: calc(100% - 10px) !important;\n  position: absolute !important;\n}\n\n#cVim-command-bar-search-results {\n  position: fixed;\n  width: 100% !important;\n  overflow: hidden;\n  z-index: 2147483647 !important;\n  left: 0;\n  box-shadow: 0 3px 3px rgba(0,0,0,0.4);\n  background-color: #1c1c1c;\n}\n\n.cVim-completion-item, .cVim-completion-item .cVim-full, .cVim-completion-item .cVim-left, .cVim-completion-item .cVim-right {\n  text-overflow: ellipsis;\n  padding: 1px;\n  display: inline-block;\n  box-sizing: border-box;\n  vertical-align: middle;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.cVim-completion-item:nth-child(even) {\n  background-color: #1f1f1f;\n}\n\n.cVim-completion-item {\n  width: 100%; left: 0;\n  color: #bcbcbc;\n}\n\n.cVim-completion-item .cVim-left {\n  color: #fff;\n  width: 37%;\n}\n\n.cVim-completion-item .cVim-right {\n  font-style: italic;\n  color: #888;\n  width: 57%;\n}\n\n#cVim-hud {\n  background-color: rgba(28,28,28,0.9);\n  position: fixed !important;\n  transition: right 0.2s ease-out;\n  z-index: 24724289;\n}\n\n#cVim-hud span {\n  padding: 2px;\n  padding-left: 4px;\n  padding-right: 4px;\n  color: #8f8f8f;\n  font-size: 10pt;\n}\n\n#cVim-frames-outline {\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  right: 0;\n  z-index: 9999999999;\n  box-sizing: border-box;\n  border: 3px solid yellow;\n}\n'
+  COMMANDBARCSS: '#cVim-link-container, .cVim-link-hint, #cVim-command-bar, #cVim-command-bar-mode, #cVim-command-bar-input, #cVim-command-bar-search-results, .cVim-completion-item, .cVim-completion-item .cVim-full, .cVim-completion-item .cVim-left, .cVim-completion-item .cVim-right, #cVim-hud, #cVim-status-bar {\n  font-family: Helvetica, Helvetica Neue, Neue, sans-serif, monospace, Arial;\n  font-size: 10pt !important;\n  -webkit-font-smoothing: antialiased !important;\n}\n\n#cVim-link-container {\n  position: absolute;\n  pointer-events: none;\n  width: 100%; left: 0;\n  height: 100%; top: 0;\n  z-index: 2147483647;\n}\n\n.cVim-link-hint {\n  color: #302505;\n  background-color: #ffd76e;\n  border-radius: 2px;\n  padding: 2px;\n  font-size: 8pt !important;\n  font-weight: 500;\n  text-transform: uppercase;\n  border: 1px solid #ad810c;\n  display: inline-block;\n  vertical-align: middle;\n  text-align: center;\n  box-shadow: 2px 2px 1px rgba(0,0,0,0.25);\n  position: absolute;\n}\n\n.cVim-link-hint_match {\n  color: #777;\n  text-transform: uppercase;\n}\n\n#cVim-command-bar {\n  position: fixed !important;\n  z-index: 2147483646 !important;\n  background-color: #1b1d1e !important;\n  color: #bbb !important;\n  display: none;\n  box-sizing: content-box !important;\n  box-shadow: 0 3px 3px rgba(0,0,0,0.4);\n  left: 0 !important;\n  width: 100% !important;\n  height: 20px !important;\n}\n\n#cVim-command-bar-mode {\n  display: inline-block;\n  vertical-align: middle;\n  box-sizing: border-box !important;\n  padding-left: 2px !important;\n  height: 100% !important;\n  width: 10px !important;\n  padding-top: 2px !important;\n  color: #888 !important;\n}\n\n#cVim-command-bar-input {\n  background-color: #1b1d1e !important;\n  color: #bbb !important;\n  height: 100% !important;\n  right: 0 !important;\n  top: 0 !important;\n  width: calc(100% - 10px) !important;\n  position: absolute !important;\n}\n\n#cVim-command-bar-search-results {\n  position: fixed;\n  width: 100% !important;\n  overflow: hidden;\n  z-index: 2147483647 !important;\n  left: 0;\n  box-shadow: 0 3px 3px rgba(0,0,0,0.4);\n  background-color: #1c1c1c;\n}\n\n.cVim-completion-item, .cVim-completion-item .cVim-full, .cVim-completion-item .cVim-left, .cVim-completion-item .cVim-right {\n  text-overflow: ellipsis;\n  padding: 1px;\n  display: inline-block;\n  box-sizing: border-box;\n  vertical-align: middle;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.cVim-completion-item:nth-child(even) {\n  background-color: #1f1f1f;\n}\n\n.cVim-completion-item {\n  width: 100%; left: 0;\n  color: #bcbcbc;\n}\n\n.cVim-completion-item .cVim-left {\n  color: #fff;\n  width: 37%;\n}\n\n.cVim-completion-item .cVim-right {\n  font-style: italic;\n  color: #888;\n  width: 57%;\n}\n\n#cVim-hud {\n  background-color: rgba(28,28,28,0.9);\n  position: fixed !important;\n  transition: right 0.2s ease-out;\n  z-index: 24724289;\n}\n\n#cVim-hud span {\n  padding: 2px;\n  padding-left: 4px;\n  padding-right: 4px;\n  color: #8f8f8f;\n  font-size: 10pt;\n}\n\n#cVim-frames-outline {\n  position: fixed;\n  width: 100%;\n  height: 100%;\n  left: 0;\n  top: 0;\n  right: 0;\n  z-index: 9999999999;\n  box-sizing: border-box;\n  border: 3px solid yellow;\n}\n'
 };
 
 chrome.storage.onChanged.addListener(function(changes) {

diff --git a/content_scripts/command.js b/content_scripts/command.js
@@ -1052,6 +1052,11 @@ Command.onDOMLoadAll = function() {
       window.removeEventListener('mousedown', initialMouseDown, true);
     }, true);
   }
+  httpRequest({
+    url: chrome.runtime.getURL('content_scripts/main.css')
+  }, function(data) {
+    this.mainCSS = data;
+  }.bind(this));
   this.setup();
   this.domElementsLoaded = true;
   this.callOnCvimLoad();

diff --git a/content_scripts/hints.js b/content_scripts/hints.js
@@ -65,15 +65,14 @@ Hints.hideHints = function(reset, multi, useKeyDelay) {
   } else if (document.getElementById('cVim-link-container') !== null) {
     if (!multi)
       HUD.hide();
-    main = document.getElementById('cVim-link-container');
     if (settings.linkanimations) {
-      main.addEventListener('transitionend', function() {
+      Hints.shadowDOM.addEventListener('transitionend', function() {
         var m = document.getElementById('cVim-link-container');
         if (m !== null) {
           m.parentNode.removeChild(m);
         }
       });
-      main.style.opacity = '0';
+      Hints.shadowDOM.host.style.opacity = '0';
     } else {
       document.getElementById('cVim-link-container')
         .parentNode.removeChild(document.getElementById('cVim-link-container'));
@@ -664,6 +663,7 @@ Hints.create = function(type, multi) {
     main.id = 'cVim-link-container';
     main.top = document.body.scrollTop + 'px';
     main.left = document.body.scrollLeft + 'px';
+    Hints.shadowDOM = main.createShadowRoot();
 
     try {
       document.lastChild.appendChild(main);
@@ -708,7 +708,17 @@ Hints.create = function(type, multi) {
       }
     }
 
-    main.appendChild(frag);
+    [].forEach.call(document.querySelectorAll('style'), e => {
+      if (e.textContent.indexOf('cVim') !== -1) {
+        Hints.shadowDOM.appendChild(e.cloneNode(true));
+      }
+    });
+
+    Hints.shadowDOM.appendChild(frag);
+    var style = document.createElement('style');
+    style.textContent = Command.mainCSS;
+    Hints.shadowDOM.appendChild(style);
     main.style.opacity = '1';
+
   }, 0);
 };
diff --git a/content_scripts/main.css b/content_scripts/main.css
@@ -12,27 +12,26 @@
 }
 
 #cVim-link-container {
-  min-height: 0 !important;background: none !important; background-repeat: none !important;background-position: none !important;box-sizing: content-box !important;vertical-align: none !important;-webkit-appearance: none !important;padding: 0 !important;letter-spacing: normal !important;word-spacing: normal !important;text-transform: none !important;text-indent: 0px !important;text-shadow: none !important;outline: 0 !important;margin: 0 !important;outline-style: none !important;line-height: 1 !important;border: 0 !important; font-style: normal !important;
   transition: opacity 0.1s ease;
+  opacity: 0;
 }
-.cVim-link-hint {
-  min-height: 0 !important;background-repeat: none !important;background-position: none !important;box-sizing: content-box !important;vertical-align: none !important;-webkit-appearance: none !important;letter-spacing: normal !important;word-spacing: normal !important;text-transform: none !important;text-indent: 0px !important;text-shadow: none !important;outline: 0 !important;margin: 0 !important;outline-style: none !important;line-height: 1 !important; width: auto; font-style: normal !important;
-}
+
 .cVim-hint-scale {
   -webkit-animation: scale 0.25s;
 }
+
 @keyframes scale {
   0%   { transform: scale(0)   perspective(1px); }
   60%  { transform: scale(1.15) perspective(1px); }
   100% { transform: scale(1)   perspective(0px); }
 }
+
 .cVim-link-hint_match {
-  min-height: 0 !important;background-repeat: none !important;background-position: none !important;box-sizing: content-box !important;vertical-align: none !important;-webkit-appearance: none !important;letter-spacing: normal !important;word-spacing: normal !important;text-transform: none !important;text-indent: 0px !important;text-shadow: none !important;outline: 0 !important;margin: 0 !important;outline-style: none !important;line-height: 1 !important; width: auto; font-style: normal !important;
-  opacity: 0.6 !important;
+  opacity: 0.6;
 }
+
 .cVim-link-hint_match_hidden {
-  min-height: 0 !important;background-repeat: none !important;background-position: none !important;box-sizing: content-box !important;vertical-align: none !important;-webkit-appearance: none !important;letter-spacing: normal !important;word-spacing: normal !important;text-transform: none !important;text-indent: 0px !important;text-shadow: none !important;outline: 0 !important;margin: 0 !important;outline-style: none !important;line-height: 1 !important; width: auto; font-style: normal !important;
-  display: none !important;
+  display: none;
 }
 
 #cVim-command-bar {

diff --git a/pages/options.js b/pages/options.js
@@ -18,7 +18,7 @@ Settings.resetSettings = function() {
     this.gistUrl.value = defaults.GISTURL;
     delete this.settings;
     this.settings = Object.clone(defaults);
-  });
+  }.bind(this));
 };
 
 Settings.saveSettings = function() {