Bug 821461 - Use inline web activity when saving bookmark

mozilla-b2g · Dec 21, 2012 · 3b3276f · 3b3276f
1 parent 004f337
commit 3b3276f
Show file tree

Hide file tree

Showing 10 changed files with 152 additions and 80 deletions.
diff --git a/apps/homescreen/index.html b/apps/homescreen/index.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="UTF-8"/>
-    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0"/>
-    <link rel="stylesheet" type="text/css" href="style/homescreen.css"/>
-    <link rel="stylesheet" type="text/css" href="style/grid.css"/>
-    <link rel="stylesheet" type="text/css" href="style/dragdrop.css"/>
-    <link rel="stylesheet" type="text/css" href="style/dock.css"/>
-    <link rel="stylesheet" type="text/css" href="style/landing.css"/>
-    <link rel="stylesheet" type="text/css" href="everything.me/css/everything.me.css"/>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="style/homescreen.css">
+    <link rel="stylesheet" type="text/css" href="style/grid.css">
+    <link rel="stylesheet" type="text/css" href="style/dragdrop.css">
+    <link rel="stylesheet" type="text/css" href="style/dock.css">
+    <link rel="stylesheet" type="text/css" href="style/landing.css">
+    <link rel="stylesheet" type="text/css" href="everything.me/css/everything.me.css">
 
     <!-- Shared code -->
     <script type="text/javascript" src="shared/js/l10n.js"></script>
@@ -17,11 +17,11 @@
     <link rel="stylesheet" type="text/css" href="shared/style_unstable/progress_activity.css">
     <link rel="stylesheet" type="text/css" href="shared/style/buttons.css">
     <link rel="stylesheet" type="text/css" href="shared/style/headers.css">
-    <link rel="stylesheet" type="text/css" href="shared/style/input_areas.css">
     <link rel="stylesheet" type="text/css" href="shared/style/confirm.css">
     <link rel="stylesheet" type="text/css" href="style/request.css">
 
     <!-- Specific code -->
+    <script type="text/javascript" defer src="js/message.js"></script>
     <script type="text/javascript" defer src="js/request.js"></script>
     <script type="text/javascript" defer src="js/bookmark.js"></script>
     <script type="text/javascript" defer src="js/state.js"></script>
@@ -44,24 +44,6 @@
     <div id="search-overlay"></div>
     <div id="landing-overlay"></div>
 
-    <section id="bookmark-entry-sheet" role="region" class="skin-dark">
-      <header>
-        <button id="button-bookmark-cancel">
-          <span class="icon icon-close" data-l10n-id="cancel">Cancel</span>
-        </button>
-        <h1 data-l10n-id="add-to-home-screen">Add to Home Screen</h1>
-      </header>
-      <form id="bookmark-form">
-        <label data-l10n-id="website-name">
-          Website Name<input type="text" id="bookmark-title"></input>
-        </label>
-        <label data-l10n-id="address">
-          Address <input type="url" id="bookmark-url"></input>
-        </label>
-        <button id="button-bookmark-add" data-l10n-id="add-to-home-screen">Add to Home Screen</button>
-      </form>
-    </section>
-
     <section id="confirm-dialog">
       <form role="dialog" data-type="confirm">
         <section>

diff --git a/apps/homescreen/js/bookmark.js b/apps/homescreen/js/bookmark.js
@@ -1,4 +1,3 @@
-
 'use strict';
 
 var Bookmark = function Bookmark(params) {
@@ -35,32 +34,42 @@ Bookmark.prototype = {
 };
 
 var BookmarkEditor = {
-  init: function bookmarkEditor_show(data) {
-    this.data = data;
+  init: function bookmarkEditor_show(options) {
+    this.data = options.data;
+    this.onsaved = options.onsaved;
+    this.oncancelled = options.oncancelled;
     this.bookmarkEntrySheet = document.getElementById('bookmark-entry-sheet');
     this.bookmarkTitle = document.getElementById('bookmark-title');
     this.bookmarkUrl = document.getElementById('bookmark-url');
     this.cancelButton = document.getElementById('button-bookmark-cancel');
     this.addButton = document.getElementById('button-bookmark-add');
 
-    this.bookmarkEntrySheet.classList.add('active');
-
     this.cancelButton.addEventListener('click', this.close.bind(this));
     this.addButton.addEventListener('click', this.save.bind(this));
 
-    this.bookmarkTitle.value = data.name || '';
-    this.bookmarkUrl.value = data.url || '';
+    this.bookmarkTitle.value = this.data.name || '';
+    this.bookmarkUrl.value = this.data.url || '';
+
+    this.origin = document.location.protocol + '//homescreen.' +
+      document.location.host.replace(/(^[\w\d]+.)?([\w\d]+.[a-z]+)/, '$2');
   },
 
   close: function bookmarkEditor_close() {
-    this.bookmarkEntrySheet.classList.remove('active');
+    this.oncancelled();
   },
 
   save: function bookmarkEditor_save() {
     this.data.name = this.bookmarkTitle.value;
     this.data.bookmarkURL = this.bookmarkUrl.value;
-    var app = new Bookmark(this.data);
-    GridManager.install(app);
-    this.close();
+
+    var homeScreenWindow = window.open('', 'main');
+    if (!homeScreenWindow)
+      this.close();
+    else {
+      homeScreenWindow.postMessage(
+        new Message(Message.Type.ADD_BOOKMARK, this.data), this.origin);
+      this.onsaved();
+    }
   }
 };
+
diff --git a/apps/homescreen/js/homescreen.js b/apps/homescreen/js/homescreen.js
@@ -3,7 +3,8 @@
 
 const Homescreen = (function() {
   var mode = 'normal';
-
+  var origin = document.location.protocol + '//homescreen.' +
+    document.location.host.replace(/(^[\w\d]+.)?([\w\d]+.[a-z]+)/, '$2');
   var _ = navigator.mozL10n.get;
   setLocale();
   window.addEventListener('localized', function localize() {
@@ -34,25 +35,24 @@ const Homescreen = (function() {
     }
   });
 
+  window.addEventListener('message', function hs_onMessage(event) {
+    if (event.origin === origin) {
+      var message = event.data;
+      switch (message.type) {
+        case Message.Type.ADD_BOOKMARK:
+          var app = new Bookmark(message.data);
+          GridManager.install(app);
+          break;
+      }
+    }
+  });
+
   function setLocale() {
     // set the 'lang' and 'dir' attributes to <html> when the page is translated
     document.documentElement.lang = navigator.mozL10n.language.code;
     document.documentElement.dir = navigator.mozL10n.language.direction;
   }
 
-  if (navigator.mozSetMessageHandler) {
-    navigator.mozSetMessageHandler('activity', function onActivity(activity) {
-      var data = activity.source.data;
-      switch (activity.source.name) {
-        case 'save-bookmark':
-          if (data.type === 'url') {
-            BookmarkEditor.init(data);
-          }
-          break;
-      }
-    });
-  }
-
   return {
     /*
      * Displays the contextual menu given an app.

diff --git a/apps/homescreen/js/message.js b/apps/homescreen/js/message.js
@@ -0,0 +1,11 @@
+
+'use strict';
+
+var Message = function Message(type, data) {
+  this.type = type;
+  this.data = data;
+};
+
+Message.Type = {
+  'ADD_BOOKMARK': 0
+};
diff --git a/apps/homescreen/js/save-bookmark.js b/apps/homescreen/js/save-bookmark.js
@@ -0,0 +1,26 @@
+'use strict';
+
+if (navigator.mozSetMessageHandler) {
+  navigator.mozSetMessageHandler('activity', function onActivity(activity) {
+    switch (activity.source.name) {
+      case 'save-bookmark':
+        var bookmarkSaved = function sb_bookmarkSaved() {
+          activity.postResult('saved');
+        };
+        var addBookmarkCancelled = function sb_addBookmarkCancelled() {
+          activity.postError('cancelled');
+        };
+
+        var data = activity.source.data;
+        if (data.type === 'url') {
+          var options = {
+            data: data,
+            onsaved: bookmarkSaved,
+            oncancelled: addBookmarkCancelled
+          };
+          BookmarkEditor.init(options);
+        }
+        break;
+    }
+  });
+}
diff --git a/apps/homescreen/manifest.webapp b/apps/homescreen/manifest.webapp
@@ -38,7 +38,10 @@
     "save-bookmark": {
       "filters": {
         "type": "url"
-      }
+      },
+      "disposition": "inline",
+      "href": "/save-bookmark.html",
+      "returnValue": true
     }
   }
 }
diff --git a/apps/homescreen/save-bookmark.html b/apps/homescreen/save-bookmark.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="style/homescreen.css">
+    <link rel="stylesheet" type="text/css" href="style/bookmark.css">
+
+    <!-- Shared code -->
+    <script type="text/javascript" src="shared/js/l10n.js"></script>
+    <script type="text/javascript" src="shared/js/l10n_date.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="shared/style/buttons.css">
+    <link rel="stylesheet" type="text/css" href="shared/style/headers.css">
+    <link rel="stylesheet" type="text/css" href="shared/style/input_areas.css">
+    <link rel="stylesheet" type="text/css" href="shared/style/confirm.css">
+
+    <!-- Specific code -->
+    <script type="text/javascript" src="js/message.js"></script>
+    <script type="text/javascript" src="js/bookmark.js"></script>
+    <script type="text/javascript" src="js/save-bookmark.js"></script>
+
+    <link rel="resource" type="application/l10n" href="locales/locales.ini">
+    <link rel="resource" type="application/l10n" href="shared/locales/date.ini">
+  </head>
+  <body>
+    <section id="bookmark-entry-sheet" role="region" class="skin-dark">
+      <header>
+        <button id="button-bookmark-cancel">
+          <span class="icon icon-close" data-l10n-id="cancel">Cancel</span>
+        </button>
+        <h1 data-l10n-id="add-to-home-screen">Add to Home Screen</h1>
+      </header>
+      <form id="bookmark-form">
+        <label data-l10n-id="website-name">
+          Website Name<input type="text" id="bookmark-title"></input>
+        </label>
+        <label data-l10n-id="address">
+          Address <input type="url" id="bookmark-url"></input>
+        </label>
+        <button id="button-bookmark-add" data-l10n-id="add-to-home-screen">Add to Home Screen</button>
+      </form>
+    </section>
+  </body>
+</html>
diff --git a/apps/homescreen/style/bookmark.css b/apps/homescreen/style/bookmark.css
@@ -0,0 +1,20 @@
+#bookmark-entry-sheet {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: #edeee9;
+  z-index: 10001;
+}
+
+#bookmark-form {
+  padding: 1.5rem;
+}
+
+#bookmark-form label {
+  text-transform: uppercase;
+  font-size: 1.5rem;
+}
+
+#bookmark-form input {
+  margin-bottom: 1.5rem;
+}
diff --git a/apps/homescreen/style/homescreen.css b/apps/homescreen/style/homescreen.css
@@ -9,32 +9,6 @@ html, body {
   overflow: hidden;
 }
 
-#bookmark-entry-sheet {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  background-color: #edeee9;
-  z-index: 10001;
-  display: none;
-}
-
-#bookmark-entry-sheet.active {
-  display: block;
-}
-
-#bookmark-form {
-  padding: 1.5rem;
-}
-
-#bookmark-form label {
-  text-transform: uppercase;
-  font-size: 1.5rem;
-}
-
-#bookmark-form input {
-  margin-bottom: 1.5rem;
-}
-
 * {
   -moz-user-select: -moz-none;
 }

diff --git a/apps/system/js/window_manager.js b/apps/system/js/window_manager.js
@@ -1094,6 +1094,7 @@ var WindowManager = (function() {
         createFrame(origFrame, origin, url, name, manifest, manifestURL);
     frame.id = 'appframe' + nextAppId++;
     frame.dataset.frameType = 'window';
+    frame.name = 'main';
 
     // Add the iframe to the document
     windows.appendChild(frame);
@@ -1138,6 +1139,7 @@ var WindowManager = (function() {
     var frame = createFrame(null, origin, url, name, manifest, manifestURL);
     frame.classList.add('inlineActivity');
     frame.dataset.frameType = 'inline-activity';
+    frame.name = 'inline';
 
     // Discard any existing activity
     stopInlineActivity();
@@ -1379,7 +1381,7 @@ var WindowManager = (function() {
   // And reset to true when the layer is gone.
   // We may need to handle windowclosing, windowopened in the future.
   var attentionScreenTimer = null;
-  
+
   var overlayEvents = ['lock', 'unlock', 'attentionscreenshow', 'attentionscreenhide', 'status-active', 'status-inactive'];
 
   function overlayEventHandler(evt) {