Newscript: Validate that name and id are provided

If no name or id are given, accepting the dialog will fail and the
corresponding fields will be highlighted.
Also, the required fields got a placeholder text now, asking the user to
specifiy the text.

(Note: Not using HTML5 Form validation here, as this does not work
reliably when intermixed with XUL)

extension/content/js/newscript.js

@@ -6,6 +6,8 @@ Components.utils.import("resource://scriptish/utils/Scriptish_localizeDOM.js");
 Components.utils.import("resource://scriptish/utils/Scriptish_stringBundle.js");
 
 var $ = function(aID) document.getElementById(aID);
+var $$ = function(q) document.querySelector(q);
+var $$$ = function(q) document.querySelectorAll(q);
 
 Scriptish_localizeOnLoad(this);
 
@@ -17,7 +19,17 @@ try {
 } catch(e) {}
 
 window.addEventListener("load", function() {
-  $("scriptish").addEventListener("dialogaccept", function() doInstall(), false);
+  $("scriptish").addEventListener("dialogaccept", function(evt) {
+    try {
+      if (doInstall()) {
+        return true;
+      }
+    } catch (e) {}
+
+    evt.preventDefault();
+    evt.stopProgapation();
+    return false;
+  }, false);
 
   // load defaults
   $("id").value = Scriptish_prefRoot.getValue("newscript_id", "");
@@ -48,6 +60,17 @@ window.addEventListener("load", function() {
 }, false);
 
 function doInstall() {
+  // validate some
+  var ok = Array.reduce($$$("*[required]"), function(p,v) {
+    var vok = !!v.value;
+    v.setAttribute("invalid", !vok);
+    return p & vok;
+  }, true);
+
+  if (!ok) {
+    return false;
+  }
+
   var tools = {};
   Components.utils.import("resource://scriptish/utils/Scriptish_openInEditor.js", tools);
   Components.utils.import("resource://scriptish/utils/Scriptish_getTempFile.js", tools);

extension/content/newscript.xul

@@ -18,12 +18,12 @@
     <rows>
       <row>
         <label control="id" value="newscript.id" localize="value"/>
-        <textbox id="id"/>
+        <textbox id="id" placeholder="newscript.missing.id" localize="placeholder" required="true"/>
         <toolbarbutton id="generate-id" hidden="true"/>
       </row>
       <row>
         <label control="name" value="newscript.name" localize="value"/>
-        <textbox id="name"/>
+        <textbox id="name" placeholder="newscript.missing.name" localize="placeholder" required="true"/>
       </row>
       <row>
         <label control="namespace" value="newscript.namespace" localize="value"/>

extension/locale/de/scriptish.properties

@@ -68,6 +68,8 @@ newscript.excludes=Ausnahmen (eine pro Zeile)
 newscript.exists=Ein Benutzerskript mit diesem Namen existiert bereits.\nÜberschreiben?
 newscript.id=ID
 newscript.includes=Einschlüsse (einer pro Zeile)
+newscript.missing.id=Bitte eine ID angeben.
+newscript.missing.name=Bitte einen Namen angeben. Der Name wird im Add-on Manager angezeigt.
 newscript.name=Name
 newscript.namespace=Namensraum
 newscript.noID=Bitte gültige ID für Ihr Benutzerskript angeben.

extension/locale/en-US/scriptish.properties

@@ -69,6 +69,8 @@ newscript.exists=A script with that name is already installed.\nOK to overwrite?
 newscript.id=ID
 newscript.includes=Includes (One per line)
 newscript.name=Name
+newscript.missing.id=Please provide an ID.
+newscript.missing.name=Please provide a name. The name will be shown within the add-on manager.
 newscript.namespace=Namespace
 newscript.noID=Please provide a valid ID for your script.
 newscript.noName=Please provide a name for your script.

extension/locale/es-ES/scriptish.properties

@@ -68,6 +68,8 @@ newscript.excludes=Exclusiones (una por línea)
 newscript.exists=Ya hay instalado un script con ese nombre.\n¿Sobreescribir?
 newscript.id=ID
 newscript.includes=Inclusiones (Una por línea)
+newscript.missing.id=
+newscript.missing.name=
 newscript.name=Nombre
 newscript.namespace=Espacio de nombres
 newscript.noID=Por favor, introduzca un ID válido para su script.

extension/locale/ja-JP/scriptish.properties

@@ -68,6 +68,8 @@ newscript.excludes=@exclude（スクリプトを実行したくない URL を１
 newscript.exists=その名前のスクリプトは既にインストールされています。\n上書きしますか？
 newscript.id=
 newscript.includes=@include（スクリプトを実行したい URL を１行１つずつ列挙）
+newscript.missing.id=
+newscript.missing.name=
 newscript.name=名前
 newscript.namespace=名前空間（URI）
 newscript.noID=スクリプトに正しい ID を指定してください

extension/locale/pt-BR/scriptish.properties

@@ -68,6 +68,8 @@ newscript.excludes=Exclusões (uma por linha)
 newscript.exists=Um script com esse nome já está instalado.\nDeseja substituir?
 newscript.id=Identificador
 newscript.includes=Inclusões (uma por linha)
+newscript.missing.id=
+newscript.missing.name=
 newscript.name=Nome
 newscript.namespace=Espaço de nomes
 newscript.noID=Por favor, informe um identificador válido para o seu script.

extension/locale/ru-RU/scriptish.properties

@@ -68,6 +68,8 @@ newscript.excludes=Исключать страницы (Одно правило
 newscript.exists=Скрипт с таким именем уже установлен.\nПерезаписать?
 newscript.id=
 newscript.includes=Включать страницы (Одно правило на строчку)
+newscript.missing.id=
+newscript.missing.name=
 newscript.name=Имя
 newscript.namespace=
 newscript.noID=Пожалуйста, введите идентификатор скрипта

extension/locale/sv-SE/scriptish.properties

@@ -68,6 +68,8 @@ newscript.excludes=Undantagna (ett per rad)
 newscript.exists=Ett skript med samma namn är redan installerat.\nVill du ersätta det?
 newscript.id=ID
 newscript.includes=Inkluderade (ett per rad)
+newscript.missing.id=
+newscript.missing.name=
 newscript.name=Namn
 newscript.namespace=Namnområde
 newscript.noID=Var vänlig ange ett giltigt ID för ditt skript.

extension/skin/newscript.css

@@ -1,5 +1,21 @@
 @import url(chrome://global/skin/);
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+row {
+  /* some more white space, so that the invalid borders don't overlap */
+  margin-bottom: 2px;
+  margin-bottom: 4px;
+}
+
+textbox {
+  margin-left: 1em;
+  min-width: 44em;
+}
+
+*[required][invalid="true"] {
+  box-shadow: 0pt 0pt 1.5px 1px red;
+}
 
 #generate-id {
   list-style-image: url(generate.png);