'use strict';

{
  const select = document.createElement('div');
  const layer  = document.createElement('div');

  select.classList.add('spoilblock-select-box');

  layer.classList.add('spoilblock-select-layer');
  layer.appendChild(select);

  document.body.appendChild(layer);

  let target = null;

  document.body.addEventListener('mouseover', function (event) {
    target  = event.target;

    let display = (target.currentStyle ? target.currentStyle : getComputedStyle(target, null)).display;

    while (display !== 'block') {
      target  = target.parentElement;
      display = (target.currentStyle ? target.currentStyle : getComputedStyle(target, null)).display;
    }

    const rect = target.getBoundingClientRect();

    select.style.top  = (window.scrollY + rect.top)  + 'px';
    select.style.left = (window.scrollX + rect.left) + 'px';

    select.style.width  = rect.width  + 'px';
    select.style.height = rect.height + 'px';
  });

  document.body.addEventListener('click', function (event) {
    const selector = createSelector(target);

    event.stopPropagation();
    event.preventDefault();
  }, true);

  browser.runtime.onMessage.addListener((message) => {
    if (typeof message === 'object' && message.action === 'disable') {
      document.body.removeChild(layer);
    }
  });

  function createSelector(element) {
    const selectors = [];

    let current  = element;
    let parent   = current.parentElement;

    selectors.unshift(current.tagName.toLowerCase() + (current.id !== '' ? '#' + current.id : ''));

    while (parent !== null && current.id === '') {
      const siblings = Array.prototype.filter.call(parent.children || [], function (item) {
        return (item.tagName === current.tagName);
      });

      if (siblings.length > 1) {
        let index = 0;

        while (siblings[index] !== current) {
          index++;
        }

        selectors[0] += ':nth-of-type(' + (index + 1) + ')';
      }

      current = parent;
      parent  = current.parentElement;

      selectors.unshift(current.tagName.toLowerCase() + (current.id !== '' ? '#' + current.id : ''));
    };

    return selectors.join(' > ');
  }

}

@@ -10,16 +10,36 @@
 ct';%0A%0A%7B%0A
+  // DOM structure%0A%0A
   const 
@@ -294,16 +294,37 @@
 ayer);%0A%0A
+  // Event handlers%0A%0A
   let ta
@@ -343,75 +343,80 @@
 %0A%0A  
-document.body.addEventListener('mouseover', function 
+const handlers = %7B%0A    mouseover: (event) =%3E %7Bconsole.log
 (event)
- %7B%0A
+;%0A 
     
+ 
 targ
@@ -432,24 +432,26 @@
 nt.target;%0A%0A
+  
     let disp
@@ -543,16 +543,18 @@
 splay;%0A%0A
+  
     whil
@@ -581,24 +581,26 @@
 k') %7B%0A      
+  
 target  = ta
@@ -615,24 +615,26 @@
 entElement;%0A
+  
       displa
@@ -723,27 +723,31 @@
 isplay;%0A    
+ 
+ 
 %7D%0A%0A
+  
     const re
@@ -780,24 +780,26 @@
 entRect();%0A%0A
+  
     select.s
@@ -843,32 +843,34 @@
 p)  + 'px';%0A    
+  
 select.style.lef
@@ -911,24 +911,26 @@
  'px';%0A%0A    
+  
 select.style
@@ -959,24 +959,26 @@
 + 'px';%0A    
+ 
+ 
 select.style
@@ -1013,63 +1013,23 @@
 ;%0A  
-%7D);%0A%0A  document.body.addEventListener('click', function
+  %7D,%0A    click:
  (ev
@@ -1029,26 +1029,31 @@
 ck: (event) 
-%7B%0A
+=%3E %7B%0A  
     const se
@@ -1082,24 +1082,26 @@
 r(target);%0A%0A
+  
     event.st
@@ -1117,24 +1117,26 @@
 tion();%0A    
+  
 event.preven
@@ -1153,59 +1153,26 @@
 ;%0A  
-%7D, true);%0A%0A  browser.runtime.onMessage.addListener(
+  %7D,%0A    message: 
 (mes
@@ -1178,24 +1178,26 @@
 ssage) =%3E %7B%0A
+  
     if (type
@@ -1261,16 +1261,18 @@
 %7B%0A      
+ 
+ 
 document
@@ -1301,31 +1301,453 @@
 r);%0A
-    %7D%0A  %7D);%0A%0A  function
+%0A        document.body.removeEventListener('mouseover', handlers.mouseover);%0A        document.body.removeEventListener('click', handlers.click);%0A%0A        browser.runtime.onMessage.removeListener(handlers.message);%0A      %7D%0A    %7D%0A  %7D%0A%0A  document.body.addEventListener('mouseover', handlers.mouseover);%0A  document.body.addEventListener('click', handlers.click, true);%0A%0A  browser.runtime.onMessage.addListener(handlers.message);%0A%0A  // Utils%0A%0A  const
  cre
@@ -1757,16 +1757,28 @@
 Selector
+ = function 
 (element
@@ -2600,11 +2600,10 @@
 ');%0A  %7D%0A
-%0A
 %7D%0A

Remove all event handlers on deactivation