Mirrors/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2024-09-15 15:32:28 +02:00
Code Issues Releases Wiki Activity

this fixes #210: screw getBoundingClientRect(), I will just compute it manually

Browse Source
This commit is contained in:
gorhill 2014-10-11 16:43:17 -04:00
parent ffb0f9b1e1
commit ebb77833d8
1 changed files with 38 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
js/element-picker.js
View File

@ -238,6 +238,13 @@ var targetElements = [];
var svgWidth = 0;
var svgHeight = 0;
var rectVolatile = {
left: 0,
top: 0,
width: 0,
height: 0
};
/******************************************************************************/
var pickerPaused = function() {
@ -272,6 +279,24 @@ var pickerRootDistance = function(elem) {
/******************************************************************************/
// https://github.com/gorhill/uBlock/issues/210
// HTMLElement.getBoundingClientRect() is unreliable (or I misunderstand what
// it does). I will just compute it myself.
var getBoundingClientRect = function(elem, r) {
r.w = elem.offsetWidth;
r.h = elem.offsetHeight;
r.x = elem.offsetLeft - elem.scrollLeft;
r.y = elem.offsetTop - elem.scrollTop;
while ( elem = elem.offsetParent ) {
r.x += elem.offsetLeft - elem.scrollLeft;
r.y += elem.offsetTop - elem.scrollTop;
}
};
/******************************************************************************/
var highlightElements = function(elems, force) {
// To make mouse move handler more efficient
if ( !force && elems.length === targetElements.length ) {
@ -281,10 +306,6 @@ var highlightElements = function(elems, force) {
}
targetElements = elems;
// https://github.com/gorhill/uBlock/issues/210
var bodyRect = document.body.getBoundingClientRect();
var offx = bodyRect.left;
var offy = bodyRect.top;
var ow = svgRoot.getAttribute('width');
var ocean = [
'M0 0',
@ -293,28 +314,17 @@ var highlightElements = function(elems, force) {
'h-', ow,
'z'
];
var offx = window.pageXOffset;
var offy = window.pageYOffset;
var islands = [];
var elem, r;
// To avoid memory churning, reuse object
var r = rectVolatile;
var poly;
for ( var i = 0; i < elems.length; i++ ) {
elem = elems[i];
if ( typeof elem.getBoundingClientRect !== 'function' ) {
continue;
}
r = elem.getBoundingClientRect();
ocean.push(
'M', r.left - offx, ' ', r.top - offy,
'h', r.width,
'v', r.height,
'h-', r.width,
'z'
);
islands.push(
'M', r.left - offx, ' ', r.top - offy,
'h', r.width,
'v', r.height,
'h-', r.width,
'z'
);
getBoundingClientRect(elems[i], r);
poly = 'M' + (r.x + offx) + ' ' + (r.y + offy) + 'h' + r.w + 'v' + r.h + 'h-' + r.w + 'z';
ocean.push(poly);
islands.push(poly);
}
svgOcean.setAttribute('d', ocean.join(''));
svgIslands.setAttribute('d', islands.join(''));
@ -846,8 +856,12 @@ var startPicker = function() {
'direction: ', chrome.i18n.getMessage('@@bidi_dir'), ';',
'}',
'.µBlock.paused > div {',
'opacity: 0.2;',
'display: initial;',
'}',
'.µBlock.paused > div:hover {',
'opacity: 1;',
'}',
'.µBlock > div > div {',
'padding: 0;',
'box-sizing: border-box;',