use <select> instead of custom list control

Signed-off-by: Gerald <[email protected]>

options.css

@@ -10,9 +10,6 @@ textarea,input[type=text]{box-sizing:border-box;width:100%;}
 .content>div{margin:20px;}
 .controls{height:1px;}
 .controls>div{padding:5px 10px;}
-.list{background:white;}
-.list>div{border-bottom:1px dashed lightgray;line-height:2em;}
-.list .selected{background:lightgreen;color:darkgreen;}
 fieldset.title{border:none;border-top:1px solid silver;margin:20px 0 0;}
 
 /* Installed scripts */
@@ -43,5 +40,5 @@ fieldset.title{border:none;border-top:1px solid silver;margin:20px 0 0;}
 #tabSettings>table{width:100%;}
 #tabSettings>table td{width:1px;white-space:nowrap;vertical-align:middle;}
 #tabSettings>table td.expand{width:auto;}
-#tabSettings .list{min-height:100px;max-height:400px;border:1px solid darkgray;cursor:pointer;overflow-y:auto;}
-#tabSettings .list>div{display:inline-block;width:180px;margin:2px;padding:0 5px;border:1px dashed lightgray;}
+#xList{display:block;width:100%;white-space:normal;min-height:100px;}
+#xList>option{display:inline-block;width:180px;margin:2px;padding:0 5px;border:1px dashed lightgray;}

options.html

@@ -51,7 +51,7 @@
 						<legend data-i18n=labelDataExport></legend>
 						<b data-i18n=labelScriptsToExport></b>
 						<label><input type=checkbox id=cWithData><span data-i18n=labelExportScriptData></span></label>
-						<div id=xList class=list></div>
+						<select id=xList multiple></select>
 						<button id=bSelect data-i18n=buttonAllNone></button>
 						<a id=xHelper></a><button id=bExport data-i18n=buttonExportData></button>
 					</fieldset>

options.js

@@ -220,23 +220,17 @@ var xL=$('#xList'),xE=$('#bExport'),xD=$('#cWithData');
 function xLoad() {
 	xL.innerHTML='';xE.disabled=false;
 	ids.forEach(function(i){
-		var d=document.createElement('div'),n=map[i].obj;
-		d.className='ellipsis selected';
+		var d=document.createElement('option'),n=map[i].obj;
+		d.className='ellipsis';d.selected=true;
 		getName(d,n.custom.name||getLocaleString(n.meta,'name'));
 		xL.appendChild(d);
 	});
 }
 xD.onchange=function(){chrome.runtime.sendMessage({cmd:'SetOption',data:{key:'withData',value:this.checked}});};
-xL.onclick=function(e){
-	var t=e.target;
-	if(t.parentNode!=this) return;
-	t.classList.toggle('selected');
-};
 $('#bSelect').onclick=function(){
 	var c=xL.childNodes,v,i;
-	for(i=0;i<c.length;i++) if(!c[i].classList.contains('selected')) break;
-	v=i<c.length;
-	for(i=0;i<c.length;i++) if(v) c[i].classList.add('selected'); else c[i].classList.remove('selected');
+	for(i=0;i<c.length;i++) if(!c[i].selected) break;
+	v=i<c.length;for(i=0;i<c.length;i++) c[i].selected=v;
 };
 function exported(o){
 	function addFiles(){
@@ -286,7 +280,7 @@ xE.onclick=function(e){
 	this.disabled=true;
 	var i,c=[];
 	for(i=0;i<ids.length;i++)
-		if(xL.childNodes[i].classList.contains('selected')) c.push(ids[i]);
+		if(xL.childNodes[i].selected) c.push(ids[i]);
 	chrome.runtime.sendMessage({cmd:'ExportZip',data:{values:xD.checked,data:c}},exported);
 };