HTML exit reader view button

This change removes the 'view original' link and replaces it with
a button that currently navigates to the original article but will
eventually slide the view out of focus.

The feedback form and close button now span the full width of a page
while content is limited to 800px wide.

BUG=428533

Review URL: https://codereview.chromium.org/1160113004

Cr-Commit-Position: refs/heads/master@{#333759}

PRESUBMIT.py

@@ -1481,7 +1481,8 @@ _DEPRECATED_CSS = [
 def _CheckNoDeprecatedCSS(input_api, output_api):
   """ Make sure that we don't use deprecated CSS
       properties, functions or values. Our external
-      documentation is ignored by the hooks as it
+      documentation and iOS CSS for dom distiller
+      (reader mode) are ignored by the hooks as it
       needs to be consumed by WebKit. """
   results = []
   file_inclusion_pattern = (r".+\.css$",)
@@ -1490,6 +1491,7 @@ def _CheckNoDeprecatedCSS(input_api, output_api):
                 input_api.DEFAULT_BLACK_LIST +
                 (r"^chrome/common/extensions/docs",
                  r"^chrome/docs",
+                 r"^components/dom_distiller/core/css/distilledpage_ios.css",
                  r"^native_client_sdk"))
   file_filter = lambda f: input_api.FilterSourceFile(
       f, white_list=file_inclusion_pattern, black_list=black_list)

build/ios/grit_whitelist.txt

@@ -21,6 +21,7 @@ IDR_DEFAULT_FAVICON_64
 IDR_DIR_HEADER_HTML
 IDR_DISTILLABLE_PAGE_SERIALIZED_MODEL
 IDR_DISTILLER_CSS
+IDR_DISTILLER_IOS_CSS
 IDR_DISTILLER_JS
 IDR_DOM_DISTILLER_VIEWER_HTML
 IDR_DOM_DISTILLER_VIEWER_JS
@@ -326,6 +327,7 @@ IDS_DOM_DISTILLER_JAVASCRIPT_DISABLED_CONTENT
 IDS_DOM_DISTILLER_QUALITY_ANSWER_NO
 IDS_DOM_DISTILLER_QUALITY_ANSWER_YES
 IDS_DOM_DISTILLER_QUALITY_QUESTION
+IDS_DOM_DISTILLER_VIEWER_CLOSE_READER_VIEW
 IDS_DOM_DISTILLER_VIEWER_FAILED_TO_FIND_ARTICLE_CONTENT
 IDS_DOM_DISTILLER_VIEWER_FAILED_TO_FIND_ARTICLE_TITLE
 IDS_DOM_DISTILLER_VIEWER_LOADING_STRING

components/dom_distiller/core/css/distilledpage.css

@@ -81,6 +81,7 @@ html {
 body {
   height: 100%;
   line-height: 1.4;
+  margin: 0px auto;
   text-rendering: optimizeLegibility;
   transition-property: color, background-color;
   transition-duration: 0.5s;
@@ -156,23 +157,32 @@ h6 {
 
 /* Margins for Show Original link. */
 
-#showOriginal {
-  margin: auto 1.296rem 1.296rem 5%;
+#closeReaderView {
+  background-color: #FFFFFF;
+  border-top: 1px solid #E0E0E0;
+  color: #4285F4;
+  flex: 0 0 auto;
+  font-family: 'Roboto-Medium', 'Open Sans', sans-serif;
+  font-weight: 700;
+  line-height: 14px;
+  margin-top: 24px;
+  padding: 24px 16px;
+  font-size: 14px;
+  text-align: right;
+  text-decoration: none;
+  text-transform: uppercase;
+  width: 100%;
 }
 
 #content {
   margin: 0.2rem 2.2%;
 }
 
-/* Main margins. */
-
-body {
-  max-width: 800px;
-  margin: 0px auto 0px auto;
-}
-
 #mainContent {
-  margin: auto 0px;
+  flex: 1 1 auto;
+  margin: 0px auto;
+  max-width: 800px;
+  width: 100%;
 }
 
 #articleHeader {
@@ -323,9 +333,10 @@ pre {
 
 /* Footer feedback form. */
 #contentWrap {
+  display: flex;
+  flex-flow: column;
   min-height: 100%;
   overflow: auto;
-  padding-bottom: 120px;
   position: relative;
   z-index: 1;
 }

components/dom_distiller/core/css/distilledpage_ios.css

+/* Copyright 2015 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+/* The following are iOS specific rules for rendering on WebKit instead of
+ * Blink. */
+
+#mainContent {
+  -webkit-flex: 1 1 auto;
+}
+
+#closeReaderView {
+  -webkit-flex: 0 0 auto;
+}
+
+#contentWrap {
+  -webkit-flex-flow: column;
+  display: -webkit-flex;
+}

components/dom_distiller/core/html/dom_distiller_viewer.html

@@ -28,63 +28,61 @@ found in the LICENSE file.
         </header>
         <div id="content"><noscript>$5</noscript></div>
       </article>
-    </div>
-    <div id="loadingIndicator" class="visible">
-      <div id="loader">
-        <div class="circle initial">
-          <span class="mask">
-            <span class="mover"></span>
-          </span>
-        </div>
+      <div id="loadingIndicator" class="visible">
+        <div id="loader">
+          <div class="circle initial">
+            <span class="mask">
+              <span class="mover"></span>
+            </span>
+          </div>
 
-        <div class="circle red">
-          <span class="mask first">
-            <span class="base"></span>
-            <span class="mover"></span>
-          </span>
-          <span class="mask second">
-            <span class="base"></span>
-            <span class="mover"></span>
-          </span>
-        </div>
+          <div class="circle red">
+            <span class="mask first">
+              <span class="base"></span>
+              <span class="mover"></span>
+            </span>
+            <span class="mask second">
+              <span class="base"></span>
+              <span class="mover"></span>
+            </span>
+          </div>
 
-        <div class="circle yellow">
-          <span class="mask first">
-            <span class="base"></span>
-            <span class="mover"></span>
-          </span>
-          <span class="mask second">
-            <span class="base"></span>
-            <span class="mover"></span>
-          </span>
-        </div>
+          <div class="circle yellow">
+            <span class="mask first">
+              <span class="base"></span>
+              <span class="mover"></span>
+            </span>
+            <span class="mask second">
+              <span class="base"></span>
+              <span class="mover"></span>
+            </span>
+          </div>
 
-        <div class="circle green">
-          <span class="mask first">
-            <span class="base"></span>
-            <span class="mover"></span>
-          </span>
-          <span class="mask second">
-            <span class="base"></span>
-            <span class="mover"></span>
-          </span>
-        </div>
+          <div class="circle green">
+            <span class="mask first">
+              <span class="base"></span>
+              <span class="mover"></span>
+            </span>
+            <span class="mask second">
+              <span class="base"></span>
+              <span class="mover"></span>
+            </span>
+          </div>
 
-        <div class="circle blue">
-          <span class="mask first">
-            <span class="base"></span>
-            <span class="mover"></span>
-          </span>
-          <span class="mask second">
-            <span class="base"></span>
-            <span class="mover"></span>
-          </span>
+          <div class="circle blue">
+            <span class="mask first">
+              <span class="base"></span>
+              <span class="mover"></span>
+            </span>
+            <span class="mask second">
+              <span class="base"></span>
+              <span class="mover"></span>
+            </span>
+          </div>
         </div>
       </div>
     </div>
-    <div id="showOriginal">
-      <a href="$6">$7</a>
-    </div>
+    <a href="$6" id="closeReaderView">$7</a>
   </div>
   <div id="feedbackContainer" class="footerFeedback">
     <div class="feedbackContent">

components/dom_distiller/core/javascript/dom_distiller_viewer.js

@@ -2,6 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// This variable will be changed by iOS scripts.
+var distiller_on_ios = false;
+
 function addToPage(html) {
   var div = document.createElement('div');
   div.innerHTML = html;
@@ -120,10 +123,15 @@ var updateLoadingIndicator = function() {
  * @param noText The i18n text for the feedback answer 'NO'.
  */
 function showFeedbackForm(questionText, yesText, noText) {
+  // If the distiller is running on iOS, do not show the feedback form. This
+  // variable is set in distiller_viewer.cc before this function is run.
+  if (distiller_on_ios) return;
+
   document.getElementById('feedbackYes').innerText = yesText;
   document.getElementById('feedbackNo').innerText = noText;
   document.getElementById('feedbackQuestion').innerText = questionText;
 
+  document.getElementById('contentWrap').style.paddingBottom = '120px';
   document.getElementById('feedbackContainer').style.display = 'block';
 }
 
@@ -143,12 +151,13 @@ function sendFeedback(good) {
 }
 
 // Add a listener to the "View Original" link to report opt-outs.
-document.getElementById('showOriginal').addEventListener('click', function(e) {
-  var img = document.createElement('img');
-  img.src = "/vieworiginal";
-  img.style.display = "none";
-  document.body.appendChild(img);
-}, true);
+document.getElementById('closeReaderView').addEventListener('click',
+    function(e) {
+      var img = document.createElement('img');
+      img.src = "/vieworiginal";
+      img.style.display = "none";
+      document.body.appendChild(img);
+    }, true);
 
 document.getElementById('feedbackYes').addEventListener('click', function(e) {
   sendFeedback(true);

components/dom_distiller/core/viewer.cc

@@ -117,7 +117,7 @@ std::string ReplaceHtmlTemplateValues(
 #if defined(OS_IOS)
   // On iOS the content is inlined as there is no API to detect those requests
   // and return the local data once a page is loaded.
-  css << "<style>" << viewer::GetCss() << "</style>";
+  css << "<style>" << viewer::GetCss() << viewer::GetIOSCss() << "</style>";
   script << "<script>\n" << viewer::GetJavaScript() << "\n</script>";
 #else
   css << "<link rel=\"stylesheet\" href=\"/" << kViewerCssPath << "\">";
@@ -139,7 +139,8 @@ std::string ReplaceHtmlTemplateValues(
 
   substitutions.push_back(original_url);                                  // $6
   substitutions.push_back(
-      l10n_util::GetStringUTF8(IDS_DOM_DISTILLER_VIEWER_VIEW_ORIGINAL));  // $7
+      l10n_util::GetStringUTF8(
+          IDS_DOM_DISTILLER_VIEWER_CLOSE_READER_VIEW));                   // $7
 
   substitutions.push_back(script.str());                                  // $8
 
@@ -245,6 +246,11 @@ const std::string GetCss() {
           IDR_DISTILLER_CSS).as_string();
 }
 
+const std::string GetIOSCss() {
+  return ResourceBundle::GetSharedInstance().GetRawDataResource(
+          IDR_DISTILLER_IOS_CSS).as_string();
+}
+
 const std::string GetJavaScript() {
   return ResourceBundle::GetSharedInstance()
       .GetRawDataResource(IDR_DOM_DISTILLER_VIEWER_JS)

components/dom_distiller/core/viewer.h

@@ -69,6 +69,9 @@ const std::string GetToggleLoadingIndicatorJs(const bool is_last_page);
 // Returns the default CSS to be used for a viewer.
 const std::string GetCss();
 
+// Returns the iOS specific CSS to be used for the distiller viewer.
+const std::string GetIOSCss();
+
 // Returns the default JS to be used for a viewer.
 const std::string GetJavaScript();
 

components/dom_distiller_strings.grdp

@@ -25,6 +25,9 @@
   <message name="IDS_DOM_DISTILLER_WEBUI_FETCHING_ENTRIES" desc="The text to show while fetching the list of entries on the DOM Distiller debug page.">
     Fetching entries...
   </message>
+  <message name="IDS_DOM_DISTILLER_VIEWER_CLOSE_READER_VIEW" desc="The text to show on a button at the bottom of the page to close reader view.">
+    Close reader view
+  </message>
   <message name="IDS_DOM_DISTILLER_VIEWER_FAILED_TO_FIND_ARTICLE_TITLE" desc="The text to show in place of a reading list article title if the article is not found.">
     Failed to find article.
   </message>
@@ -40,9 +43,6 @@
   <message name="IDS_DOM_DISTILLER_VIEWER_NO_DATA_CONTENT" desc="The text to show in place of reading list article content if there is no data found.">
     No data found.
   </message>
-  <message name="IDS_DOM_DISTILLER_VIEWER_VIEW_ORIGINAL" desc="The text to show on a link of an article to view the original page.">
-    View Original
-  </message>
   <message name="IDS_DOM_DISTILLER_VIEWER_LOADING_STRING" desc="The text to show indicating that the viewer is still loading more content from the article.">
     Loading...
   </message>

components/resources/dom_distiller_resources.grdp

@@ -7,6 +7,7 @@
   <include name="IDR_DOM_DISTILLER_VIEWER_JS" file="../dom_distiller/core/javascript/dom_distiller_viewer.js" type="BINDATA" />
   <include name="IDR_DISTILLER_JS" file="../dom_distiller/core/javascript/domdistiller.js" flattenhtml="true" type="BINDATA" />
   <include name="IDR_DISTILLER_CSS" file="../dom_distiller/core/css/distilledpage.css" type="BINDATA" />
+  <include name="IDR_DISTILLER_IOS_CSS" file="../dom_distiller/core/css/distilledpage_ios.css" type="BINDATA" />
   <include name="IDR_IS_DISTILLABLE_JS" file="../dom_distiller/core/javascript/is_distillable_trigger.js" type="BINDATA" />
   <include name="IDR_EXTRACT_PAGE_FEATURES_JS" file="../dom_distiller/core/javascript/extract_features.js" type="BINDATA" />
   <include name="IDR_DISTILLABLE_PAGE_SERIALIZED_MODEL" file="../dom_distiller/core/data/distillable_page_model.bin" type="BINDATA" />

components/test/data/dom_distiller/pinch_tester.html

@@ -2,7 +2,7 @@
 <head><title>Test Page for Pinch to Zoom</title></head>
 <body>
 <div id="contentWrap">
-<p id="showOriginal">Original</p>
+<p id="closeReaderView">Original</p>
 </div>
 <div id="feedbackContainer">
   <div id="feedbackYes"></div>

ios/chrome/browser/dom_distiller/distiller_viewer.cc

@@ -49,9 +49,8 @@ void DistillerViewer::OnArticleReady(
       distilled_page_prefs_->GetFontFamily());
 
   std::string html_and_script(html);
-  std::string hide_feedback =
-      "document.getElementById('feedbackContainer').style.display = 'none';";
-  html_and_script += "<script>" + js_buffer_ + hide_feedback + "</script>";
+  html_and_script +=
+      "<script> distiller_on_ios = true; " + js_buffer_ + "</script>";
   callback_.Run(url_, html_and_script);
 }