Mirrors/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2024-11-06 19:02:30 +01: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 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);',
'}',
''