am 5fe1b387: am 812d3d47: am 08032409: Add basic support for rendering dynamic content on pages.

* commit '5fe1b387aace96990723c16e3e23a27b166483c5': Add basic support for rendering dynamic content on pages.
2014-04-03 02:11:16 +00:00
parent b3f2dac1e0 5fe1b387aa
commit 31bfe8385f
10 changed files with 2380 additions and 199 deletions
--- a/tools/droiddoc/templates-sdk-dyn/assets/css/default.css
+++ b/tools/droiddoc/templates-sdk-dyn/assets/css/default.css
--- a/tools/droiddoc/templates-sdk-dyn/assets/images/breadcrumb.png
+++ b/tools/droiddoc/templates-sdk-dyn/assets/images/breadcrumb.png
--- a/tools/droiddoc/templates-sdk-dyn/assets/images/link-out.png
+++ b/tools/droiddoc/templates-sdk-dyn/assets/images/link-out.png
--- a/tools/droiddoc/templates-sdk-dyn/assets/images/resource-card-default-android.jpg
+++ b/tools/droiddoc/templates-sdk-dyn/assets/images/resource-card-default-android.jpg
--- a/tools/droiddoc/templates-sdk-dyn/assets/images/stack-arrow-right.png
+++ b/tools/droiddoc/templates-sdk-dyn/assets/images/stack-arrow-right.png
--- a/tools/droiddoc/templates-sdk-dyn/assets/js/docs.js
+++ b/tools/droiddoc/templates-sdk-dyn/assets/js/docs.js
@@ -167,10 +167,12 @@ $(document).ready(function() {
  // highlight Design tab
  if ($("body").hasClass("design")) {
    $("#header li.design a").addClass("selected");
+    $("#sticky-header").addClass("design");

  // highlight Develop tab
  } else if ($("body").hasClass("develop") || $("body").hasClass("google")) {
    $("#header li.develop a").addClass("selected");
+    $("#sticky-header").addClass("develop");
    // In Develop docs, also highlight appropriate sub-tab
    var rootDir = pagePathOriginal.substring(1,pagePathOriginal.indexOf('/', 1));
    if (rootDir == "training") {
@@ -195,8 +197,26 @@ $(document).ready(function() {
  // highlight Distribute tab
  } else if ($("body").hasClass("distribute")) {
    $("#header li.distribute a").addClass("selected");
-  }
+    $("#sticky-header").addClass("distribute");

+    var baseFrag = pagePathOriginal.indexOf('/', 1) + 1;
+    var secondFrag = pagePathOriginal.substring(baseFrag, pagePathOriginal.indexOf('/', baseFrag));
+    if (secondFrag == "users") {
+      $("#nav-x li.users a").addClass("selected");
+    } else if (secondFrag == "engage") {
+      $("#nav-x li.engage a").addClass("selected");
+    } else if (secondFrag == "monetize") {
+      $("#nav-x li.monetize a").addClass("selected");
+    } else if (secondFrag == "tools") {
+      $("#nav-x li.disttools a").addClass("selected");
+    } else if (secondFrag == "stories") {
+      $("#nav-x li.stories a").addClass("selected");
+    } else if (secondFrag == "essentials") {
+      $("#nav-x li.essentials a").addClass("selected");
+    } else if (secondFrag == "googleplay") {
+      $("#nav-x li.googleplay a").addClass("selected");
+    }
+  }
  // set global variable so we can highlight the sidenav a bit later (such as for google reference)
  // and highlight the sidenav
  mPagePath = pagePath;
@@ -906,6 +926,86 @@ function writeCookie(cookie, val, section, expiration) {



+/* 
+ * Displays sticky nav bar on pages when dac header scrolls out of view 
+ */
+
+(function() {
+  $(document).ready(function() {
+
+    // Sticky nav position
+    var stickyTop = $('#header-wrapper').outerHeight();
+    var sticky = false;
+    var hiding = false;
+    var $stickyEl = $('#sticky-header');
+    var $menuEl = $('.menu-container');
+    //var scrollThrottle = -1;
+    var lastScroll = 0;
+    var autoScrolling = false;
+
+    $(window).scroll(function() {
+      var top = $(window).scrollTop();
+
+      if (sticky && top < stickyTop) {
+        sticky = false;
+        hiding = true;
+        $stickyEl.css({'opacity': 0});
+        setTimeout(function() {
+          $menuEl.removeClass('sticky-menu');
+          $stickyEl.hide();
+          hiding = false;
+        }, 250);
+      } else if (!sticky && top >= stickyTop) {
+        sticky = true;
+        $stickyEl.show();
+        $menuEl.addClass('sticky-menu');
+
+        setTimeout(function() {
+          $stickyEl.css({'opacity': 1});
+        }, 10);
+
+        // If its a jump then make sure to modify the scroll because of the
+        // sticky nav
+        if (!autoScrolling && Math.abs(top - lastScroll > 100)) {
+          autoScrolling = true;
+          $('body,html').animate({scrollTop:(top = top - 60)}, '250', 'swing', function() { autoScrolling = false; });
+        }
+      } else if (hiding && top < 15) {
+        $menuEl.removeClass('sticky-menu');
+        $stickyEl.hide();
+        hiding = false;
+      }
+
+      lastScroll = top;
+    });
+
+    // Stack hover states
+    $('.section-card-menu').each(function(index, el) {
+      var height = $(el).height();
+      $(el).css({height:height+'px', position:'relative'});
+      var $cardInfo = $(el).find('.card-info');
+
+      $cardInfo.css({position: 'absolute', bottom:'0px', left:'0px', right:'0px', overflow:'visible'});
+    });
+
+    // Auto scroll anchors and account for sticky nav
+    $('a[href^=#]').click(function(e){
+      e.preventDefault();
+      var tmp = $.attr(this, 'href').substr(1);
+      var el = document.getElementById(tmp) ||
+        ((tmp = document.getElementsByName(tmp)).length ?
+          tmp[0] : null);
+
+      if (el) {
+        var top = $(el).offset().top - 60;
+        autoScrolling = true;
+        $('body,html').animate({scrollTop:top}, '500', 'swing', function() { autoScrolling = false; });
+      }
+    });
+
+  });
+
+})();



@@ -1724,6 +1824,7 @@ function search_changed(e, kd, toroot)
            $('.suggest-card').hide();
            if ($("#searchResults").is(":hidden") && (search.value != "")) {
              // if results aren't showing (and text not empty), return true to allow search to execute
+              $('body,html').animate({scrollTop:0}, '500', 'swing', function() { autoScrolling = false; });
              return true;
            } else {
              // otherwise, results are already showing, so allow ajax to auto refresh the results
@@ -3233,3 +3334,603 @@ function showSamples() {
  $("#samples").append($ul);

 }
+
+
+
+/* ########################################################## */
+/* ###################  RESOURCE CARDS  ##################### */
+/* ########################################################## */
+
+/** Handle resource queries, collections, and grids (sections). Requires
+    jd_tag_helpers.js and the *_unified_data.js to be loaded. */
+
+(function() {
+  // Prevent the same resource from being loaded more than once per page.
+  var addedPageResources = {};
+
+  $(document).ready(function() {
+    $('.resource-widget').each(function() {
+      initResourceWidget(this);
+    });
+
+    // Might remove this, but adds ellipsis to card descriptions rather
+    // than just cutting them off, not sure if it performs well
+    $('.card-info .text').ellipsis();
+  });
+
+  /*
+    Three types of resource layouts:
+    Flow - Uses a fixed row-height flow using float left style.
+    Carousel - Single card slideshow all same dimension absoute.
+    Stack - Uses fixed columns and flexible element height.
+  */
+  function initResourceWidget(widget) {
+    var $widget = $(widget);
+    var isFlow = $widget.hasClass('resource-flow-layout'),
+        isCarousel = $widget.hasClass('resource-carousel-layout'),
+        isStack = $widget.hasClass('resource-stack-layout');
+
+    // find size of widget by pulling out its class name
+    var sizeCols = 1;
+    var m = $widget.get(0).className.match(/\bcol-(\d+)\b/);
+    if (m) {
+      sizeCols = parseInt(m[1], 10);
+    }
+
+    var opts = {
+      cardSizes: ($widget.data('cardsizes') || '').split(','),
+      maxResults: parseInt($widget.data('maxresults') || '100', 10),
+      itemsPerPage: $widget.data('itemsperpage'),
+      sortOrder: $widget.data('sortorder'),
+      query: $widget.data('query'),
+      section: $widget.data('section'),
+      sizeCols: sizeCols
+    };
+
+    // run the search for the set of resources to show
+
+    var resources = buildResourceList(opts);
+
+    if (isFlow) {
+      drawResourcesFlowWidget($widget, opts, resources);
+    } else if (isCarousel) {
+      drawResourcesCarouselWidget($widget, opts, resources);
+    } else if (isStack) {
+      var sections = buildSectionList(opts);
+      opts['numStacks'] = $widget.data('numstacks');
+      drawResourcesStackWidget($widget, opts, resources, sections);
+    }
+  }
+
+  /* Initializes a Resource Carousel Widget */
+  function drawResourcesCarouselWidget($widget, opts, resources) {
+    $widget.empty();
+
+    $widget.addClass('resource-card slideshow-container')
+      .append($('<a>').addClass('slideshow-prev').text('Prev'))
+      .append($('<a>').addClass('slideshow-next').text('Next'));
+
+    var css = { 'width': $widget.width() + 'px',
+                'height': $widget.height() + 'px' };
+
+    var $ul = $('<ul>');
+
+    for (var i = 0; i < resources.length; ++i) {
+      //keep url clean for matching and offline mode handling
+      var urlPrefix = resources[i].url.indexOf("//") > -1 ? "" : toRoot;
+      var $card = $('<a>')
+        .attr('href', urlPrefix + resources[i].url)
+        .decorateResourceCard(resources[i]);
+
+      $('<li>').css(css)
+          .append($card)
+          .appendTo($ul);
+    }
+
+    $('<div>').addClass('frame')
+      .append($ul)
+      .appendTo($widget);
+
+    $widget.dacSlideshow({
+      auto: true,
+      btnPrev: '.slideshow-prev',
+      btnNext: '.slideshow-next'
+    });
+  };
+
+  /* Initializes a Resource Card Stack Widget (column-based layout) */
+  function drawResourcesStackWidget($widget, opts, resources, sections) {
+    // Don't empty widget, grab all items inside since they will be the first
+    // items stacked, followed by the resource query
+
+    var cards = $widget.find('.resource-card').detach().toArray();
+    var numStacks = opts.numStacks || 1;
+    var $stacks = [];
+    var urlString;
+
+    for (var i = 0; i < numStacks; ++i) {
+      $stacks[i] = $('<div>').addClass('resource-card-stack')
+          .appendTo($widget);
+    }
+
+    var sectionResources = [];
+
+    // Extract any subsections that are actually resource cards
+    for (var i = 0; i < sections.length; ++i) {
+      if (!sections[i].sections || !sections[i].sections.length) {
+        //keep url clean for matching and offline mode handling
+        urlPrefix = sections[i].url.indexOf("//") > -1 ? "" : toRoot;
+        // Render it as a resource card
+
+        sectionResources.push(
+          $('<a>')
+            .addClass('resource-card section-card')
+            .attr('href', urlPrefix + sections[i].resource.url)
+            .decorateResourceCard(sections[i].resource)[0]
+        );
+
+      } else {
+        cards.push(
+          $('<div>')
+            .addClass('resource-card section-card-menu')
+            .decorateResourceSection(sections[i])[0]
+        );
+      }
+    }
+
+    cards = cards.concat(sectionResources);
+
+    for (var i = 0; i < resources.length; ++i) {
+      //keep url clean for matching and offline mode handling
+      urlPrefix = resources[i].url.indexOf("//") > -1 ? "" : toRoot;
+      var $card = $('<a>')
+          .addClass('resource-card related-card')
+          .attr('href', urlPrefix + resources[i].url)
+          .decorateResourceCard(resources[i]);
+
+      cards.push($card[0]);
+    }
+
+    for (var i = 0; i < cards.length; ++i) {
+      // Find the stack with the shortest height, but give preference to
+      // left to right order.
+      var minHeight = $stacks[0].height();
+      var minIndex = 0;
+
+      for (var j = 1; j < numStacks; ++j) {
+        var height = $stacks[j].height();
+        if (height < minHeight - 45) {
+          minHeight = height;
+          minIndex = j;
+        }
+      }
+
+      $stacks[minIndex].append($(cards[i]));
+    }
+
+  };
+
+  /* Initializes a flow widget, see distribute.scss for generating accompanying css */
+  function drawResourcesFlowWidget($widget, opts, resources) {
+    $widget.empty();
+    var cardSizes = opts.cardSizes || ['6x6'];
+    var i = 0, j = 0;
+
+    while (i < resources.length) {
+      var cardSize = cardSizes[j++ % cardSizes.length];
+      cardSize = cardSize.replace(/^\s+|\s+$/,'');
+
+      // A stack has a third dimension which is the number of stacked items
+      var isStack = cardSize.match(/(\d+)x(\d+)x(\d+)/);
+      var stackCount = 0;
+      var $stackDiv = null;
+
+      if (isStack) {
+        // Create a stack container which should have the dimensions defined
+        // by the product of the items inside.
+        $stackDiv = $('<div>').addClass('resource-card-stack resource-card-' + isStack[1]
+            + 'x' + isStack[2] * isStack[3]) .appendTo($widget);
+      }
+
+      // Build each stack item or just a single item
+      do {
+        var resource = resources[i];
+        //keep url clean for matching and offline mode handling
+        urlPrefix = resource.url.indexOf("//") > -1 ? "" : toRoot;
+        var $card = $('<a>')
+            .addClass('resource-card resource-card-' + cardSize + ' resource-card-' + resource.type)
+            .attr('href', urlPrefix + resource.url);
+
+        if (isStack) {
+          $card.addClass('resource-card-' + isStack[1] + 'x' + isStack[2]);
+          if (++stackCount == parseInt(isStack[3])) {
+            $card.addClass('resource-card-row-stack-last');
+            stackCount = 0;
+          }
+        } else {
+          stackCount = 0;
+        }
+
+        $card.decorateResourceCard(resource)
+          .appendTo($stackDiv || $widget);
+
+      } while (++i < resources.length && stackCount > 0);
+    }
+  }
+
+  /* Build a site map of resources using a section as a root. */
+  function buildSectionList(opts) {
+    if (opts.section && SECTION_BY_ID[opts.section]) {
+      return SECTION_BY_ID[opts.section].sections || [];
+    }
+    return [];
+  }
+
+  function buildResourceList(opts) {
+    var maxResults = opts.maxResults || 100;
+
+    var query = opts.query || '';
+    var expressions = parseResourceQuery(query);
+    var addedResourceIndices = {};
+    var results = [];
+
+    for (var i = 0; i < expressions.length; i++) {
+      var clauses = expressions[i];
+
+      // build initial set of resources from first clause
+      var firstClause = clauses[0];
+      var resources = [];
+      switch (firstClause.attr) {
+        case 'type':
+          resources = ALL_RESOURCES_BY_TYPE[firstClause.value];
+          break;
+        case 'lang':
+          resources = ALL_RESOURCES_BY_LANG[firstClause.value];
+          break;
+        case 'tag':
+          resources = ALL_RESOURCES_BY_TAG[firstClause.value];
+          break;
+        case 'collection':
+          var urls = RESOURCE_COLLECTIONS[firstClause.value].resources || [];
+          resources = urls.map(function(url){ return ALL_RESOURCES_BY_URL[url]; });
+          break;
+        case 'section':
+          var urls = SITE_MAP[firstClause.value].sections || [];
+          resources = urls.map(function(url){ return ALL_RESOURCES_BY_URL[url]; });
+          break;
+      }
+      //console.log(firstClause.attr + ':' + firstClause.value);
+      resources = resources || [];
+
+      // use additional clauses to filter corpus
+      if (clauses.length > 1) {
+        var otherClauses = clauses.slice(1);
+        resources = resources.filter(getResourceMatchesClausesFilter(otherClauses));
+      }
+
+      // filter out resources already added
+      if (i > 1) {
+        resources = resources.filter(getResourceNotAlreadyAddedFilter(addedResourceIndices));
+      }
+
+      // add to list of already added indices
+      for (var j = 0; j < resources.length; j++) {
+        console.log(resources[j].title);
+        addedResourceIndices[resources[j].index] = 1;
+      }
+
+      // concat to final results list
+      results = results.concat(resources);
+    }
+
+    if (opts.sortOrder && results.length) {
+      var attr = opts.sortOrder;
+
+      if (opts.sortOrder == 'random') {
+        var i = results.length, j, temp;
+        while (--i) {
+          j = Math.floor(Math.random() * (i + 1));
+          temp = results[i];
+          results[i] = results[j];
+          results[j] = temp;
+        }
+      } else {
+        var desc = attr.charAt(0) == '-';
+        if (desc) {
+          attr = attr.substring(1);
+        }
+        results = results.sort(function(x,y) {
+          return (desc ? -1 : 1) * (parseInt(x[attr], 10) - parseInt(y[attr], 10));
+        });
+      }
+    }
+
+    results = results.filter(getResourceNotAlreadyAddedFilter(addedPageResources));
+    results = results.slice(0, maxResults);
+
+    for (var j = 0; j < results.length; ++j) {
+      addedPageResources[results[j].index] = 1;
+    }
+
+    return results;
+  }
+
+
+  function getResourceNotAlreadyAddedFilter(addedResourceIndices) {
+    return function(resource) {
+      return !addedResourceIndices[resource.index];
+    };
+  }
+
+
+  function getResourceMatchesClausesFilter(clauses) {
+    return function(resource) {
+      return doesResourceMatchClauses(resource, clauses);
+    };
+  }
+
+
+  function doesResourceMatchClauses(resource, clauses) {
+    for (var i = 0; i < clauses.length; i++) {
+      var map;
+      switch (clauses[i].attr) {
+        case 'type':
+          map = IS_RESOURCE_OF_TYPE[clauses[i].value];
+          break;
+        case 'lang':
+          map = IS_RESOURCE_IN_LANG[clauses[i].value];
+          break;
+        case 'tag':
+          map = IS_RESOURCE_TAGGED[clauses[i].value];
+          break;
+      }
+
+      if (!map || (!!clauses[i].negative ? map[resource.index] : !map[resource.index])) {
+        return clauses[i].negative;
+      }
+    }
+    return true;
+  }
+
+
+  function parseResourceQuery(query) {
+    // Parse query into array of expressions (expression e.g. 'tag:foo + type:video')
+    var expressions = [];
+    var expressionStrs = query.split(',') || [];
+    for (var i = 0; i < expressionStrs.length; i++) {
+      var expr = expressionStrs[i] || '';
+
+      // Break expression into clauses (clause e.g. 'tag:foo')
+      var clauses = [];
+      var clauseStrs = expr.split(/(?=[\+\-])/);
+      for (var j = 0; j < clauseStrs.length; j++) {
+        var clauseStr = clauseStrs[j] || '';
+
+        // Get attribute and value from clause (e.g. attribute='tag', value='foo')
+        var parts = clauseStr.split(':');
+        var clause = {};
+
+        clause.attr = parts[0].replace(/^\s+|\s+$/g,'');
+        if (clause.attr) {
+          if (clause.attr.charAt(0) == '+') {
+            clause.attr = clause.attr.substring(1);
+          } else if (clause.attr.charAt(0) == '-') {
+            clause.negative = true;
+            clause.attr = clause.attr.substring(1);
+          }
+        }
+
+        if (parts.length > 1) {
+          clause.value = parts[1].replace(/^\s+|\s+$/g,'');
+        }
+
+        clauses.push(clause);
+      }
+
+      if (!clauses.length) {
+        continue;
+      }
+
+      expressions.push(clauses);
+    }
+
+    return expressions;
+  }
+})();
+
+(function($) {
+  /* Simple jquery function to create dom for a standard resource card */
+  $.fn.decorateResourceCard = function(resource) {
+    var section = resource.group || resource.type;
+    var imgUrl;
+    if (resource.image) {
+      //keep url clean for matching and offline mode handling
+      var urlPrefix = resource.image.indexOf("//") > -1 ? "" : toRoot;
+      imgUrl = urlPrefix + resource.image;
+    }
+
+    $('<div>')
+        .addClass('card-bg')
+        .css('background-image', 'url(' + (imgUrl || toRoot + 'assets/images/resource-card-default-android.jpg') + ')')
+      .appendTo(this);
+
+    $('<div>').addClass('card-info' + (!resource.summary ? ' empty-desc' : ''))
+        .append($('<div>').addClass('section').text(section))
+        .append($('<div>').addClass('title').html(resource.title))
+        .append($('<div>').addClass('description')
+          .append($('<div>').addClass('text').html(resource.summary))
+          .append($('<div>').addClass('util')
+            .append($('<div>').addClass('g-plusone')
+              .attr('data-size', 'small')
+              .attr('data-align', 'right')
+              .attr('data-href', resource.url))))
+      .appendTo(this);
+
+    return this;
+  };
+
+  /* Simple jquery function to create dom for a resource section card (menu) */
+  $.fn.decorateResourceSection = function(section) {
+    var resource = section.resource;
+    //keep url clean for matching and offline mode handling
+    var urlPrefix = resource.image.indexOf("//") > -1 ? "" : toRoot;
+    var $base = $('<a>')
+        .addClass('card-bg')
+        .attr('href', resource.url)
+        .append($('<div>').addClass('card-section-icon')
+          .append($('<div>').addClass('icon'))
+          .append($('<div>').addClass('section').html(resource.title)))
+      .appendTo(this);
+
+    var $cardInfo = $('<div>').addClass('card-info').appendTo(this);
+
+    if (section.sections && section.sections.length) {
+      // Recurse the section sub-tree to find a resource image.
+      var stack = [section];
+
+      while (stack.length) {
+        if (stack[0].resource.image) {
+          $base.css('background-image', 'url(' + urlPrefix + stack[0].resource.image + ')');
+          break;
+        }
+
+        if (stack[0].sections) {
+          stack = stack.concat(stack[0].sections);
+        }
+
+        stack.shift();
+      }
+
+      var $ul = $('<ul>')
+        .appendTo($cardInfo);
+
+      var max = section.sections.length > 3 ? 3 : section.sections.length;
+
+      for (var i = 0; i < max; ++i) {
+
+        var subResource = section.sections[i];
+        $('<li>')
+          .append($('<a>').attr('href', subResource.url)
+            .append($('<div>').addClass('title').html(subResource.title))
+            .append($('<div>').addClass('description')
+              .append($('<div>').addClass('text').html(subResource.summary))
+              .append($('<div>').addClass('util')
+                .append($('<div>').addClass('g-plusone')
+                  .attr('data-size', 'small')
+                  .attr('data-align', 'right')
+                  .attr('data-href', resource.url)))))
+        .appendTo($ul);
+      }
+
+      // Add a more row
+      if (max < section.sections.length) {
+        $('<li>')
+          .append($('<a>').attr('href', resource.url)
+            .append($('<div>')
+              .addClass('title')
+              .text('More')))
+        .appendTo($ul);
+      }
+    } else {
+      // No sub-resources, just render description?
+    }
+
+    return this;
+  };
+})(jQuery);
+
+
+(function($) {
+    $.fn.ellipsis = function(options) {
+
+        // default option
+        var defaults = {
+            'row' : 1, // show rows
+            'onlyFullWords': true, // set to true to avoid cutting the text in the middle of a word
+            'char' : '...', // ellipsis
+            'callback': function() {},
+            'position': 'tail' // middle, tail
+        };
+
+        options = $.extend(defaults, options);
+
+        this.each(function() {
+            // get element text
+            var $this = $(this);
+
+            var targetHeight = $this.height();
+            $this.css({'height': 'auto'});
+            var text = $this.text();
+            var origText = text;
+            var origLength = origText.length;
+            var origHeight = $this.height();
+
+            if (origHeight <= targetHeight) {
+                $this.text(text);
+                options.callback.call(this);
+                return;
+            }
+
+            var start = 1, length = 0;
+            var end = text.length;
+
+            if(options.position === 'tail') {
+                while (start < end) { // Binary search for max length
+                    length = Math.ceil((start + end) / 2);
+
+                    $this.text(text.slice(0, length) + options['char']);
+
+                    if ($this.height() <= targetHeight) {
+                        start = length;
+                    } else {
+                        end = length - 1;
+                    }
+                }
+
+                text = text.slice(0, start);
+
+                if (options.onlyFullWords) {
+                    // remove fragment of the last word together with possible soft-hyphen chars
+                    text = text.replace(/[\u00AD\w\uac00-\ud7af]+$/, '');
+                }
+                text += options['char'];
+
+            }else if(options.position === 'middle') {
+
+                var sliceLength = 0;
+                while (start < end) { // Binary search for max length
+                    length = Math.ceil((start + end) / 2);
+                    sliceLength = Math.max(origLength - length, 0);
+
+                    $this.text(
+                        origText.slice(0, Math.floor((origLength - sliceLength) / 2)) +
+                               options['char'] +
+                               origText.slice(Math.floor((origLength + sliceLength) / 2), origLength)
+                    );
+
+                    if ($this.height() <= targetHeight) {
+                        start = length;
+                    } else {
+                        end = length - 1;
+                    }
+                }
+
+                sliceLength = Math.max(origLength - start, 0);
+                var head = origText.slice(0, Math.floor((origLength - sliceLength) / 2));
+                var tail = origText.slice(Math.floor((origLength + sliceLength) / 2), origLength);
+
+                if (options.onlyFullWords) {
+                    // remove fragment of the last or first word together with possible soft-hyphen characters
+                    head = head.replace(/[\u00AD\w\uac00-\ud7af]+$/, '');
+                }
+
+                text = head + options['char'] + tail;
+            }
+
+            $this.text(text);
+            options.callback.call(this);
+        });
+
+        return this;
+    };
+}) (jQuery);
--- a/tools/droiddoc/templates-sdk-dyn/components/masthead.cs
+++ b/tools/droiddoc/templates-sdk-dyn/components/masthead.cs
@@ -1,7 +1,7 @@
 <?cs def:custom_masthead() ?>
 <a name="top"></a>
-<?cs if:!devsite ?><?cs # leave out the global header for devsite; it's in devsite template ?>
-    <!-- Header -->
+<?cs if:!devsite ?><?cs # leave out the global header for devsite; it is in devsite template ?>
+    <!-- Header --><div id="header-wrapper">
    <div id="header">
        <div class="wrap" id="header-wrap">
          <div class="col-3 logo">
@@ -31,7 +31,8 @@
                  ja-lang="開発"
                  es-lang="Desarrollar"               
                  >Develop</a></li>
-                <li class="distribute last"><a href="<?cs var:toroot ?>distribute/index.html"
+                <li class="distribute last"><a href="<?cs var:toroot ?>distribute/<?cs
+                  if:android.whichdoc == "offline" ?>googleplay/<?cs /if ?>index.html"
                  zh-tw-lang="發佈"
                  zh-cn-lang="分发"
                  ru-lang="Распространение"
@@ -51,7 +52,7 @@
    <div class="mid">
      <div class="header">Links</div>
      <ul>
-        <li><a href="https://play.google.com/apps/publish/">Google Play Developer Console</a></li>
+        <li><a href="https://play.google.com/apps/publish/" target="_googleplay">Google Play Developer Console</a></li>
        <li><a href="http://android-developers.blogspot.com/">Android Developers Blog</a></li>
        <li><a href="<?cs var:toroot ?>about/index.html">About Android</a></li>
      </ul>
@@ -139,87 +140,79 @@ onkeyup="return search_changed(event, false, '<?cs var:toroot ?>')" />
  <!-- /New Search>
          
          
-          <!-- Expanded quicknav -->
-           <div id="quicknav" class="col-9">
-                <ul>
-                    <li class="design">
-                      <ul>
-                        <li><a href="<?cs var:toroot ?>design/index.html">Get Started</a></li>
-                        <li><a href="<?cs var:toroot ?>design/style/index.html">Style</a></li>
-                        <li><a href="<?cs var:toroot ?>design/patterns/index.html">Patterns</a></li>
-                        <li><a href="<?cs var:toroot ?>design/building-blocks/index.html">Building Blocks</a></li>
-                        <li><a href="<?cs var:toroot ?>design/downloads/index.html">Downloads</a></li>
-                        <li><a href="<?cs var:toroot ?>design/videos/index.html">Videos</a></li>
-                      </ul>
-                    </li>
-                    <li class="develop">
-                      <ul>
-                        <li><a href="<?cs var:toroot ?>training/index.html"
-                          zh-tw-lang="訓練課程"
-                          zh-cn-lang="培训"
-                          ru-lang="Курсы"
-                          ko-lang="교육"
-                          ja-lang="トレーニング"
-                          es-lang="Capacitación"               
-                          >Training</a></li>
-                        <li><a href="<?cs var:toroot ?>guide/index.html"
-                          zh-tw-lang="API 指南"
-                          zh-cn-lang="API 指南"
-                          ru-lang="Руководства по API"
-                          ko-lang="API 가이드"
-                          ja-lang="API ガイド"
-                          es-lang="Guías de la API"               
-                          >API Guides</a></li>
-                        <li><a href="<?cs var:toroot ?>reference/packages.html"
-                          zh-tw-lang="參考資源"
-                          zh-cn-lang="参考"
-                          ru-lang="Справочник"
-                          ko-lang="참조문서"
-                          ja-lang="リファレンス"
-                          es-lang="Referencia"               
-                          >Reference</a></li>
-                        <li><a href="<?cs var:toroot ?>tools/index.html"
-                          zh-tw-lang="相關工具"
-                          zh-cn-lang="工具"
-                          ru-lang="Инструменты"
-                          ko-lang="도구"
-                          ja-lang="ツール"
-                          es-lang="Herramientas"               
-                          >Tools</a>
-                          <ul><li><a href="<?cs var:toroot ?>sdk/index.html">Get the SDK</a></li></ul>
-                        </li>
-                        <li><a href="<?cs var:toroot ?>google/index.html">Google Services</a>
-                        </li>
-                        <?cs if:android.hasSamples ?>
-                          <li><a href="<?cs var:toroot ?>samples/index.html">Samples</a>
-                          </li>
-                        <?cs /if ?>
-                      </ul>
-                    </li>
-                    <li class="distribute last">
-                      <ul>
-                        <li><a href="<?cs var:toroot ?>distribute/index.html">Google Play</a></li>
-                        <li><a href="<?cs var:toroot ?>distribute/googleplay/publish/index.html">Publishing</a></li>
-                        <li><a href="<?cs var:toroot ?>distribute/googleplay/promote/index.html">Promoting</a></li>
-                        <li><a href="<?cs var:toroot ?>distribute/googleplay/quality/index.html">App Quality</a></li>
-                        <li><a href="<?cs var:toroot ?>distribute/googleplay/spotlight/index.html">Spotlight</a></li>
-                        <li><a href="<?cs var:toroot ?>distribute/open.html">Open Distribution</a></li>
-                      </ul>
-                    </li>
-                </ul>
-          </div>
-          <!-- /Expanded quicknav -->
+     <!-- Expanded quicknav -->
+     <div id="quicknav" class="col-9">
+      <ul>
+          <li class="design">
+            <ul>
+              <li><a href="<?cs var:toroot ?>design/index.html">Get Started</a></li>
+              <li><a href="<?cs var:toroot ?>design/style/index.html">Style</a></li>
+              <li><a href="<?cs var:toroot ?>design/patterns/index.html">Patterns</a></li>
+              <li><a href="<?cs var:toroot ?>design/building-blocks/index.html">Building Blocks</a></li>
+              <li><a href="<?cs var:toroot ?>design/downloads/index.html">Downloads</a></li>
+              <li><a href="<?cs var:toroot ?>design/videos/index.html">Videos</a></li>
+            </ul>
+          </li>
+          <li class="develop">
+            <ul>
+              <li><a href="<?cs var:toroot ?>training/index.html"
+                zh-tw-lang="訓練課程"
+                zh-cn-lang="培训"
+                ru-lang="Курсы"
+                ko-lang="교육"
+                ja-lang="トレーニング"
+                es-lang="Capacitación"
+                >Training</a></li>
+              <li><a href="<?cs var:toroot ?>guide/index.html"
+                zh-tw-lang="API 指南"
+                zh-cn-lang="API 指南"
+                ru-lang="Руководства по API"
+                ko-lang="API 가이드"
+                ja-lang="API ガイド"
+                es-lang="Guías de la API"
+                >API Guides</a></li>
+              <li><a href="<?cs var:toroot ?>reference/packages.html"
+                zh-tw-lang="參考資源"
+                zh-cn-lang="参考"
+                ru-lang="Справочник"
+                ko-lang="참조문서"
+                ja-lang="リファレンス"
+                es-lang="Referencia"
+                >Reference</a></li>
+              <li><a href="<?cs var:toroot ?>tools/index.html"
+                zh-tw-lang="相關工具"
+                zh-cn-lang="工具"
+                ru-lang="Инструменты"
+                ko-lang="도구"
+                ja-lang="ツール"
+                es-lang="Herramientas"
+                >Tools</a>
+                <ul><li><a href="<?cs var:toroot ?>sdk/index.html">Get the SDK</a></li></ul>
+              </li>
+              <li><a href="<?cs var:toroot ?>google/index.html">Google Services</a>
+              </li>
+              <?cs if:android.hasSamples ?>
+                <li><a href="<?cs var:toroot ?>samples/index.html">Samples</a>
+                </li>
+              <?cs /if ?>
+            </ul>
+          </li>
+          <li class="distribute last">
+            <ul>
+              <li><a href="<?cs var:toroot ?>distribute/googleplay/index.html">Google Play</a></li>
+              <li><a href="<?cs var:toroot ?>distribute/essentials/index.html">Essentials</a></li>
+              <li><a href="<?cs var:toroot ?>distribute/users/index.html">Get Users</a></li>
+              <li><a href="<?cs var:toroot ?>distribute/engage/index.html">Engage &amp; Retain</a></li>
+              <li><a href="<?cs var:toroot ?>distribute/monetize/index.html">Monetize</a></li>
+              <li><a href="<?cs var:toroot ?>distribute/stories/index.html">Developer Stories</a></li>
+            </ul>
+          </li>
+      </ul>
+    </div><!-- /Expanded quicknav -->
+
        </div>
-    </div>
-    <!-- /Header -->
-    
-    
-  <div id="searchResults" class="wrap" style="display:none;">
-          <h2 id="searchTitle">Results</h2>
-          <div id="leftSearchControl" class="search-control">Loading...</div>
-  </div>
-    
-    
+    </div><!-- /Header -->
+
  <?cs if:training || guide || reference || tools || develop || google || samples ?>
    <!-- Secondary x-nav -->
    <div id="nav-x">
@@ -270,10 +263,71 @@ onkeyup="return search_changed(event, false, '<?cs var:toroot ?>')" />
        
    </div>
    <!-- /Sendondary x-nav -->
+
+  <?cs elif:distribute || googleplay || essentials || users || engage || monetize || disttools || stories ?>
+    <!-- Secondary distribute x-nav -->
+    <div id="nav-x">
+        <div class="wrap">
+            <ul class="nav-x distribute">
+                <li class="googleplay"><a href="<?cs var:toroot ?>distribute/googleplay/index.html"
+                  >Google Play</a></li>
+                <li class="essentials"><a href="<?cs var:toroot ?>distribute/essentials/index.html"
+                  >Essentials</a></li>
+                <li class="users"><a href="<?cs var:toroot ?>distribute/users/index.html"
+                  >Get Users</a></li>
+                <li class="engage"><a href="<?cs var:toroot ?>distribute/engage/index.html"
+                  >Engage &amp; Retain</a></li>
+                <li class="monetize"><a href="<?cs var:toroot ?>distribute/monetize/index.html"
+                  >Monetize</a>
+                </li>
+                <li class="disttools"><a href="<?cs var:toroot ?>distribute/tools/index.html"
+                  >Tools</a>
+                </li>
+                <li class="stories"><a href="<?cs var:toroot ?>distribute/stories/index.html"
+                  >Stories</a>
+                </li>
+            </ul>
+            <a href="https://play.google.com/apps/publish/" class="developer-console-btn">Developer Console</a>
+        </div> <!-- /Secondary distribute x-nav -->
+    </div>
+
  <?cs /if ?>
+</div> <!--end headerwrap -->

-<?cs /if ?>
-<?cs # end if/else !devsite ?>
+<div id="sticky-header">
+  <div>
+    <a class="logo" href="/index.html"></a>
+    <a class="top" href="#top"></a>
+    <ul class="breadcrumb">
+      <?cs
+if:design ?><li class="design"><a href="<?cs var:toroot ?>design/index.html">Design</a></li><?cs
+elif:(develop || training || guide || reference || tools || sdk || google || samples) ?><li class="develop"><a href="<?cs var:toroot ?>develop/index.html">Develop</a></li><?cs
+elif:distribute ?><li class="distribute"><a href="<?cs var:toroot ?>distribute/index.html">Distribute</a></li><?cs
+elif:about ?><li class="about"><a href="<?cs var:toroot ?>about/index.html">About Android</a></li><?cs
+/if ?><?cs
+if:training ?><li><a href="<?cs var:toroot ?>training/index.html">Training</a></li><?cs
+elif:guide ?><li><a href="<?cs var:toroot ?>guide/index.html">API Guides</a></li><?cs
+elif:reference ?><li><a href="<?cs var:toroot ?>reference/index.html">Reference</a></li><?cs
+elif:tools ?><li><a href="<?cs var:toroot ?>tools/index.html">Tools</a></li><?cs
+elif:google ?><li><a href="<?cs var:toroot ?>google/index.html">Google Services</a></li><?cs
+elif:samples ?><li><a href="<?cs var:toroot ?>samples/index.html">Samples</a></li><?cs
+elif:googleplay ?><li><a href="<?cs var:toroot ?>distribute/googleplay/index.html">Google Play</a></li><?cs
+elif:essentials ?><li><a href="<?cs var:toroot ?>distribute/essentials/index.html">Essentials</a></li><?cs
+elif:users ?><li><a href="<?cs var:toroot ?>distribute/users/index.html">Get Users</a></li><?cs
+elif:engage ?><li><a href="<?cs var:toroot ?>distribute/engage/index.html">Engage &amp; Retain</a></li><?cs
+elif:monetize ?><li><a href="<?cs var:toroot ?>distribute/monetize/index.html">Monetize Your Apps</a></li><?cs
+elif:disttools ?><li><a href="<?cs var:toroot ?>distribute/tools/index.html">Tools &amp Reference</a></li><?cs
+elif:stories ?><li><a href="<?cs var:toroot ?>distribute/stories/index.html">Developer Stories</a></li><?cs
+/if ?> <?cs
+if:!section.landing ?><li class="current"><?cs var:page.title ?></li><?cs
+/if ?></ul>
+  </div>
+</div>

-  <?cs 
-/def ?>
+<div id="searchResults" class="wrap" style="display:none;">
+  <h2 id="searchTitle">Results</h2>
+  <div id="leftSearchControl" class="search-control">Loading...</div>
+</div>
+
+<?cs /if ?><?cs # end if/else !devsite ?><?cs
+/def ?>
--- a/tools/droiddoc/templates-sdk-dyn/customizations.cs
+++ b/tools/droiddoc/templates-sdk-dyn/customizations.cs
@@ -15,28 +15,12 @@ def:sdk_nav() ?>

      </div>
    </div> <!-- end side-nav -->
-<?cs /def ?>
-<?cs 
-def:resources_tab_nav() ?>
+<?cs /def ?><?cs
+
+def:no_nav() ?>
  <div class="wrap clearfix" id="body-content">
-    <a
-    <div class="col-4" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
-      <div id="devdoc-nav" class="scroll-pane">
-<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
+<?cs /def ?><?cs

-<?cs 
-        include:"../../../../frameworks/base/docs/html/resources/resources_toc.cs" ?>
-
-
-      </div>
-    </div> <!-- end side-nav -->
-    <script>
-      $(document).ready(function() {
-        scrollIntoView("devdoc-nav");
-        });
-    </script>
-<?cs /def ?>
-<?cs
 def:tools_nav() ?>
  <div class="wrap clearfix" id="body-content">
    <div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
@@ -73,8 +57,113 @@ def:training_nav() ?>
        scrollIntoView("devdoc-nav");
        });
    </script>
-<?cs /def ?>
-<?cs 
+<?cs /def ?><?cs
+
+def:googleplay_nav() ?>
+  <div class="wrap clearfix" id="body-content">
+    <div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
+      <div id="devdoc-nav" class="scroll-pane">
+<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
+<?cs include:"../../../../frameworks/base/docs/html/distribute/googleplay/googleplay_toc.cs" ?>
+      </div>
+    </div> <!-- end side-nav -->
+    <script>
+      $(document).ready(function() {
+        scrollIntoView("devdoc-nav");
+        });
+    </script>
+<?cs /def ?><?cs
+
+def:essentials_nav() ?>
+  <div class="wrap clearfix" id="body-content">
+    <div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
+      <div id="devdoc-nav" class="scroll-pane">
+<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
+<?cs include:"../../../../frameworks/base/docs/html/distribute/essentials/essentials_toc.cs" ?>
+      </div>
+    </div> <!-- end side-nav -->
+    <script>
+      $(document).ready(function() {
+        scrollIntoView("devdoc-nav");
+        });
+    </script>
+<?cs /def ?><?cs
+
+def:users_nav() ?>
+  <div class="wrap clearfix" id="body-content">
+    <div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
+      <div id="devdoc-nav" class="scroll-pane">
+<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
+<?cs include:"../../../../frameworks/base/docs/html/distribute/users/users_toc.cs" ?>
+      </div>
+    </div> <!-- end side-nav -->
+    <script>
+      $(document).ready(function() {
+        scrollIntoView("devdoc-nav");
+        });
+    </script>
+<?cs /def ?><?cs
+
+def:engage_nav() ?>
+  <div class="wrap clearfix" id="body-content">
+    <div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
+      <div id="devdoc-nav" class="scroll-pane">
+<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
+<?cs include:"../../../../frameworks/base/docs/html/distribute/engage/engage_toc.cs" ?>
+      </div>
+    </div> <!-- end side-nav -->
+    <script>
+      $(document).ready(function() {
+        scrollIntoView("devdoc-nav");
+        });
+    </script>
+<?cs /def ?><?cs
+
+def:monetize_nav() ?>
+  <div class="wrap clearfix" id="body-content">
+    <div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
+      <div id="devdoc-nav" class="scroll-pane">
+<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
+<?cs include:"../../../../frameworks/base/docs/html/distribute/monetize/monetize_toc.cs" ?>
+      </div>
+    </div> <!-- end side-nav -->
+    <script>
+      $(document).ready(function() {
+        scrollIntoView("devdoc-nav");
+        });
+    </script>
+<?cs /def ?><?cs
+
+def:disttools_nav() ?>
+  <div class="wrap clearfix" id="body-content">
+    <div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
+      <div id="devdoc-nav" class="scroll-pane">
+<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
+<?cs include:"../../../../frameworks/base/docs/html/distribute/tools/disttools_toc.cs" ?>
+      </div>
+    </div> <!-- end side-nav -->
+    <script>
+      $(document).ready(function() {
+        scrollIntoView("devdoc-nav");
+        });
+    </script>
+<?cs /def ?><?cs
+
+def:stories_nav() ?>
+  <div class="wrap clearfix" id="body-content">
+    <div class="col-3" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
+      <div id="devdoc-nav" class="scroll-pane">
+<a class="totop" href="#top" data-g-event="left-nav-top">to top</a>
+<?cs include:"../../../../frameworks/base/docs/html/distribute/stories/stories_toc.cs" ?>
+      </div>
+    </div> <!-- end side-nav -->
+    <script>
+      $(document).ready(function() {
+        scrollIntoView("devdoc-nav");
+        });
+    </script>
+<?cs /def ?><?cs
+
 def:guide_nav() ?>
  <div class="wrap clearfix" id="body-content">
    <div class="col-4" id="side-nav" itemscope itemtype="http://schema.org/SiteNavigationElement">
@@ -310,8 +399,10 @@ def:default_left_nav() ?>

 <?cs 
 def:custom_left_nav() ?><?cs
-  if:fullpage ?><?cs 
-    call:fullpage() ?><?cs 
+  if:fullpage ?><?cs
+    call:fullpage() ?><?cs
+  elif:nonavpage ?><?cs
+    call:no_nav() ?><?cs
  elif:guide ?><?cs 
    call:guide_nav() ?><?cs 
  elif:design ?><?cs
@@ -324,15 +415,29 @@ def:custom_left_nav() ?><?cs
    call:google_nav() ?><?cs 
  elif:samples ?><?cs
    call:samples_nav() ?><?cs
-  elif:more ?><?cs 
-    call:dist_more_nav() ?><?cs
  elif:distribute ?><?cs 
-    call:distribute_nav() ?><?cs 
-  elif:about ?><?cs 
-    call:about_nav() ?><?cs 
-  else ?><?cs 
-    call:default_left_nav() ?> <?cs 
-  /if ?><?cs 
+    if:googleplay ?><?cs
+      call:googleplay_nav() ?><?cs
+    elif:essentials ?><?cs
+      call:essentials_nav() ?><?cs
+    elif:users ?><?cs
+      call:users_nav() ?><?cs
+    elif:engage ?><?cs
+      call:engage_nav() ?><?cs
+    elif:monetize ?><?cs
+      call:monetize_nav() ?><?cs
+    elif:disttools ?><?cs
+      call:disttools_nav() ?><?cs
+    elif:stories ?><?cs
+      call:stories_nav() ?><?cs
+    /if ?><?cs
+  elif:about ?><?cs
+    call:about_nav() ?><?cs
+  elif:distribute ?><?cs
+    call:distribute_nav() ?><?cs
+  else ?><?cs
+    call:default_left_nav() ?> <?cs
+  /if ?><?cs
 /def ?>

 <?cs # appears at the bottom of every page ?><?cs 
--- a/tools/droiddoc/templates-sdk-dyn/docpage.cs
+++ b/tools/droiddoc/templates-sdk-dyn/docpage.cs
@@ -2,19 +2,36 @@
 <?cs include:"macros.cs" ?>
 <html<?cs if:devsite ?> devsite<?cs /if ?>>
 <?cs include:"head_tag.cs" ?>
-<body class="gc-documentation <?cs if:(google || reference.gms || reference.gcm) ?>google<?cs /if ?>
-  <?cs if:(guide||develop||training||reference||tools||sdk||samples) ?>develop<?cs if:guide ?> guide<?cs /if ?><?cs if:samples ?> samples<?cs /if ?><?cs
+<body class="gc-documentation 
+
+<?cs
+if:(google || reference.gms || reference.gcm) ?>google<?cs /if ?><?cs
+  if:(guide||develop||training||reference||tools||sdk||samples) ?>develop<?cs
+    if:guide ?> guide<?cs /if ?><?cs
+    if:samples ?> samples<?cs /if ?><?cs
+  elif:(distribute||googleplay||essentials||users||engage||monetize||disttools||stories)
+    ?>distribute<?cs
+    if:googleplay ?> googleplay<?cs /if ?><?cs
+    if:essentials ?> essentials<?cs /if ?><?cs
+    if:users ?> users<?cs /if ?><?cs
+    if:engage ?> engage<?cs /if ?><?cs
+    if:monetize ?> monetize<?cs /if ?><?cs
+    if:disttools ?> disttools<?cs /if ?><?cs
+    if:stories ?> stories<?cs /if ?><?cs
  elif:about ?>about<?cs
  elif:design ?>design<?cs
-  elif:distribute ?>distribute<?cs
-  /if ?><?cs
-  if:page.trainingcourse ?> trainingcourse<?cs /if ?>" itemscope itemtype="http://schema.org/Article">
-<?cs include:"header.cs" ?>
+/if ?><?cs
+if:page.trainingcourse ?> trainingcourse<?cs
+/if ?>" itemscope itemtype="http://schema.org/Article"><?cs
+include:"header.cs" ?>

-<div <?cs if:fullpage
-?>class="fullpage"<?cs elif:design||tools||about||sdk||distribute
-?>class="col-13" id="doc-col"<?cs else
-?>class="col-12" id="doc-col"<?cs /if ?> >
+<div <?cs
+  if:fullpage
+    ?>class="fullpage"<?cs
+  elif:design||tools||about||sdk||googleplay||essentials||users||monetize||disttools && !nonavpage
+    ?>class="col-13" id="doc-col"<?cs
+  elif:!nonavpage
+    ?>class="col-12" id="doc-col"<?cs /if ?> >

 <?cs if:(design||training||walkthru) && !page.trainingcourse && !page.article ?><?cs # header logic for docs that provide previous/next buttons ?>
  <?cs if:header.hide ?>
@@ -74,6 +91,7 @@
    <?cs /if ?><?cs # end if training ?>
  </div>
  <?cs /if ?>
+
 <?cs elif:samplesProjectIndex ?>
  <div id="api-info-block">
  <div class="sum-details-links">
@@ -83,7 +101,10 @@
  </div><!-- end sum-details-links -->
  </div><!-- end breadcurmb block -->
  <h1 itemprop="name"><?cs var:projectDir ?></h1>
+
 <?cs else ?>
+
+
  <?cs if:(!fullpage && !header.hide) ?>
    <?cs if:page.landing ?><?cs # header logic for docs that are landing pages ?>
      <div class="landing-banner">
@@ -181,8 +202,6 @@
 <?cs include:"footer.cs" ?>
 </div><!-- end doc-content -->

-<?cs include:"trailer.cs" ?>
-
 <!-- Start of Tag -->
 <script type="text/javascript">
 var axel = Math.random() + "";
@@ -193,6 +212,16 @@ document.write('<iframe src="https://2507573.fls.doubleclick.net/activityi;src=2
 <iframe src="https://2507573.fls.doubleclick.net/activityi;src=2507573;type=other026;cat=googl348;ord=1?" width="1" height="1" frameborder="0" style="display:none"></iframe>
 </noscript>
 <!-- End of Tag -->
+
+
+<?cs include:"trailer.cs" ?>
+  <script src="http://androiddevdocs-exp.appspot.com/ytblogger_lists_unified.js" type="text/javascript"></script>
+  <script src="<?cs var:toroot ?>jd_lists_unified.js" type="text/javascript"></script>
+  <script src="<?cs var:toroot ?>jd_articles.js" type="text/javascript"></script>
+  <script src="<?cs var:toroot ?>jd_collections.js" type="text/javascript"></script>
+  <script src="<?cs var:toroot ?>jd_site_map.js" type="text/javascript"></script>
+  <script src="<?cs var:toroot ?>jd_tag_helpers.js" type="text/javascript"></script>
+
 </body>
 </html>

--- a/tools/droiddoc/templates-sdk-dyn/head_tag.cs
+++ b/tools/droiddoc/templates-sdk-dyn/head_tag.cs
@@ -31,9 +31,15 @@

 <!-- STYLESHEETS -->
 <link rel="stylesheet"
-href="<?cs if:android.whichdoc != 'online' ?>http:<?cs /if ?>//fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic,bold" title="roboto">
-<link href="<?cs var:toroot ?>assets/css/default.css" rel="stylesheet" type="text/css">
+href="<?cs
+if:android.whichdoc != 'online' ?>http:<?cs
+/if ?>//fonts.googleapis.com/css?family=Roboto+Condensed">
+<link rel="stylesheet" href="<?cs
+if:android.whichdoc != 'online' ?>http:<?cs
+/if ?>//fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic,bold"
+  title="roboto">

+<link href="<?cs var:toroot ?>assets/css/default.css" rel="stylesheet" type="text/css">
 <?cs if:reference && !(reference.gms || reference.gcm) ?>
 <!-- FULLSCREEN STYLESHEET -->
 <link href="<?cs var:toroot ?>assets/css/fullscreen.css" rel="stylesheet" class="fullscreen"