Bug 1044411 - Generate Loop ToS static content, r=abr,dmose; rs=ted for .hgignore changes

Bug 1044411 - Generate Loop ToS static content, priv-policy bits removed

.hgignore

@@ -81,3 +81,15 @@ GPATH
 
 # Git clone directory for updating web-platform-tests
 ^testing/web-platform/sync/
+
+# Loop web client build/deploy dependencies
+^browser/components/loop/standalone/bower_components
+
+# Loop legal content build/deploy artifacts
+
+# XXX Once a grunt contrib-clean command has been added (bug 1066491), or
+# once legal has centralized their ToS and PP hosting infrastructure,
+# (expected Q4 2014) the legal doc build stuff for Loop can be removed,
+# including the following three lines
+^browser/components/loop/standalone/content/legal/styles/.*\.css$
+^browser/components/loop/standalone/content/legal/terms/en_US\.html$

browser/components/loop/standalone/.gitignore

@@ -1,5 +1,14 @@
 .module-cache
 node_modules
+bower_components
 *.pyc
 content/config.js
 content/VERSION.txt
+
+# XXX Once a grunt contrib-clean command has been added (bug 1066491), or
+# once legal has centralized their ToS and PP hosting infrastructure,
+# (expected Q4 2014) the legal doc build stuff for Loop can be removed,
+# including the following three lines:
+content/legal/styles/*.css
+content/legal/terms/*.html
+content/legal/terms/!index.html

browser/components/loop/standalone/Gruntfile.js

@@ -0,0 +1,21 @@
+#!/usr/bin/env node
+
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+module.exports = function (grunt) {
+  'use strict';
+
+  // show elapsed time at the end
+  require('time-grunt')(grunt);
+
+  // load all grunt tasks
+  require('load-grunt-tasks')(grunt, {scope: 'devDependencies'});
+
+  grunt.initConfig({
+  });
+
+  grunt.loadTasks('grunttasks');
+}
+;

browser/components/loop/standalone/Makefile

@@ -2,15 +2,31 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
+# Note that this Makefile is not invoked by the Mozilla build
+# system, which is why it can have dependencies on things the
+# build system at-large doesn't yet support.
+
+# XXX In the interest of making the build logic simpler and
+# more maintainable, we should be trying to implement new
+# functionality in Gruntfile.js rather than here.
+# Bug 1066176 tracks moving all functionality currently here
+# to the Gruntfile and getting rid of this Makefile entirely.
+
 LOOP_SERVER_URL := $(shell echo $${LOOP_SERVER_URL-http://localhost:5000})
 NODE_LOCAL_BIN=./node_modules/.bin
 
-install:
+install: npm_install tos
+
+npm_install:
 	@npm install
 
 test:
 	@echo "Not implemented yet."
 
+tos:
+	@$(NODE_LOCAL_BIN)/grunt replace marked
+	@$(NODE_LOCAL_BIN)/grunt sass
+
 lint:
 	@$(NODE_LOCAL_BIN)/jshint *.js content test
 

browser/components/loop/standalone/README.md

@@ -9,8 +9,13 @@ NodeJS and npm installed.
 Installation
 ------------
 
+Fetch and install/build any NPM and bower dependencies, as well as the
+localized Terms-of-Service content:
+
     $ make install
 
+Some of the above is driven by Gruntfile.js.
+
 Configuration
 -------------
 

browser/components/loop/standalone/bower.json

@@ -0,0 +1,7 @@
+{
+  "name": "loop-client",
+  "dependencies": {
+    "tos-pp": "https://github.com/mozilla/legal-docs.git"
+  },
+  "devDependencies": {}
+}

browser/components/loop/standalone/content/legal/js/loader.js

@@ -0,0 +1,33 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// Set the current translation content
+function setBody(data) {
+  $("#legal-copy").html(data);
+}
+
+function normalizeLocale(lang) {
+  return lang.replace(/-/g, "_");
+}
+
+$(document).ready(function() {
+  // Get the favorite language
+  var lang, defaultLang = "en-US";
+  $.get(loop.config.serverUrl, function(data) {
+    if (data.hasOwnProperty("i18n")) {
+      lang = normalizeLocale(data.i18n.lang);
+      defaultLang = normalizeLocale(data.i18n.defaultLang);
+    }
+    if (lang === undefined) {
+      lang = normalizeLocale(defaultLang);
+    }
+
+    $.get(lang + ".html")
+      .done(setBody)
+      .fail(function() {
+        $.get(defaultLang + ".html")
+          .done(setBody);
+      });
+  });
+});

browser/components/loop/standalone/content/legal/styles/main.scss

@@ -0,0 +1,235 @@
+@font-face { font-family: 'Clear Sans'; font-style: normal; font-weight: 400; src: local(Clear Sans), local(ClearSans), url(/legal/fonts/latin/clearsans-regular.eot?#iefix) format(embedded-opentype), url(/legal/fonts/latin/clearsans-regular.woff) format(woff), url(/legal/fonts/latin/clearsans-regular.ttf) format(truetype), url(/legal/fonts/latin/clearsans-regular.svg#clearsans-regular) format(svg); }
+
+@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 400; src: local(Fira Sans), local(FiraSans-Regular), url(/legal/fonts/latin/firasans-regular.eot?#iefix) format(embedded-opentype), url(/legal/fonts/latin/firasans-regular.woff) format(woff), url(/legal/fonts/latin/firasans-regular.ttf) format(truetype), url(/legal/fonts/latin/firasans-regular.svg#firasans-regular) format(svg); }
+
+@font-face { font-family: 'Fira Sans'; font-style: normal; font-weight: 300; src: local(Fira Sans Light), local(FiraSans-Light), url(/legal/fonts/latin/firasans-light.eot?#iefix) format(embedded-opentype), url(/legal/fonts/latin/firasans-light.woff) format(woff), url(/legal/fonts/latin/firasans-light.ttf) format(truetype), url(/legal/fonts/latin/firasans-light.svg#firasans-light) format(svg); }
+
+@media (min-width: 321px) and (max-width: 480px) {
+	#about-mozilla {
+		display: none;
+	}
+
+	#main-content {
+		-webkit-box-shadow: rgb(138, 155, 168) 0px 1px 5px;
+		border-radius: 2px 2px;
+		box-shadow: rgb(138, 155, 168) 0px 1px 5px;
+		margin-top: 0px;
+		max-width: 360px;
+		min-height: 300px;
+		min-width: 300px;
+		padding-bottom: 10px;
+		padding-left: 20px;
+		padding-right: 20px;
+		padding-top: 45px;
+		position: relative;
+		top: -28px;
+		width: 94%;
+	}
+
+	.static {
+		-webkit-background-size: 48px 51px;
+		background-position-x: 50%;
+		background-position-y: 0%;
+		background-repeat: no-repeat;
+		background-size: 48px 51px;
+		height: 51px;
+		margin-top: 10px;
+		top: 0px;
+		width: 100%;
+	}
+
+	body {
+		padding-bottom: 20px;
+	}
+
+	h1 {
+		font-size: 20px;
+		margin-bottom: 20px;
+	}
+
+	html {
+		background-color: rgb(242, 242, 242);
+	}
+
+}
+
+@media (min-width: 481px) {
+	#main-content {
+		-webkit-box-shadow: rgb(138, 155, 168) 0px 1px 5px;
+		border-radius: 4px 4px;
+		box-shadow: rgb(138, 155, 168) 0px 1px 5px;
+		margin-top: -5px;
+		min-height: 450px;
+		padding-bottom: 40px;
+		padding-left: 40px;
+		padding-right: 40px;
+		padding-top: 60px;
+		width: 420px;
+	}
+
+	.static {
+		-webkit-background-size: 80px 85px;
+		background-size: 80px 85px;
+		height: 85px;
+		margin-top: 0px;
+		top: 40px;
+		width: 80px;
+	}
+
+	body {
+		padding-bottom: 20px;
+	}
+
+	h1 {
+		font-size: 24px;
+		margin-bottom: 32px;
+	}
+
+	html {
+		background-color: rgb(242, 242, 242);
+	}
+
+}
+
+@media (max-width: 319px) {
+	#about-mozilla {
+		display: none;
+	}
+
+	#main-content {
+		-webkit-box-shadow: none;
+		background-position-x: 0px;
+		background-position-y: 0px;
+		border-radius: 2px 2px;
+		box-shadow: none;
+		margin-top: 10px;
+		max-width: 360px;
+		min-height: 0px;
+		min-width: 250px;
+		padding: 0px;
+		position: relative;
+		top: 0px;
+		width: 250px;
+	}
+
+	.static {
+		-webkit-background-size: 48px 51px;
+		background-position-x: 50%;
+		background-position-y: 0%;
+		background-repeat: no-repeat;
+		background-size: 48px 51px;
+		display: none;
+		height: 51px;
+		margin-top: 10px;
+		top: 0px;
+		width: 100%;
+	}
+
+	body {
+		margin: 0px;
+		padding: 0px;
+	}
+
+	h1 {
+		font-size: 18px;
+		margin-bottom: 10px;
+	}
+
+	html {
+		background-color: rgb(255, 255, 255);
+	}
+
+}
+
+#about-mozilla {
+	-webkit-background-size: 69px 19px;
+	-webkit-transition-duration: 150ms;
+	-webkit-transition-property: opacity;
+	background-image: url(/legal/images/mozilla.png);
+	background-size: 69px 19px;
+	height: 19px;
+	opacity: 0.5;
+	position: absolute;
+	right: 12px;
+	top: 12px;
+	width: 69px;
+}
+
+#main-content {
+	background-color: rgb(255, 255, 255);
+	margin-bottom: 0px;
+	margin-left: auto;
+	margin-right: auto;
+	text-align: center;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+.static {
+	background-image: url(/legal/images/firefox.png);
+	margin-bottom: 0px;
+	margin-left: auto;
+	margin-right: auto;
+	opacity: 1;
+	background-size: 102px 96px;
+	height: 102px;
+	width: 96px;
+	position: relative;
+	position: relative;
+	z-index: 999;
+}
+
+a {
+	color: rgb(0, 149, 221);
+	cursor: pointer;
+}
+
+article {
+	text-align: left;
+}
+
+body {
+	color: rgb(66, 79, 89);
+	font-family: 'Clear Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	font-size: 14px;
+}
+
+h1, h2 {
+	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
+	font-weight: 200;
+	line-height: 1em;
+	margin-left: 0px;
+	margin-right: 0px;
+	margin-top: 0px;
+}
+
+h3 {
+	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
+	font-size: 12px;
+	line-height: 1em;
+	margin: 0px;
+	padding-bottom: 10px;
+	padding-left: 0px;
+	padding-right: 0px;
+	padding-top: 5px;
+}
+
+html {
+	height: 100%;
+}
+
+ol {
+	margin-left: 0px;
+	padding-left: 20px;
+}
+
+p {
+	font-size: 14px;
+}
+
+ul {
+	margin-left: 0px;
+	padding-left: 20px;
+}

browser/components/loop/standalone/content/legal/terms/index.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie10 lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="lt-ie10 lt-ie9"> <![endif]-->
+<!--[if IE 9]>         <html class="lt-ie10"> <![endif]-->
+<!--[if gt IE 9]><!--> <html dir="ltr" lang="en-US"> <!--<![endif]-->
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>WebRTC: Terms of Service</title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width">
+
+        <link rel="stylesheet" href="/legal/styles/main.css">
+    </head>
+    <body>
+        <div id="fox-logo" class="static"></div>
+        <div id="stage">
+          <div id="main-content">
+            <!--[if lt IE 10]>
+                <p class="error browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+            <![endif]-->
+            <header id="legal-header">
+              <h3>WebRTC</h3>
+              <h1 id="webrtc-tos-header">Terms of Service</h1>
+            </header>
+
+            <section>
+              <article id="legal-copy">
+                Loading...
+              </article>
+
+            </section>
+          </div>
+        </div>
+        <a id="about-mozilla" rel="author" target="_blank" href="https://www.mozilla.org/about/?utm_source=firefox-webrtc&amp;utm_medium=Referral"></a>
+        <script type="text/javascript" src="/shared/libs/jquery-2.1.0.js"></script>
+        <script type="text/javascript" src="/config.js"></script>
+        <script type="text/javascript" src="/legal/js/loader.js"></script>
+    </body>
+</html>

browser/components/loop/standalone/grunttasks/marked.js

@@ -0,0 +1,36 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+var path = require('path');
+var i18n = require('i18n-abide');
+
+module.exports = function (grunt) {
+  'use strict';
+
+  // convert localized TOS agreement from markdown to html partials.
+
+  function rename(destPath, srcFile) {
+    // Normalize the filenames to use the locale name.
+    var lang = srcFile.replace('.md', '');
+    return path.join(destPath, i18n.localeFrom(lang) + '.html');
+  }
+
+  grunt.config('marked', {
+    options: {
+      sanitize: false,
+      gfm: true
+    },
+    tos: {
+      files: [
+        {
+          expand: true,
+          cwd: '<%= project_vars.tos_md_src %>',
+          src: ['**/*.md'],
+          dest: '<%= project_vars.tos_html_dest %>',
+          rename: rename
+        }
+      ]
+    }
+  });
+};

browser/components/loop/standalone/grunttasks/project_vars.js

@@ -0,0 +1,18 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+module.exports = function (grunt) {
+  'use strict';
+
+  var TEMPLATE_ROOT = 'content/legal';
+  var TOS_PP_REPO_ROOT = 'bower_components/tos-pp';
+
+  grunt.config('project_vars', {
+    app: "content",
+    // Translated TOS/PP agreements.
+    tos_pp_repo_dest: TOS_PP_REPO_ROOT,
+    tos_md_src: TOS_PP_REPO_ROOT + '/WebRTC_ToS/',
+    tos_html_dest: TEMPLATE_ROOT + '/terms'
+  });
+};

browser/components/loop/standalone/grunttasks/replace.js

@@ -0,0 +1,37 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+module.exports = function (grunt) {
+  'use strict';
+
+  grunt.config('replace', {
+    tos: {
+      src: [
+        '<%= project_vars.tos_md_src %>/*.md'
+      ],
+      overwrite: true,
+      replacements: [{
+        // remove tags not handle by the markdown-to-HTML conversation
+        from: /{:\s.*?\s}/g,
+        to: ''
+      }, {
+        // remove unhandled comments
+        from: /^#\s.*?\n$/m,
+        to: ''
+      }, {
+        // fix "smart quotes"
+        from: /(“|”)/g,
+        to: "&quot;"
+      }, {
+        // fix "smart quotes"
+        from: /’/g,
+        to: "&#39;"
+      }, {
+        from: /–/g,
+        to: "&mdash;"
+      }
+      ]
+    }
+  });
+};

browser/components/loop/standalone/grunttasks/sass.js

@@ -0,0 +1,16 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+module.exports = function (grunt) {
+  'use strict';
+
+  grunt.config('sass', {
+    styles: {
+      files: {
+        '<%= project_vars.app %>/legal/styles/main.css':
+          '<%= project_vars.app %>/legal/styles/main.scss'
+      }
+    }
+  });
+};

browser/components/loop/standalone/package.json

@@ -1,19 +1,33 @@
 {
-  "name": "Loop-client",
-  "description": "Video conferencing app powered by WebRTC.",
+  "name": "loop-client",
+  "description": "Video conferencing app powered by WebRTC",
   "version": "0.0.1",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:mozilla/loop-client.git"
+  },
   "engines": {
     "node": "0.10.x",
-    "npm":"1.3.x"
-  },
-  "dependencies": {
-    "express": "3.x"
+    "npm": "1.3.x"
   },
+  "dependencies": {},
   "devDependencies": {
-    "jshint": "2.x"
+    "bower": "1.3.9",
+    "express": "3.x",
+    "grunt": "0.4.5",
+    "grunt-cli": "0.1.13",
+    "grunt-marked": "0.1.1",
+    "grunt-sass": "0.14.1",
+    "grunt-text-replace": "0.3.12",
+    "i18n-abide": "0.0.22",
+    "jshint": "2.x",
+    "load-grunt-tasks": "0.6.0",
+    "time-grunt": "0.4.0"
   },
   "scripts": {
     "test": "make test",
-    "start": "make runserver"
-  }
+    "start": "make runserver",
+    "prepublish": "bower install --config.interactive=false -s"
+  },
+  "license": "MPL-2.0"
 }

browser/components/loop/standalone/server.js

@@ -8,20 +8,29 @@ var app = express();
 var port = process.env.PORT || 3000;
 var loopServerPort = process.env.LOOP_SERVER_PORT || 5000;
 
-app.get('/content/config.js', function (req, res) {
+function getConfigFile(req, res) {
   "use strict";
 
   res.set('Content-Type', 'text/javascript');
   res.send(
     "var loop = loop || {};" +
     "loop.config = loop.config || {};" +
-    "loop.config.serverUrl = 'http://localhost:" + loopServerPort + "';"
+    "loop.config.serverUrl = 'http://localhost:" + loopServerPort + "';" +
+    "loop.config.pendingCallTimeout = 20000;"
   );
+}
 
-});
+app.get('/content/config.js', getConfigFile);
 
 // This lets /test/ be mapped to the right place for running tests
 app.use('/', express.static(__dirname + '/../'));
+
+// Magic so that the legal content works both in the standalone server
+// and as static content in the loop-client repo
+app.use('/', express.static(__dirname + '/content/'));
+app.use('/shared', express.static(__dirname + '/../content/shared/'));
+app.get('/config.js', getConfigFile);
+
 // This lets /content/ be mapped right for the static contents.
 app.use('/', express.static(__dirname + '/'));
 // This lets standalone components load images into the UI showcase