Mirrors/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2024-09-18 08:52:26 +02:00
Code Issues Releases Wiki Activity

this fixes #314

Browse Source
This commit is contained in:
gorhill 2014-10-13 09:33:43 -04:00
parent 13d47a80a9
commit 65a9e38f91
1 changed files with 45 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
js/element-picker.js
View File

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