diff --git a/inject.js b/inject.js index 5698d4c..064aac7 100644 --- a/inject.js +++ b/inject.js @@ -103,24 +103,58 @@ chrome.runtime.sendMessage({}, function(response) { wrapper.addEventListener('mousedown', prevent, false); wrapper.addEventListener('click', prevent, false); - var shadow = wrapper - var shadowTemplate = ` - + var styleElem = document.createElement('style') + var shadowCSS = chrome.runtime.getURL('shadow.css') + var textElem = document.createTextNode(`@import "${shadowCSS}";`) + styleElem.appendChild(textElem) + wrapper.appendChild(styleElem) + + var divElem = document.createElement('div') + divElem.setAttribute('id', 'controller') + divElem.setAttribute('style', `top:${top}; left:${left};`) + + var spanElem1 = document.createElement('span') + spanElem1.setAttribute('data-action', 'drag') + spanElem1.setAttribute('class', 'draggable') + spanElem1.appendChild(document.createTextNode(speed.toString())) + divElem.appendChild(spanElem1) + + var spanElem2 = document.createElement('span') + spanElem2.setAttribute('id', 'controls') + + var buttonElem1 = document.createElement('button') + buttonElem1.setAttribute('data-action', 'rewind') + buttonElem1.setAttribute('class', 'rw') + buttonElem1.appendChild(document.createTextNode('«')) + spanElem2.appendChild(buttonElem1) + + var buttonElem2 = document.createElement('button') + buttonElem2.setAttribute('data-action', 'slower') + buttonElem2.appendChild(document.createTextNode('-')) + spanElem2.appendChild(buttonElem2) + + var buttonElem3 = document.createElement('button') + buttonElem3.setAttribute('data-action', 'faster') + buttonElem3.appendChild(document.createTextNode('+')) + spanElem2.appendChild(buttonElem3) + + var buttonElem4 = document.createElement('button') + buttonElem4.setAttribute('data-action', 'advance') + buttonElem4.setAttribute('class', 'rw') + buttonElem4.appendChild(document.createTextNode('»')) + spanElem2.appendChild(buttonElem4) + + var buttonElem5 = document.createElement('button') + buttonElem5.setAttribute('data-action', 'close') + buttonElem5.setAttribute('class', 'hideButton') + buttonElem5.appendChild(document.createTextNode('x')) + spanElem2.appendChild(buttonElem5) + + divElem.appendChild(spanElem2) + wrapper.appendChild(divElem) + + var shadow = wrapper -
- ${speed} - - - - - - - -
- `; - shadow.innerHTML = shadowTemplate; shadow.querySelector('.draggable').addEventListener('mousedown', (e) => { runAction(e.target.dataset['action'], document); }); diff --git a/shadow.css b/shadow.css index 4b5ec96..3b51bb8 100644 --- a/shadow.css +++ b/shadow.css @@ -68,7 +68,7 @@ line-height: 14px; border: 1px solid white; font-family: "Lucida Console", Monaco, monospace; - margin-bottom: 2px; + margin: 2px; } .vsc-controller button:focus {