chore(docs): refactor the docs app search for better bootup time

This commit refactors how the search index is built. The docsSearch service
is now defined by a provider, which returns a different implementation of
the service depending upon whether the current browser supports WebWorkers
or now.

* **WebWorker supported**: The index is then built and stored in a new worker.
The service posts and receives messages to and from this worker to make
queries on the search index.

* **WebWorker no supported**: The index is built locally but with a 500ms
delay so that the initial page can render before the browser is blocked as
the index is built.

Also the way that the current app is identified has been modified so we can
slim down the js data files (pages-data.js) to again improve startup time.

Closes #9204
Closes #9203

Author: petebacondarwin

docs/app/assets/css/docs.css

@@ -316,10 +316,10 @@ iframe.example {
 }
 
 .search-results-group.col-group-api { width:30%; }
-.search-results-group.col-group-guide { width:30%; }
-.search-results-group.col-group-tutorial { width:25%; }
+.search-results-group.col-group-guide,
+.search-results-group.col-group-tutorial { width:20%; }
 .search-results-group.col-group-misc,
-.search-results-group.col-group-error { float:right; clear:both; width:15% }
+.search-results-group.col-group-error { width:15%; float: right; }
 
 
 .search-results-group.col-group-api .search-result {

docs/app/assets/js/search-worker.js

@@ -0,0 +1,44 @@
+"use strict";
+/* jshint browser: true */
+/* global importScripts, onmessage: true, postMessage, lunr */
+
+// Load up the lunr library
+importScripts('../components/lunr.js-0.4.2/lunr.min.js');
+
+// Create the lunr index - the docs should be an array of object, each object containing
+// the path and search terms for a page
+var index = lunr(function() {
+  this.ref('path');
+  this.field('titleWords', {boost: 50});
+  this.field('members', { boost: 40});
+  this.field('keywords', { boost : 20 });
+});
+
+// Retrieve the searchData which contains the information about each page to be indexed
+var searchData = {};
+var searchDataRequest = new XMLHttpRequest();
+searchDataRequest.onload = function() {
+
+  // Store the pages data to be used in mapping query results back to pages
+  searchData = JSON.parse(this.responseText);
+  // Add search terms from each page to the search index
+  searchData.forEach(function(page) {
+    index.add(page);
+  });
+  postMessage({ e: 'index-ready' });
+};
+searchDataRequest.open('GET', 'search-data.json');
+searchDataRequest.send();
+
+// The worker receives a message everytime the web app wants to query the index
+onmessage = function(oEvent) {
+  var q = oEvent.data.q;
+  var hits = index.search(q);
+  var results = [];
+  // Only return the array of paths to pages
+  hits.forEach(function(hit) {
+    results.push(hit.ref);
+  });
+  // The results of the query are sent back to the web app via a new message
+  postMessage({ e: 'query-ready', q: q, d: results });
+};

docs/app/e2e/app.scenario.js

@@ -77,10 +77,13 @@ describe('docs.angularjs.org', function () {
     });
 
 
-    it("should display an error if the page does not exist", function() {
-      browser.get('index-debug.html#!/api/does/not/exist');
-      expect(element(by.css('h1')).getText()).toBe('Oops!');
-    });
   });
 
 });
+
+describe('Error Handling', function() {
+  it("should display an error if the page does not exist", function() {
+    browser.get('index-debug.html#!/api/does/not/exist');
+    expect(element(by.css('h1')).getText()).toBe('Oops!');
+  });
+});

docs/app/src/app.js

@@ -6,6 +6,7 @@ angular.module('docsApp', [
   'DocsController',
   'versionsData',
   'pagesData',
+  'navData',
   'directives',
   'errors',
   'examples',

docs/app/src/docs.js

@@ -6,87 +6,39 @@ angular.module('DocsController', [])
   function($scope, $rootScope, $location, $window, $cookies, openPlunkr,
               NG_PAGES, NG_NAVIGATION, NG_VERSION) {
 
-
   $scope.openPlunkr = openPlunkr;
 
   $scope.docsVersion = NG_VERSION.isSnapshot ? 'snapshot' : NG_VERSION.version;
 
-  $scope.fold = function(url) {
-    if(url) {
-      $scope.docs_fold = '/notes/' + url;
-      if(/\/build/.test($window.location.href)) {
-        $scope.docs_fold = '/build/docs' + $scope.docs_fold;
-      }
-      window.scrollTo(0,0);
-    }
-    else {
-      $scope.docs_fold = null;
-    }
-  };
-  var OFFLINE_COOKIE_NAME = 'ng-offline',
-      INDEX_PATH = /^(\/|\/index[^\.]*.html)$/;
-
-
-  /**********************************
-   Publish methods
-   ***********************************/
-
   $scope.navClass = function(navItem) {
     return {
       active: navItem.href && this.currentPage && this.currentPage.path,
       'nav-index-section': navItem.type === 'section'
     };
   };
 
-  $scope.afterPartialLoaded = function() {
-    var pagePath = $scope.currentPage ? $scope.currentPage.path : $location.path();
-    $window._gaq.push(['_trackPageview', pagePath]);
-  };
-
-  /** stores a cookie that is used by apache to decide which manifest ot send */
-  $scope.enableOffline = function() {
-    //The cookie will be good for one year!
-    var date = new Date();
-    date.setTime(date.getTime()+(365*24*60*60*1000));
-    var expires = "; expires="+date.toGMTString();
-    var value = angular.version.full;
-    document.cookie = OFFLINE_COOKIE_NAME + "="+value+expires+"; path=" + $location.path;
-
-    //force the page to reload so server can serve new manifest file
-    window.location.reload(true);
-  };
 
 
+  $scope.$on('$includeContentLoaded', function() {
+    var pagePath = $scope.currentPage ? $scope.currentPage.path : $location.path();
+    $window._gaq.push(['_trackPageview', pagePath]);
+  });
 
-  /**********************************
-   Watches
-   ***********************************/
+  $scope.$on('$includeContentError', function() {
+    $scope.partialPath = 'Error404.html';
+  });
 
 
   $scope.$watch(function docsPathWatch() {return $location.path(); }, function docsPathWatchAction(path) {
 
-    var currentPage = $scope.currentPage = NG_PAGES[path];
-    if ( !currentPage && path.charAt(0)==='/' ) {
-      // Strip off leading slash
-      path = path.substr(1);
-    }
-
-    currentPage = $scope.currentPage = NG_PAGES[path];
-    if ( !currentPage && path.charAt(path.length-1) === '/' && path.length > 1 ) {
-      // Strip off trailing slash
-      path = path.substr(0, path.length-1);
-    }
+    path = path.replace(/^\/?(.+?)(\/index)?\/?$/, '$1');
 
-    currentPage = $scope.currentPage = NG_PAGES[path];
-    if ( !currentPage && /\/index$/.test(path) ) {
-      // Strip off index from the end
-      path = path.substr(0, path.length - 6);
-    }
+    $scope.partialPath = 'partials/' + path + '.html';
 
     currentPage = $scope.currentPage = NG_PAGES[path];
 
     if ( currentPage ) {
-      $scope.currentArea = currentPage && NG_NAVIGATION[currentPage.area];
+      $scope.currentArea = NG_NAVIGATION[currentPage.area];
       var pathParts = currentPage.path.split('/');
       var breadcrumb = $scope.breadcrumb = [];
       var breadcrumbPath = '';
@@ -107,24 +59,12 @@ angular.module('DocsController', [])
 
   $scope.versionNumber = angular.version.full;
   $scope.version = angular.version.full + "  " + angular.version.codeName;
-  $scope.subpage = false;
-  $scope.offlineEnabled = ($cookies[OFFLINE_COOKIE_NAME] == angular.version.full);
-  $scope.futurePartialTitle = null;
   $scope.loading = 0;
-  $scope.$cookies = $cookies;
 
-  $cookies.platformPreference = $cookies.platformPreference || 'gitUnix';
 
+  var INDEX_PATH = /^(\/|\/index[^\.]*.html)$/;
   if (!$location.path() || INDEX_PATH.test($location.path())) {
     $location.path('/api').replace();
   }
 
-  // bind escape to hash reset callback
-  angular.element(window).on('keydown', function(e) {
-    if (e.keyCode === 27) {
-      $scope.$apply(function() {
-        $scope.subpage = false;
-      });
-    }
-  });
 }]);