Whitelist editor localisation + formatting fixes

ext/src/_locales/en/messages.json

@@ -40,7 +40,28 @@
         "message": "Enabled"
     }
   , "options_option_uaWhitelist": {
-        "message": "Match patterns (newline-separated)"
+        "message": "Match matterns (newline-separated)"
+    }
+  , "options_option_uaWhitelistBasicView": {
+        "message": "Basic View"
+    }
+  , "options_option_uaWhitelistRawView": {
+        "message": "Raw View"
+    }
+  , "options_option_uaWhitelistSaveRaw": {
+        "message": "Save Raw"
+    }
+  , "options_option_uaWhitelistAddItem": {
+        "message": "Add Item"
+    }
+  , "options_option_uaWhitelistItemEdit": {
+        "message": "Edit"
+    }
+  , "options_option_uaWhitelistItemRemove": {
+        "message": "Remove"
+    }
+  , "options_option_uaWhitelistInvalidMatchPattern": {
+        "message": "Invalid match pattern $1"
     }
 
   , "options_submit": {

ext/src/options/index.css

@@ -45,6 +45,10 @@
 .editable-list {
     justify-content: end;
 }
+.editable-list__items {
+    display: flex;
+    flex-direction: column;
+}
 .editable-list__item {
     align-items: center;
     display: flex;
@@ -62,4 +66,6 @@
     resize: vertical;
     width: 100%;
 }
-
+.editable-list__add-button {
+    align-self: end;
+}

ext/src/options/index.jsx

@@ -38,7 +38,7 @@ class EditableListItem extends React.Component {
     handleEditEnd (ev) {
         if (this.props.editing
                 && !this.props.itemPattern.test(this.state.editValue)) {
-            ev.target.setCustomValidity(this.props.itemPatternError);
+            ev.target.setCustomValidity(this.props.itemPatternError());
         }
 
         if (!ev.target.validity.valid) {
@@ -58,7 +58,7 @@ class EditableListItem extends React.Component {
         });
         
         if (!this.props.itemPattern.test(ev.target.value)) {
-            ev.target.setCustomValidity(this.props.itemPatternError);        
+            ev.target.setCustomValidity(this.props.itemPatternError());        
         } else {
             ev.target.setCustomValidity("");
         }
@@ -86,10 +86,10 @@ class EditableListItem extends React.Component {
                         : this.props.text }
                 </div>
                 <button onClick={ this.handleEditBegin }>
-                    Edit
+                    { _("options_option_uaWhitelistItemEdit") }
                 </button>
                 <button onClick={ this.handleRemove }>
-                    Remove
+                    { _("options_option_uaWhitelistItemRemove") }
                 </button>
             </li>
         );
@@ -155,6 +155,7 @@ class EditableList extends React.Component {
 
     handleSaveRaw () {
         this.setState(currentState => {
+            console.log(currentState.rawViewValue);
             const newItems = currentState.rawViewValue.split("\n")
                 .filter(item => item !== "");
 
@@ -162,10 +163,12 @@ class EditableList extends React.Component {
                 for (const item of newItems) {
                     if (!this.props.itemPattern.test(item)) {
                         this.rawViewTextArea.setCustomValidity(
-                                `${this.props.itemPatternError}: ${item}`);
+                                this.props.itemPatternError(item));
                         return;
                     }
                 }
+
+                this.rawViewTextArea.setCustomValidity("");           
             }
 
             return {
@@ -214,12 +217,14 @@ class EditableList extends React.Component {
             <div className="editable-list">
                 <button className="editable-list__view-button"
                         onClick={ this.handleSwitchView }>
-                    { this.state.rawView ? "Basic" : "Raw" } View
+                    { this.state.rawView
+                        ? _("options_option_uaWhitelistBasicView")
+                        : _("options_option_uaWhitelistRawView") }
                 </button>
                 { this.state.rawView &&
                     <button className="editable-list__save-raw-button"
                             onClick={ this.handleSaveRaw }>
-                        Save Raw
+                        { _("options_option_uaWhitelistSaveRaw") }
                     </button> }
                 <hr />
                 {
@@ -239,16 +244,18 @@ class EditableList extends React.Component {
                                                       onEdit={ this.handleItemEdit }
                                                       key={ i } /> )}
                                 { this.state.addingNewItem &&
-                                    <EditableListItem text={""}
+                                    <EditableListItem text=""
                                                       itemPattern={ this.props.itemPattern }
                                                       itemPatternError={ this.props.itemPatternError }
                                                       onRemove={ this.handleNewItemRemove }
                                                       onEdit={ this.handleNewItemEdit }
                                                       editing={ true } /> }
+                                <div className="editable-list__item editable-list__item-actions">
                                     <button className="editable-list__add-button"
                                             onClick={ this.handleAddItem }>
-                                    Add Item
+                                        { _("options_option_uaWhitelistAddItem") }
                                     </button>
+                                </div>
                             </ul> )
                 }
             </div>
@@ -269,6 +276,7 @@ class OptionsApp extends Component {
         this.handleFormChange = this.handleFormChange.bind(this);
         this.handleInputChange = this.handleInputChange.bind(this);
         this.handleListChange = this.handleListChange.bind(this);
+        this.getItemPatternError = this.getItemPatternError.bind(this);
     }
 
     /**
@@ -341,6 +349,10 @@ class OptionsApp extends Component {
         });
     }
 
+    getItemPatternError (info) {
+        return _("options_option_uaWhitelistInvalidMatchPattern", info);
+    }
+
     render () {
         return (
             <form id="form" ref={ form => { this.form = form; }}
@@ -403,7 +415,7 @@ class OptionsApp extends Component {
                         <EditableList data={ this.state.option_uaWhitelist }
                                       onListChange={ this.handleListChange }
                                       itemPattern={ MATCH_PATTERN_REGEX }
-                                      itemPatternError="Invalid match pattern"/>
+                                      itemPatternError={ this.getItemPatternError }/>
                     </label>
                 </fieldset>