Merge ca5980f into d350291

mozilla · Jan 26, 2016 · 3bd935c · 3bd935c
2 parents d350291 + ca5980f
commit 3bd935c
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 11 deletions.
diff --git a/bin/generate-html.js b/bin/generate-html.js
@@ -5,14 +5,15 @@ const defaults = {
   title: "New Tab",
   cssPath: "./main.css",
   jsPath: "./main.js",
-  localeDataPath: "./locale-data.js"
+  localeDataPath: "./locale-data.js",
+  localeDir: "ltr"
 };
 
 function template(rawOptions) {
   const options = Object.assign({}, defaults, rawOptions || {});
   return `
 <!DOCTYPE html>
-<html lang="${options.locale}">
+<html dir="${options.localeDir}" lang="${options.locale}">
 <head>
   <meta charset="utf-8">
    <meta name="viewport" content="width=device-width user-scalable=no" />

diff --git a/src/components/Search/Search.js b/src/components/Search/Search.js
@@ -33,6 +33,7 @@ const Search = React.createClass({
         <div className="search-icon" />
         <input ref="input" className="search-input" type="search"
           value={searchString}
+          placeholder="Search"
           onChange={e => this.setValueAndSuggestions(e.target.value)}
           onFocus={() => this.setState({focus: true})}
           onBlur={() => setTimeout(() => this.setState({focus: false}), 200)} />

diff --git a/src/components/Search/Search.scss b/src/components/Search/Search.scss
@@ -18,11 +18,18 @@
     padding: 0 10px 0 $search-left-padding;
     height: $search-height;
     margin: 0;
-    border-radius: 3px 0 0 3px;
+    border-radius: 2px 0 0 2px;
+    font-size: 16px;
+    text-align: left;
     &:focus {
       outline: none;
       border-color: $focus-blue;
     }
+    &:-moz-dir(rtl) {
+      border: 1px solid;
+      border-color: rgba(23, 51, 78, 0.15) rgba(23, 51, 78, 0.17) rgba(23, 51, 78, 0.2);
+      border-left: none;
+    }
   }
 
   .search-submit {
@@ -32,11 +39,14 @@
     border: 1px solid;
     border-color: rgba(23, 51, 78, 0.15) rgba(23, 51, 78, 0.17) rgba(23, 51, 78, 0.2);
     padding: 0 15px;
-    border-radius: 0 3px 3px 0;
+    border-radius: 0 2px 2px 0;
     width: 50px;
     &:hover {
       background: url("chrome://browser/skin/search-arrow-go.svg#search-arrow-go-inverted") center center no-repeat, linear-gradient(#4cb1ff, #1793e5);
     }
+    &:-moz-dir(rtl) {
+      border-radius: 2px 0 0 2px;
+    }
   }
 
   .search-input:focus + .search-submit {
@@ -53,5 +63,8 @@
     background-repeat: no-repeat;
     background-position: 5px center;
     @include bgimage("magnifier.svg");
+    &:-moz-dir(rtl) {
+      right: 0;
+    }
   }
 }
diff --git a/src/components/Settings/Settings.js b/src/components/Settings/Settings.js
@@ -1,6 +1,6 @@
 const React = require("react");
 const classnames = require("classnames");
-const {FormattedMessage} = require("react-intl");
+const {FormattedMessage, injectIntl} = require("react-intl");
 
 const Settings = React.createClass({
   getInitialState: function () {
@@ -16,7 +16,7 @@ const Settings = React.createClass({
   },
   render: function () {
     return (<div className="settings">
-      <div className="settings-toggle-container">
+      <div dir={this.props.intl.formatMessage({id: "locale-dir"})} className="settings-toggle-container">
         <button className="settings-toggle"
           onClick={this.toggleMenu}>
           <img src="./img/icon-gear.svg" />
@@ -60,4 +60,4 @@ Settings.propTypes = {
   setPrefs: React.PropTypes.func.isRequired
 };
 
-module.exports = Settings;
+module.exports = injectIntl(Settings);
diff --git a/src/components/Settings/Settings.scss b/src/components/Settings/Settings.scss
@@ -5,6 +5,11 @@
     right: 20px;
     z-index: 1;
     text-align: right;
+    &:-moz-dir(rtl) {
+      right: auto;
+      text-align: left;
+      left: 20px;
+    }
   }
   .settings-toggle {
     background: none;
@@ -78,6 +83,19 @@
         }
       }
     }
+    &:-moz-dir(rtl) {
+      &::before {
+        right: auto;
+        left: 10px;
+      }
+      &::after {
+        right: auto;
+        left: 10px;
+      }
+      &.active {
+        text-align: right;
+      }
+    }
   }
   .settings-overlay {
     display: none;

diff --git a/tests-node/generate-html.test.js b/tests-node/generate-html.test.js
@@ -14,11 +14,14 @@ function execute(args) {
 describe("generateHTML", () => {
   it("should generate some html", () => {
     assert.ok(generateHTML());
-    assert.include(generateHTML(), `<html lang="en-US">`);
+    assert.include(generateHTML(), `<html dir="ltr" lang="en-US">`);
     assert.include(generateHTML(), `<title>New Tab</title>`);
   });
   it("should render locale", () => {
-    assert.include(generateHTML({locale: "es-ES"}), `<html lang="es-ES">`);
+    assert.include(generateHTML({locale: "es-ES"}), `<html dir="ltr" lang="es-ES">`);
+  });
+  it("should render page direction", () => {
+    assert.include(generateHTML({localeDir: "rtl"}), `<html dir="rtl" lang="en-US">`);
   });
   it("should include file paths", () => {
     const result = execute();
@@ -31,8 +34,8 @@ describe("generateHTML", () => {
       assert.ok(execute());
     });
     it("should take locale as an arg", () => {
-      assert.include(execute("-l es-ES"), `<html lang="es-ES">`);
-      assert.include(execute("--locale es-ES"), `<html lang="es-ES">`);
+      assert.include(execute("-l es-ES"), `<html dir="ltr" lang="es-ES">`);
+      assert.include(execute("--locale es-ES"), `<html dir="ltr" lang="es-ES">`);
     });
     it("should take title as an arg", () => {
       assert.include(execute("-t foo"), `<title>foo</title>`);