Clean up HTML and CSS for desktop Reader Mode settings dialog.

The main goal of the CL is to separate the desktop-specific HTML from
the shared HTML to make testing more straightforward.

Since this was already a refactoring CL, I also applied the fixes
surfaced by the presubmit checks.

Bug: 952034
Change-Id: I963dff8ef49ef3b78b585aa2040876953a2de004
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1925688
Commit-Queue: Aran Gilman <gilmanmh@google.com>
Reviewed-by: Wei-Yin Chen (陳威尹) <wychen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#717963}

chrome/browser/dom_distiller/dom_distiller_viewer_source_browsertest.cc

@@ -59,7 +59,7 @@ namespace {
 
 const char kGetLoadIndicatorClassName[] =
     "window.domAutomationController.send("
-    "document.getElementById('loadingIndicator').className)";
+    "document.getElementById('loading-indicator').className)";
 
 const char kGetContent[] =
     "window.domAutomationController.send("

components/dom_distiller/core/css/distilledpage.css

@@ -194,12 +194,12 @@ body {
   border-left: 1px solid #555;
 }
 
-/* #contentWrap is added to be more specific than the color theme rules */
-#contentWrap th:first-child {
+/* #content-wrap is added to be more specific than the color theme rules */
+#content-wrap th:first-child {
   border-left: none;
 }
 
-#contentWrap td:first-child {
+#content-wrap td:first-child {
   border-left: none;
 }
 
@@ -253,13 +253,13 @@ h6 {
 
 /* Content. */
 
-#loadingIndicator {
+#loading-indicator {
   padding-bottom: 2em;
   width: 100%;
 }
 
-#loadingIndicator > img,
-#loadingIndicator > svg {
+#loading-indicator > img,
+#loading-indicator > svg {
   display: block;
   height: 2.5em;
   margin: auto;
@@ -268,59 +268,27 @@ h6 {
 
 /* Margins for Show Original link. */
 
-.light #closeReaderView {
-  border-top: 1px solid #E0E0E0;
-  color: rgb(66, 133, 244);
-}
-
-.dark #closeReaderView {
-  border-top: 1px solid #555;
-  color: rgb(58, 218, 255);
-}
-
-.sepia #closeReaderView {
-  border-top: 1px solid rgb(147, 125, 102);
-  color: rgb(85, 85, 255);
-}
-
 video::-webkit-media-controls-fullscreen-button {
   display: none;
 }
 
-#closeReaderView {
-  /*
-  TODO(mdjones): Remove the "display: none;" style when the Reader Mode bar
-                 behaves like the toolbar when scrolling.
-  */
-  display: none;
-  flex: 0 0 auto;
-  font-family: 'Roboto', sans-serif;
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 14px;
-  padding: 24px 16px;
-  text-align: right;
-  text-decoration: none;
-  text-transform: uppercase;
-  width: 100%;
-}
-
 #content {
   margin: 24px 16px 24px 16px;
 }
 
-#mainContent {
+#main-content {
   flex: 1 1 auto;
   margin: 0 auto;
+  max-width: 35em;
   width: 100%;
 }
 
-#articleHeader {
+#article-header {
   margin-top: 24px;
   width: 100%;
 }
 
-#titleHolder {
+#title-holder {
   font-size: 1.714rem;
   line-height: 1.417;
   margin: 0 16px;

components/dom_distiller/core/css/distilledpage_desktop.css

@@ -2,273 +2,275 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-/* This file should contain style used on desktop but not Android or iOS. */
+/* This file should contain style used on desktop but not Android or i-oS. */
 
 :root {
-  --fontSizePercent: 22%;
-  --mdblue: rgb(26, 115, 232);
-  --mdblue-faint: rgba(26, 115, 232, .2);
-  --mdgrey: rgb(95, 99, 104);
+  --font-size-percent: 22%;
+  --google-blue-600: 26, 115, 232;
+  --google-grey-700: 95, 99, 104;
+  --google-grey-800: 60, 64, 67;
 }
 
 fieldset {
-  border: none;
   background: transparent;
+  border: none;
 }
 
-#mainContent h1 {
+#main-content h1 {
   font-size: 1.5em;
 }
 
-#mainContent article {
+#main-content article {
   margin-top: 2em;
 }
 
-.screenReaderOnly {
-  display: block;
+.screen-reader-only {
+  border: none;
   color: transparent;
-  height: 0px;
+  display: block;
+  height: 0;
   margin: 0;
   padding: 0;
-  border: none;
   user-select: none;
 }
 
-#mainContent {
+#main-content {
+  margin-bottom: 1em;
+  margin-top: 1em;
   max-width: 100%;
-  width: 35em;
   padding: 1em;
-  margin-top: 1em;
-  margin-bottom: 1em;
+  width: 35em;
 }
 
-#settingsContainer {
-  position: absolute;
-  width: inherit;
-  max-width: 90%;
-  flex: 1 1 auto;
+#settings-container {
+  border-bottom: thin solid gray;
   display: flex;
+  flex: 1 1 auto;
   justify-content: flex-end;
-  border-bottom: thin solid gray;
+  max-width: 90%;
+  position: absolute;
+  width: inherit;
 }
 
-#settingsContainer button {
+#settings-container button {
   background: transparent;
   border: none;
   border-radius: 50%;
-  color: var(--mdgrey);
+  color: rgb(var(--google-grey-700));
 }
 
-#settingsContainer button .material-icons {
+#settings-container button .material-icons {
   user-select: none;
 }
 
-#settingsContainer button.activated {
+#settings-container button.activated {
   background-color: rgba(0, 0, 0, .1);
 }
 
-.dark #settingsContainer button.activated {
+.dark #settings-container button.activated {
   background-color: rgba(255, 255, 255, .1);
 }
 
-#settingsContainer button:focus {
+#settings-container button:focus {
   background-color: rgba(95, 99, 104, .2);
-  box-shadow: 0px 0px 0px 8px rgba(95, 99, 104, .2);
+  box-shadow: 0 0 0 8px rgba(95, 99, 104, .2);
   outline: none;
 }
 
-#settingsContainer button#settingsToggle {
+#settings-container button#settings-toggle {
   border-radius: 16px;
 }
 
-.dark #settingsToggle {
+.dark #settings-toggle {
   color: #E0E0E0;
 }
 
-#settingsDialog {
-  top: 3em;
-  left: auto;
+#settings-dialog {
   border: none;
   box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3),
               0 4px 8px 3px rgba(60, 64, 67, 0.15);
-  width: 320px;
-  height: 168px;
-  padding: 16px;
   box-sizing: border-box;
-  font-size: 13px;
+  color: rgb(var(--google-grey-800));
   font-family: 'Roboto Regular', 'Roboto', sans-serif;
-  color: #3C4043;
+  font-size: 13px;
+  height: 168px;
+  left: auto;
+  padding: 16px;
+  top: 3em;
+  width: 320px;
 
   /* The z-index is set so that any "positioned" elements in the article text
    * (e.g. footnotes) are rendered below the dialog. */
   z-index: 1;
 }
 
-#settingsDialog h2 {
-  font-size: 14px;
+#settings-dialog h2 {
   font-family: 'Roboto Medium', 'Roboto', sans-serif;
+  font-size: 14px;
 }
 
-#settingsHeader {
+#settings-header {
   margin-bottom: 16px;
 }
 
-#settingsHeader > * {
+#settings-header > * {
   display: inline;
 }
 
-#closeSettingsButton {
+#close-settings {
+  height: 18px;
+  padding: 0;
   position: absolute;
-  top: 8px;
   right: 8px;
+  top: 8px;
   width: 18px;
-  height: 18px;
-  padding: 0;
 }
 
-#closeSettingsButton > * {
+#close-settings > * {
   font-size: 18px;
   margin: 0;
 }
 
-
-#settingsFields {
-  width: 100%;
+#settings-fields {
   display: grid;
   grid-row-gap: 12px;
   grid-template:
-    "style color" 32px
-    "size size"  32px
+    'style color' 32px
+    'size size'  32px
     / 50% 50%;
+  width: 100%;
 }
 
-select#fontFamilySelection {
+select#font-family-selection {
   background: transparent;
   border: 1px solid silver;
   border-radius: 2px;
-  width: 100%;
-  height: 32px;
   color: inherit;
-  font-size: inherit;
   font-family: inherit;
+  font-size: inherit;
+  height: 32px;
+  width: 100%;
 }
 
-select#fontFamilySelection:focus {
-  outline-color: var(--mdblue);
+select#font-family-selection:focus {
+  outline-color: rgb(var(--google-blue-600));
 }
 
-#themeSelection ul {
-  list-style-type: none;
+#theme-selection ul {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
+  list-style-type: none;
 }
 
-.themeOption {
+.theme-option {
   display: block;
+  height: 32px;
   position: relative;
   width: 32px;
-  height: 32px;
 }
 
-.themeOption input[type="radio"] {
+.theme-option input[type='radio'] {
   -webkit-appearance: none;
   appearance: none;
-  width: 32px;
-  height: 32px;
   border-radius: 50%;
+  height: 32px;
   margin: 0;
   padding: 0;
+  width: 32px;
 }
 
-.themeOption input[type="radio"].light {
+.theme-option input[type='radio'].light {
   border: 1px solid gray;
 }
 
-.themeOption input[type="radio"]:focus {
+.theme-option input[type='radio']:focus {
+  border: 2px solid rgb(var(--google-blue-600));
   outline: none;
-  border: 2px solid var(--mdblue);
 }
 
 .checkmark {
+  bottom: 0;
   display: none;
-  width: 16px;
   height: 16px;
   position: absolute;
-  bottom: 0;
   right: 0;
+  width: 16px;
 }
 
 .checkmark .material-icons {
-  font-size: 16px;
-  color: var(--mdblue);
   background-color: white;
   border-radius: 50%;
+  color: rgb(var(--google-blue-600));
+  font-size: 16px;
   user-select: none;
 }
 
-.themeOption input[type="radio"]:checked + .checkmark {
+.theme-option input[type='radio']:checked + .checkmark {
   display: inline;
 }
 
-#fontSizeWrapper {
+#font-size-wrapper {
   grid-area: size;
 }
 
-#fontSizeSelection {
+#font-size-selection {
   -webkit-appearance: none;
-  width: 100%;
-  margin: 0;
   background: transparent;
+  margin: 0;
+  width: 100%;
 }
 
-#fontSizeSelection:focus {
+#font-size-selection:focus {
   outline: none;
 }
 
-#fontSizeSelection::-webkit-slider-thumb {
+#font-size-selection::-webkit-slider-thumb {
   -webkit-appearance: none;
+  background-color: rgb(var(--google-blue-600));
   border-radius: 50%;
-  background-color: var(--mdblue);
-  width: 10px;
   height: 10px;
 
   /* Position the thumb over the slider track. */
   margin-top: -4px;
 
+  position: relative;
+  width: 10px;
+
   /* Render the thumb on top of the tickmarks. We can't just rearrange the HTML
    * because the tickmarks need to render above the slider's track but below the
    * thumb. */
-  position: relative;
   z-index: 1;
 }
 
-#fontSizeSelection:focus::-webkit-slider-thumb {
-  box-shadow: 0px 0px 0px 11px var(--mdblue-faint);
+#font-size-selection:focus::-webkit-slider-thumb {
+  box-shadow: 0 0 0 11px rgba(var(--google-blue-600), .2);
 }
 
-#fontSizeSelection::-webkit-slider-container {
+#font-size-selection::-webkit-slider-container {
   /* Increase the clickable area of the slider. */
-  border-top: 5px solid transparent;
   border-bottom: 5px solid transparent;
+  border-top: 5px solid transparent;
 }
 
-#fontSizeSelection::-webkit-slider-runnable-track {
-  height: 2px;
-  width: 100%;
-
+#font-size-selection::-webkit-slider-runnable-track {
   /* Make the track opaque blue to the left of the thumb and mostly transparent
    * to the right of the thumb. */
   background: linear-gradient(
-    to right, var(--mdblue), var(--mdblue) var(--fontSizePercent),
-    var(--mdblue-faint) var(--fontSizePercent), var(--mdblue-faint));
+      to right,
+      rgb(var(--google-blue-600)),
+      rgb(var(--google-blue-600)) var(--font-size-percent),
+      rgba(var(--google-blue-600), .2) var(--font-size-percent),
+      rgba(var(--google-blue-600), .2)
+  );
+
+  height: 2px;
+  width: 100%;
 }
 
 .tickmarks {
   display: flex;
-  justify-content: space-between;
-  width: 100%;
-  padding-top: 0;
   height: 2px;
+  justify-content: space-between;
 
   /* Position the tickmarks over the slider track. */
   margin-top: -19px;
@@ -277,24 +279,27 @@ select#fontFamilySelection:focus {
    * datalist. Setting the height property directly does not seem to have an
    * impact. */
   overflow: hidden;
+
+  padding-top: 0;
+  width: 100%;
 }
 
 .tickmarks option {
-  width: 1px;
   padding: 0;
+  width: 1px;
 }
 
-.tickmarks option.beforeThumb {
+.tickmarks option.before-thumb {
   background: white;
 }
 
-.tickmarks option.afterThumb {
-  background: var(--mdblue);
+.tickmarks option.after-thumb {
+  background: rgb(var(--google-blue-600));
 }
 
 .label-container {
   display: flex;
-  justify-content: space-between;
   font-size: 13px;
+  justify-content: space-between;
   padding-top: 8px;
 }

components/dom_distiller/core/css/distilledpage_ios.css

@@ -5,15 +5,11 @@
 /* The following are iOS specific rules for rendering on WebKit instead of
  * Blink. */
 
-#mainContent {
+#main-content {
   -webkit-flex: 1 1 auto;
 }
 
-#closeReaderView {
-  -webkit-flex: 0 0 auto;
-}
-
-#contentWrap {
+#content-wrap {
   -webkit-flex-flow: column;
   display: -webkit-flex;
 }

components/dom_distiller/core/css/distilledpage_mobile.css

-/* Copyright 2019 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. */
-
-/* This file should contain style shared by Android and iOS but not desktop. */
-
-#mainContent {
-  max-width: 35em;
-}
-
-.desktopOnly {
-  display: none;
-}

components/dom_distiller/core/html/appearance_settings_dialog.html

+<div id="settings-container">
+  <button id="settings-toggle" type="button"
+      aria-label="Adjust appearance settings" tabindex=0>
+    <i class="material-icons">text_format</i>
+  </button>
+  <dialog id="settings-dialog">
+    <div id="settings-header">
+      <h2>Reader Mode Styling</h2>
+      <button id="close-settings" type="button" aria-label="Close settings"
+          tabindex=0>
+        <i class="material-icons">close</i>
+      </button>
+    </div>
+    <div id="settings-fields">
+      <div class="setting">
+        <label id="font-family-label" class="screen-reader-only">
+          Font Style
+        </label>
+        <select id="font-family-selection" name="font-family" aria-labelledby="font-family-label">
+          <option value="sans-serif" selected>Sans-serif font</option>
+          <option value="serif">Serif font</option>
+          <option value="monospace">Monospace font</option>
+        </select>
+      </div>
+      <div class="setting">
+        <fieldset id="theme-selection">
+          <legend class="screen-reader-only">
+            Page Theme
+          </legend>
+          <ul>
+            <li class="theme-option">
+              <label id="theme-light-label" class="screen-reader-only">
+                Light
+              </label>
+              <input type="radio" name="theme" value="light"
+                 aria-labelledby="theme-light-label" class="light" checked>
+              <div class="checkmark"><i class="material-icons">check_circle</i></div>
+            </li>
+            <li class="theme-option">
+              <label id="theme-sepia-label" class="screen-reader-only">
+                Sepia
+              </label>
+              <input type="radio" name="theme" value="sepia"
+                 aria-labelledby="theme-sepia-label" class="sepia">
+              <div class="checkmark"><i class="material-icons">check_circle</i></div>
+            </li>
+            <li class="theme-option">
+              <label id="theme-dark-label" class="screen-reader-only">
+                Dark
+              </label>
+              <input type="radio" name="theme" value="dark"
+                  aria-labelledby="theme-dark-label" class="dark">
+              <div class="checkmark"><i class="material-icons">check_circle</i></div>
+            </li>
+          </ul>
+        </fieldset>
+      </div>
+      <div class="setting" id="font-size-wrapper">
+        <label id="font-size-label" class="screen-reader-only">
+          Font Size
+        </label>
+        <input id="font-size-selection"
+               type="range"
+               name="fontSize"
+               list="tickmarks"
+               min="0"
+               max="9"
+               value="2"
+               aria-labelledby="font-size-label">
+        <datalist class="tickmarks">
+          <option value="0" aria-labelledby="slider-label-min"></option>
+          <option value="1"></option>
+          <option value="2"></option>
+          <option value="3"></option>
+          <option value="4"></option>
+          <option value="5"></option>
+          <option value="6"></option>
+          <option value="7"></option>
+          <option value="8"></option>
+          <option value="9" aria-labelledby="slider-label-max"></option>
+        </datalist>
+        <div class="label-container">
+          <span id="slider-label-min">Small</span>
+          <span id="slider-label-max">Large</span>
+        </div>
+      </div>
+    </div>
+  </dialog>
+</div>

components/dom_distiller/core/html/dom_distiller_viewer.html

@@ -16,114 +16,30 @@ found in the LICENSE file.
   $2
 </head>
 <body class="$3">
-  <div id="contentWrap">
-    <div id="mainContent">
-      <div id="settingsContainer" class="desktopOnly">
-        <button id="settingsToggle" type="button"
-            aria-label="Adjust appearance settings" tabindex=0>
-          <i class="material-icons">text_format</i>
-        </button>
-        <dialog id="settingsDialog">
-          <div id="settingsHeader">
-            <h2>Reader Mode Styling</h2>
-            <button id="closeSettingsButton" type="button" aria-label="Close settings"
-                tabindex=0>
-              <i class="material-icons">close</i>
-            </button>
-          </div>
-          <div id="settingsFields">
-            <div class="setting">
-              <label for="fontFamilySelection" class="screenReaderOnly">
-                Font Style
-              </label>
-              <select id="fontFamilySelection" name="fontFamily">
-                <option value="sans-serif" selected>Sans-serif font</option>
-                <option value="serif">Serif font</option>
-                <option value="monospace">Monospace font</option>
-              </select>
-            </div>
-            <div class="setting">
-              <fieldset id="themeSelection">
-                <legend class="screenReaderOnly">
-                  Page Theme
-                </legend>
-                <ul>
-                  <li class="themeOption">
-                    <label for="themeOptionLight" class="screenReaderOnly">
-                      Light
-                    </label>
-                    <input type="radio" name="theme" value="light"
-                       id="themeOptionLight" class="light" checked/>
-                    <div class="checkmark"><i class="material-icons">check_circle</i></div>
-                  </li>
-                  <li class="themeOption">
-                    <label for="themeOptionSepia" class="screenReaderOnly">
-                      Sepia
-                    </label>
-                    <input type="radio" name="theme" value="sepia"
-                       id="themeOptionSepia" class="sepia"/>
-                    <div class="checkmark"><i class="material-icons">check_circle</i></div>
-                  </li>
-                  <li class="themeOption">
-                    <label for="themeOptionDark" class="screenReaderOnly">
-                      Dark
-                    </label>
-                    <input type="radio" name="theme" value="dark"
-                        id="themeOptionDark" class="dark"/>
-                    <div class="checkmark"><i class="material-icons">check_circle</i></div>
-                  </li>
-                </ul>
-              </fieldset>
-            </div>
-            <div class="setting" id="fontSizeWrapper">
-              <label for="fontSizeSelection" class="screenReaderOnly">
-                Font Size
-              </label>
-              <input id="fontSizeSelection"
-                     type="range"
-                     name="fontSize"
-                     list="tickmarks"
-                     min="0"
-                     max="9"
-                     value="2">
-              <datalist class="tickmarks">
-                <option value="0" aria-labelledby="slider-label-min"></option>
-                <option value="1"></option>
-                <option value="2"></option>
-                <option value="3"></option>
-                <option value="4"></option>
-                <option value="5"></option>
-                <option value="6"></option>
-                <option value="7"></option>
-                <option value="8"></option>
-                <option value="9" aria-labelledby="slider-label-max"></option>
-              </datalist>
-              <div class="label-container">
-                <span id="slider-label-min">Small</span>
-                <span id="slider-label-max">Large</span>
-              </div>
-            </div>
-          </div>
-        </dialog>
-      </div>
+  <div id="content-wrap">
+    <div id="main-content">
+      <!--
+        Placeholder for desktop-only settings dialog.
+        See appearance_settings_dialog.html
+      -->
+      $7
       <article>
-        <header id="articleHeader">
-          <div id="titleCollapse">
-            <div class="verticalCenterOuter">
-              <div class="verticalCenterInner">
-                <h1 id="titleHolder"><noscript>$4</noscript></h1>
+        <header id="article-header">
+          <div id="title-collapse">
+            <div class="vertical-center-outer">
+              <div class="vertical-center-inner">
+                <h1 id="title-holder"><noscript>$4</noscript></h1>
               </div>
             </div>
           </div>
         </header>
         <div id="content"><noscript>$5</noscript></div>
       </article>
-      <div id="loadingIndicator" class="visible">
+      <div id="loading-indicator" class="visible">
         <!-- SVG material loading spinner. -->
         $6
       </div>
     </div>
-    <a data-original-url="$7" id="closeReaderView">$8</a>
   </div>
 </body>
 </html>

components/dom_distiller/core/javascript/dom_distiller_viewer.js

@@ -42,14 +42,13 @@ function fillYouTubePlaceholders() {
 }
 
 function showLoadingIndicator(isLastPage) {
-  document.getElementById('loadingIndicator').className =
+  document.getElementById('loading-indicator').className =
       isLastPage ? 'hidden' : 'visible';
 }
 
 // Sets the title.
 function setTitle(title) {
-  const holder = document.getElementById('titleHolder');
-
+  const holder = document.getElementById('title-holder');
   holder.textContent = title;
   document.title = title;
 }
@@ -141,19 +140,20 @@ function maybeSetWebFont() {
 const supportedTextSizes = [14, 15, 16, 18, 20, 24, 28, 32, 40, 48];
 function updateSlider(position) {
   document.documentElement.style.setProperty(
-      '--fontSizePercent', (position / 9 * 100) + '%');
+      '--font-size-percent', (position / 9 * 100) + '%');
   for (let i = 0; i < supportedTextSizes.length; i++) {
-    const option = document.querySelector('.tickmarks option[value="' + i + '"]');
+    const option =
+        document.querySelector('.tickmarks option[value="' + i + '"]');
     if (!option) {
       continue;
     }
 
     const optionClasses = option.classList;
-    removeAll(optionClasses, ['beforeThumb', 'afterThumb']);
+    removeAll(optionClasses, ['before-thumb', 'after-thumb']);
     if (i < position) {
-      optionClasses.add('beforeThumb');
+      optionClasses.add('before-thumb');
     } else {
-      optionClasses.add('afterThumb');
+      optionClasses.add('after-thumb');
     }
   }
 }
@@ -164,17 +164,9 @@ function updateSliderFromElement(element) {
   }
 }
 
-// Add a listener to the "View Original" link to report opt-outs.
-document.getElementById('closeReaderView')
-    .addEventListener('click', function(e) {
-      if (distiller) {
-        distiller.closePanel(true);
-      }
-    }, true);
-
 updateToolbarColor();
 maybeSetWebFont();
-updateSliderFromElement(document.querySelector('#fontSizeSelection'));
+updateSliderFromElement(document.querySelector('#font-size-selection'));
 
 const pincher = (function() {
   'use strict';
@@ -422,9 +414,9 @@ window.addEventListener('touchend', pincher.handleTouchEnd, {passive: false});
 window.addEventListener(
     'touchcancel', pincher.handleTouchCancel, {passive: false});
 
-document.querySelector('#settingsToggle').addEventListener('click', (e) => {
-  const dialog = document.querySelector('#settingsDialog');
-  const toggle = document.querySelector('#settingsToggle');
+document.querySelector('#settings-toggle').addEventListener('click', (e) => {
+  const dialog = document.querySelector('#settings-dialog');
+  const toggle = document.querySelector('#settings-toggle');
   if (dialog.open) {
     toggle.classList.remove('activated');
     dialog.close();
@@ -434,26 +426,27 @@ document.querySelector('#settingsToggle').addEventListener('click', (e) => {
   }
 });
 
-document.querySelector('#closeSettingsButton')
-    .addEventListener('click', (e) => {
-      document.querySelector('#settingsToggle').classList.remove('activated');
-      document.querySelector('#settingsDialog').close();
-    });
+document.querySelector('#close-settings').addEventListener('click', (e) => {
+  document.querySelector('#settings-toggle').classList.remove('activated');
+  document.querySelector('#settings-dialog').close();
+});
 
-document.querySelector('#themeSelection').addEventListener('change', (e) => {
+document.querySelector('#theme-selection').addEventListener('change', (e) => {
   useTheme(e.target.value);
 });
 
-document.querySelector('#fontSizeSelection').addEventListener('change', (e) => {
-  document.body.style.fontSize = supportedTextSizes[e.target.value] + 'px';
-  updateSlider(e.target.value);
-});
+document.querySelector('#font-size-selection')
+    .addEventListener('change', (e) => {
+      document.body.style.fontSize = supportedTextSizes[e.target.value] + 'px';
+      updateSlider(e.target.value);
+    });
 
-document.querySelector('#fontSizeSelection').addEventListener('input', (e) => {
-  updateSlider(e.target.value);
-});
+document.querySelector('#font-size-selection')
+    .addEventListener('input', (e) => {
+      updateSlider(e.target.value);
+    });
 
-document.querySelector('#fontFamilySelection')
+document.querySelector('#font-family-selection')
     .addEventListener('change', (e) => {
       useFontFamily(e.target.value);
     });

components/dom_distiller/core/viewer.cc

@@ -57,14 +57,10 @@ const char kMonospaceCssClass[] = "monospace";
 
 std::string GetPlatformSpecificCss() {
 #if defined(OS_IOS)
-  return base::StrCat(
-      {ui::ResourceBundle::GetSharedInstance().LoadDataResourceString(
-           IDR_DISTILLER_MOBILE_CSS),
-       ui::ResourceBundle::GetSharedInstance().LoadDataResourceString(
-           IDR_DISTILLER_IOS_CSS)});
-#elif defined(OS_ANDROID)
   return ui::ResourceBundle::GetSharedInstance().LoadDataResourceString(
-      IDR_DISTILLER_MOBILE_CSS);
+      IDR_DISTILLER_IOS_CSS);
+#elif defined(OS_ANDROID)
+  return "";
 #else  // Desktop
   return ui::ResourceBundle::GetSharedInstance().LoadDataResourceString(
       IDR_DISTILLER_DESKTOP_CSS);
@@ -150,9 +146,7 @@ std::string ReplaceHtmlTemplateValues(
 
   substitutions.push_back(svg.str());  // $6
 
-  substitutions.push_back(original_url);  // $7
-  substitutions.push_back(l10n_util::GetStringUTF8(
-      IDS_DOM_DISTILLER_VIEWER_CLOSE_READER_VIEW));  // $8
+  substitutions.push_back(viewer::GetSettingsContainer());  // $7
 
   return base::ReplaceStringPlaceholders(html_template, substitutions, nullptr);
 }
@@ -231,6 +225,15 @@ const std::string GetUnsafeArticleContentJs(
   return page_update + GetToggleLoadingIndicatorJs(true);
 }
 
+const std::string GetSettingsContainer() {
+#if defined(OS_IOS) || defined(OS_ANDROID)
+  return "";
+#else  // desktop
+  return ui::ResourceBundle::GetSharedInstance().LoadDataResourceString(
+      IDR_DISTILLER_DESKTOP_SETTINGS_HTML);
+#endif
+}
+
 const std::string GetCss() {
   return base::StrCat(
       {ui::ResourceBundle::GetSharedInstance().LoadDataResourceString(

components/dom_distiller/core/viewer.h

@@ -72,6 +72,10 @@ const std::string GetLoadingImage();
 // Returns the default JS to be used for a viewer.
 const std::string GetJavaScript();
 
+// Returns HTML related to the desktop appearance settings dialog. The result
+// will be an empty string ("") for non-desktop platforms.
+const std::string GetSettingsContainer();
+
 // Based on the given path, calls into the DomDistillerServiceInterface for
 // viewing distilled content based on the |path|.
 std::unique_ptr<ViewerHandle> CreateViewRequest(

components/dom_distiller_strings.grdp

@@ -25,9 +25,6 @@
   <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
-  </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>

components/resources/dom_distiller_resources.grdp

 <?xml version="1.0" encoding="utf-8"?>
 <grit-part>
   <include name="IDR_DOM_DISTILLER_VIEWER_HTML" file="../dom_distiller/core/html/dom_distiller_viewer.html" type="BINDATA" compress="gzip" />
+  <include name="IDR_DISTILLER_DESKTOP_SETTINGS_HTML" file="../dom_distiller/core/html/appearance_settings_dialog.html" type="BINDATA" compress="gzip" />
   <include name="IDR_DOM_DISTILLER_VIEWER_JS" file="../dom_distiller/core/javascript/dom_distiller_viewer.js" type="BINDATA" compress="gzip" />
   <include name="IDR_DISTILLER_JS" file="../dom_distiller/core/javascript/domdistiller.js" flattenhtml="true" type="BINDATA" compress="gzip" />
   <include name="IDR_DISTILLER_CSS" file="../dom_distiller/core/css/distilledpage.css" type="BINDATA" compress="gzip" />
   <include name="IDR_DISTILLER_DESKTOP_CSS" file="../dom_distiller/core/css/distilledpage_desktop.css" type="BINDATA" compress="gzip" />
   <include name="IDR_DISTILLER_IOS_CSS" file="../dom_distiller/core/css/distilledpage_ios.css" type="BINDATA" compress="gzip" />
-  <include name="IDR_DISTILLER_MOBILE_CSS" file="../dom_distiller/core/css/distilledpage_mobile.css" type="BINDATA" compress="gzip" />
   <include name="IDR_DISTILLER_LOADING_IMAGE" file="../dom_distiller/core/images/dom_distiller_material_spinner.svg" type="BINDATA" compress="gzip" />
   <include name="IDR_EXTRACT_PAGE_FEATURES_JS" file="../dom_distiller/core/javascript/extract_features.js" type="BINDATA" compress="gzip" />
   <include name="IDR_DISTILLABLE_PAGE_SERIALIZED_MODEL_NEW" file="../dom_distiller/core/data/distillable_page_model_new.bin" type="BINDATA" compress="gzip" />

components/test/data/dom_distiller/pinch_tester.html

@@ -4,12 +4,7 @@
   <title>Test Page for Pinch to Zoom</title>
 </head>
 <body>
-<div id="contentWrap">
-<p id="closeReaderView">Original</p>
-</div>
-<div id="feedbackContainer">
-  <div id="feedbackYes"></div>
-  <div id="feedbackNo"></div>
+<div id="content-wrap">
 </div>
 <script src="dom_distiller_viewer.js"></script>
 <script src="pinch_tester.js"></script>