Remove `createMyElement', `modifyMyElement' and `styleMyElement'.

* manifest.json (web_accessible_resources): Add "viewtube.css".
* viewtube.css: New file.
* viewtube.js (createMyElement, modifyMyElement, styleMyElement):
Remove functions.
(createElement, createVideoElement): New functions.
Inject "viewtube.css" stylesheet.

3 files changed, 51 insertions, 105 deletions

diff --git a/manifest.json b/manifest.json
index bcdb5a2..3341b49 100644
--- a/manifest.json
+++ b/manifest.json
@@ -16,5 +16,9 @@
 	    "matches": ["https://youtube.com/watch*", "https://www.youtube.com/watch*"],
 	    "js": ["viewtube.js"]
 	}
+    ],
+
+    "web_accessible_resources": [
+	"viewtube.css"
     ]
 }
diff --git a/viewtube.css b/viewtube.css
new file mode 100644
index 0000000..53e22f7
--- /dev/null
+++ b/viewtube.css
@@ -0,0 +1,4 @@
+.hide { display: none; }
+.audio-video-only { color: #8f6b32; }
+.dash { color: #cf4913; }
+.direct-video-link { color: #00c0c0; }
diff --git a/viewtube.js b/viewtube.js
index 61ffaa1..681fabd 100644
--- a/viewtube.js
+++ b/viewtube.js
@@ -49,81 +49,19 @@
 
     // ==========Functions========== //
 
-    function createMyElement(type, content, event, action, target) {
-	var obj = page.doc.createElement(type);
-	if (content) {
-	    switch (type) {
-	    case 'div':
-		obj.innerHTML = content;
-		break;
-	    case 'img':
-		obj.src = content;
-		break;
-	    case 'option':
-		obj.value = content;
-		obj.innerHTML = content;
-		break;
-	    case 'video':
-		obj.src = content;
-		obj.controls = 'controls';
-		obj.autoplay = 'autoplay';
-		obj.volume = 0.8;
-		obj.innerHTML = '<br><br>The video should be loading. If it doesn\'t load, make sure your browser supports HTML5\'s Video and this video codec. If you think it\'s a script issue, please report it <a href="' + contact + '" style="color:#00892C">here</a>.';
-		break;
-	    }
-	}
-	if (type == 'video') {
-	    obj.type = mimetypes[player['videoPlay'].replace(/.*\s/, '')];
-	    obj.id = 'vtVideo';
-	}
-	if (event == 'change') {
-	    if (target == 'video') {
-		obj.addEventListener('change', function() {
-		    player['videoPlay'] = this.value;
-		    playMyVideo();
-		}, false);
-	    }
-	}
-	else if (event == 'click') {
-	    obj.addEventListener('click', function() {
-		switch (action) {
-		case 'close':
-		    page.body.removeChild(target);
-		    break;
-		}
-	    }, false);
+    function createElement (type, attributes, ...children) {
+	var element = document.createElement(type);
+	for (var key in attributes) {
+	    if (key == 'innerHTML') element.innerHTML = attributes[key];
+	    else element.setAttribute(key, attributes[key]);
 	}
-	return obj;
+	for (var child in children)
+	    element.appendChild(child);
+	return element;
     }
 
-    function modifyMyElement(obj, type, content, clear, hide) {
-	if (content) {
-	    if (type == 'div') obj.innerHTML = content;
-	    else if (type == 'option') {
-		obj.value = content;
-		obj.innerHTML = content;
-	    }
-	    else if (type == 'object') obj.data = content;
-	    else if (type == 'img' || type == 'video' || type == 'embed') obj.src = content;
-	}
-	if (clear) {
-	    if (obj.hasChildNodes()) {
-		while (obj.childNodes.length >= 1) {
-		    obj.removeChild(obj.firstChild);
-		}
-	    }
-	}
-	if (hide) {
-	    for (var i = 0; i < obj.children.length; i++) {
-		styleMyElement(obj.children[i], {display: 'none'});
-	    }
-	}
-    }
-
-    function styleMyElement(obj, styles) {
-	for (var property in styles) {
-	    if (styles.hasOwnProperty(property)) obj.style[property] = styles[property];
-	}
+    function createVideoElement (attributes, ...children) {
+	return createElement("video", Object.assign({controls: "controls", autoplay: "autoplay", volume: 0.8}, attributes));
     }
 
     function createMyPlayer() {
@@ -132,24 +70,29 @@
 	    Object.assign(option, item);
 
 	    /* The Panel */
-	    player['playerPanel'] = createMyElement('div', '', '', '', '');
+	    player['playerPanel'] = createElement('div');
 	    player['playerWindow'].appendChild(player['playerPanel']);
 
 	    /* Panel Video Menu */
-	    player['videoMenu'] = createMyElement('select', '', 'change', '', 'video');
-	    player['videoMenu'].title = '{Videos: select the video format for playback}';
+	    player["videoMenu"] = createElement("select", {title: "Select the video format for playback"});
+	    player["videoMenu"].addEventListener('change', function() {
+		player['videoPlay'] = this.value;
+		playMyVideo();
+	    }, false);
 	    player['playerPanel'].appendChild(player['videoMenu']);
 	    for (var videoCode in player['videoList']) {
-		player['videoItem'] = createMyElement('option', videoCode, '', '', '');
-		styleMyElement(player['videoItem'], {padding: '0px', display: 'block', color: '#336699', fontSize: '12px', textShadow: '0px 1px 1px #CCCCCC', cursor: 'pointer'});
-		if (videoCode.indexOf('Video') != -1 || videoCode.indexOf('Audio') != -1) styleMyElement(player['videoItem'], {color: '#8F6B32'});
-		if (player['videoList'][videoCode] == 'DASH') styleMyElement(player['videoItem'], {color: '#CF4913'});
+		player["videoItem"] = createElement("option", {value: videoCode, innerHTML: videoCode});
+		if (videoCode.indexOf('Video') != -1 || videoCode.indexOf('Audio') != -1)
+		    player["videoItem"].classList.add("audio-video-only");
+		if (player['videoList'][videoCode] == 'DASH')
+		    player["videoItem"].classList.add("dash");
 		player['videoMenu'].appendChild(player['videoItem']);
-		if (videoCode == 'Direct Video Link') styleMyElement(player['videoItem'], {color: '#00C0C0'});
+		if (videoCode == 'Direct Video Link')
+		    player["videoItem"].classList.add("direct-video-link");
 	    }
 
 	    /* The Content */
-	    player['playerContent'] = createMyElement('div', '', '', '', '');
+	    player['playerContent'] = createElement('div');
 	    player['playerWindow'].appendChild(player['playerContent']);
 
 	    /* Play My Video */
@@ -161,28 +104,20 @@
 
     function playDASHwithHTML5() {
 	if (player['videoPlay'].indexOf('MP4') != -1) {
-	    player['contentVideo'] = createMyElement('video', player['videoList'][player['videoPlay'].replace(/MP4/, 'Video MP4')], '', '', '');
-	    if (player['videoList']['High Bitrate Audio Opus']) {
-		player['contentAudio'] = createMyElement('video', player['videoList']['High Bitrate Audio Opus'], '', '', '');
-	    }
-	    else if (player['videoList']['Medium Bitrate Audio Opus']) {
-		player['contentAudio'] = createMyElement('video', player['videoList']['Medium Bitrate Audio Opus'], '', '', '');
-	    }
-	    else {
-		player['contentAudio'] = createMyElement('video', player['videoList']['Medium Bitrate Audio MP4'], '', '', '');
-	    }
+	    player["contentVideo"] = createVideoElement({src: player["videoList"][player["videoPlay"].replace(/MP4/, "Video MP4")]});
+	    if (player['videoList']['High Bitrate Audio Opus'])
+		player["contentAudio"] = createVideoElement({src: player["videoList"]["High Bitrate Audio Opus"]});
+	    else if (player['videoList']['Medium Bitrate Audio Opus'])
+		player['contentAudio'] = createVideoElement({src: player['videoList']['Medium Bitrate Audio Opus']});
+	    else player['contentAudio'] = createVideoElement({src: player['videoList']['Medium Bitrate Audio MP4']});
 	}
 	else {
-	    player['contentVideo'] = createMyElement('video', player['videoList'][player['videoPlay'].replace(/WebM/, 'Video WebM')], '', '', '');
-	    if (player['videoList']['High Bitrate Audio Opus']) {
-		player['contentAudio'] = createMyElement('video', player['videoList']['High Bitrate Audio Opus'], '', '', '');
-	    }
-	    else if (player['videoList']['Medium Bitrate Audio Opus']) {
-		player['contentAudio'] = createMyElement('video', player['videoList']['Medium Bitrate Audio Opus'], '', '', '');
-	    }
-	    else {
-		player['contentAudio'] = createMyElement('video', player['videoList']['Medium Bitrate Audio WebM'], '', '', '');
-	    }
+	    player["contentVideo"] = createVideoElement({src: player["videoList"][player["videoPlay"].replace(/WebM/, "Video WebM")]});
+	    if (player['videoList']['High Bitrate Audio Opus'])
+		player["contentAudio"] = createVideoElement({src: player["videoList"]["High Bitrate Audio Opus"]});
+	    else if (player['videoList']['Medium Bitrate Audio Opus'])
+		player["contentAudio"] = createVideoElement({src: player["videoList"]["Medium Bitrate Audio Opus"]});
+	    else player["contentAudio"] = createVideoElement({src: player["videoList"]["Medium Bitrate Audio WebM"]});
 	}
 	player['contentAudio'].pause();
 	player['contentVideo'].addEventListener('play', function() {
@@ -203,17 +138,17 @@
 		player['contentAudio'].currentTime = player['contentVideo'].currentTime;
 	    }
 	}, false);
-	styleMyElement(player['contentAudio'], {display: 'none'});
+	player["contentAudio"].classList.add("hide");
 	player['contentVideo'].appendChild(player['contentAudio']);
     }
 
     function playMyVideo() {
-	modifyMyElement(player['playerContent'], 'div', '', true);
+	while (player['playerContent'].hasChildNodes())
+	    player['playerContent'].removeChild(player['playerContent'].firstChild);
 	if (player['videoList'][player['videoPlay']] == 'DASH')
 	    playDASHwithHTML5();
 	else
-	    player['contentVideo'] = createMyElement('video', player['videoList'][player['videoPlay']], '', '', '');
-	player['contentVideo'].poster = player['videoThumb'];
+	    player["contentVideo"] = createVideoElement({src: player["videoList"][player["videoPlay"]], poster: player["videoThumb"]});
 	player['playerContent'].appendChild(player['contentVideo']);
     }
 
@@ -274,6 +209,9 @@
 
     // =====YouTube===== //
 
+    // Add stylesheet
+    document.head.appendChild(createElement("link", {rel: "stylesheet", type: "text/css", href: browser.extension.getURL("viewtube.css")}));
+
     /* Redirect Categories */
     if (page.url.indexOf('gaming.youtube.com') != -1) {
 	page.win.location.href = page.url.replace('gaming', 'www');