From 65a9e38f91529f42e0475c038172b770b92dd534 Mon Sep 17 00:00:00 2001
From: gorhill <rhill@raymondhill.net>
Date: Mon, 13 Oct 2014 09:33:43 -0400
Subject: [PATCH] this fixes #314

---
 js/element-picker.js | 80 +++++++++++++++++++++++++-------------------
 1 file changed, 45 insertions(+), 35 deletions(-)

diff --git a/js/element-picker.js b/js/element-picker.js
index daa4efe89..6e1949c5a 100644
--- a/js/element-picker.js
+++ b/js/element-picker.js
@@ -220,7 +220,11 @@ var messaging = (function(name){
 
 /******************************************************************************/
 
-var µBlockClassName = CSS.escape('µBlock');
+// https://github.com/gorhill/uBlock/issues/314#issuecomment-58878112
+// Using an id makes uBlock's CSS rules more specific, thus prevents
+// surrounding external rules from winning over own rules.
+var µBlockId = CSS.escape('µBlock');
+
 var svgns = 'http://www.w3.org/2000/svg';
 
 var pickerRoot = null;
@@ -763,29 +767,28 @@ var stopPicker = function() {
 /******************************************************************************/
 
 var startPicker = function() {
-    pickerRoot = document.querySelector('.' + µBlockClassName);
+    pickerRoot = document.getElementById(µBlockId);
     if ( pickerRoot !== null ) {
         return;
     }
     pickerRoot = document.createElement('div');
-    pickerRoot.className = µBlockClassName;
+    pickerRoot.id = µBlockId;
 
     var pickerStyle = document.createElement('style');
     pickerStyle.setAttribute('scoped', '');
     pickerStyle.textContent = [
-        '.µBlock {',
-            'position: absolute;',
-            'top: 0;',
-            'left: 0;',
-        '}',
-        '.µBlock, .µBlock * {',
+        '#µBlock, #µBlock * {',
             'background: transparent;',
+            'background-image: none;',
             'border: 0;',
+            'border-radius: 0;',
+            'box-shadow: none;',
             'color: #000;',
             'font: 12px sans-serif;',
             'letter-spacing: normal;',
             'margin: 0;',
             'max-width: none;',
+            'min-height: 0;',
             'outline: 0;',
             'overflow: visible;',
             'padding: 0;',
@@ -793,10 +796,15 @@ var startPicker = function() {
             'vertical-align: baseline;',
             'z-index: auto;',
         '}',
-        '.µBlock li {',
+        '#µBlock {',
+            'position: absolute;',
+            'top: 0;',
+            'left: 0;',
+        '}',
+        '#µBlock li {',
             'display: block;',
         '}',
-        '.µBlock button {',
+        '#µBlock button {',
             'border: 1px solid #aaa;',
             'padding: 6px 8px 4px 8px;',
             'box-sizing: border-box;',
@@ -808,17 +816,19 @@ var startPicker = function() {
             'background-color: #ccc;',
             'cursor: pointer;',
         '}',
-        '.µBlock button:hover {',
+        '#µBlock button:hover {',
+            'background: none;',
             'background-color: #eee;',
+            'background-image: none;',
         '}',
-        '.µBlock button:disabled {',
+        '#µBlock button:disabled {',
             'color: #999;',
             'background-color: #ccc;',
         '}',
-        '.µBlock button#create:not(:disabled) {',
+        '#µBlock button#create:not(:disabled) {',
             'background-color: #ffdca8;',
         '}',
-        '.µBlock > svg {',
+        '#µBlock > svg {',
             'position: absolute;',
             'top: 0;',
             'left: 0;',
@@ -826,19 +836,19 @@ var startPicker = function() {
             'cursor: crosshair;',
             'z-index: 4999999999;',
         '}',
-        '.µBlock.paused > svg {',
+        '#µBlock.paused > svg {',
             'cursor: wait;',
         '}',
-        '.µBlock > svg > path:first-child {',
+        '#µBlock > svg > path:first-child {',
             'fill: rgba(0,0,0,0.75);',
             'fill-rule: evenodd;',
         '}',
-        '.µBlock > svg > path + path {',
+        '#µBlock > svg > path + path {',
             'stroke: #F00;',
             'stroke-width: 0.5px;',
             'fill: rgba(255,0,0,0.25);',
         '}',
-        '.µBlock > div {',
+        '#µBlock > div {',
             'padding: 4px;',
             'display: none;',
             'position: fixed;',
@@ -850,21 +860,21 @@ var startPicker = function() {
             'z-index: 5999999999;',
             'direction: ', chrome.i18n.getMessage('@@bidi_dir'), ';',
         '}',
-        '.µBlock.paused > div {',
+        '#µBlock.paused > div {',
             'opacity: 0.2;',
             'display: initial;',
         '}',
-        '.µBlock.paused > div:hover {',
+        '#µBlock.paused > div:hover {',
             'opacity: 1;',
         '}',
-        '.µBlock > div > div {',
+        '#µBlock > div > div {',
             'padding: 0;',
             'box-sizing: border-box;',
             'width: 100%;',
             'height: 8em;',
             'position: relative;',
         '}',
-        '.µBlock > div > div > textarea {',
+        '#µBlock > div > div > textarea {',
             'border: 1px solid #ccc;',
             'padding: 2px;',
             'box-sizing: border-box;',
@@ -875,20 +885,20 @@ var startPicker = function() {
             'background-color: white;',
             'font: 11px monospace;',
         '}',
-        '.µBlock > div > div > div {',
+        '#µBlock > div > div > div {',
             'position: absolute;',
             'right: 2px;',
             'bottom: 2px;',
             'opacity: 0.2;',
             'direction: ltr;',
         '}',
-        '.µBlock > div > div > div:hover {',
+        '#µBlock > div > div > div:hover {',
             'opacity: 1;',
         '}',
-        '.µBlock > div > div > div > * {',
-            'margin-left: 3px;',
+        '#µBlock > div > div > div > button {',
+            'margin-left: 3px !important;',
         '}',
-        '.µBlock > div > ul {',
+        '#µBlock > div > ul {',
             'margin: 0;',
             'border: 1px solid #ccc;',
             'padding: 3px;',
@@ -896,32 +906,32 @@ var startPicker = function() {
             'text-align: left;',
             'overflow: hidden;',
         '}',
-        '.µBlock > div > ul > li {',
+        '#µBlock > div > ul > li {',
         '}',
-        '.µBlock > div > ul > li:not(:first-child) {',
+        '#µBlock > div > ul > li:not(:first-child) {',
             'margin-top: 0.5em;',
         '}',
-        '.µBlock > div > ul > li > span:nth-of-type(1) {',
+        '#µBlock > div > ul > li > span:nth-of-type(1) {',
             'font-weight: bold;',
         '}',
-        '.µBlock > div > ul > li > span:nth-of-type(2) {',
+        '#µBlock > div > ul > li > span:nth-of-type(2) {',
             'font-size: smaller;',
             'color: gray;',
         '}',
-        '.µBlock > div > ul > li > ul {',
+        '#µBlock > div > ul > li > ul {',
             'margin: 0 0 0 1em;',
             'list-style-type: none;',
             'text-align: left;',
             'background-color: #eee;',
             'overflow: hidden;',
         '}',
-        '.µBlock > div > ul > li > ul > li {',
+        '#µBlock > div > ul > li > ul > li {',
             'font: 11px monospace;',
             'white-space: nowrap;',
             'cursor: pointer;',
             'direction: ltr;',
         '}',
-        '.µBlock > div > ul > li > ul > li:hover {',
+        '#µBlock > div > ul > li > ul > li:hover {',
             'background-color: rgba(255,255,255,1.0);',
         '}',
         ''