Font Settings API: Use Chrome settings CSS in sample extension.

As suggested by UI leads, to polish the sample extension's UI.

BUG=114805
TBR=mpcomplete

Review URL: https://chromiumcodereview.appspot.com/10907052

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@154729 0039d316-1c4b-4281-b951-d872f2087c98

6 files changed, 618 insertions, 18 deletions

diff --git a/chrome/common/extensions/docs/examples/api/fontSettings/css/chrome_shared.css b/chrome/common/extensions/docs/examples/api/fontSettings/css/chrome_shared.css
new file mode 100644
index 0000000..48a6c26
--- /dev/null
+++ b/chrome/common/extensions/docs/examples/api/fontSettings/css/chrome_shared.css
@@ -0,0 +1,100 @@
+/* Copyright (c) 2012 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. */
+
+/* Copy of /resources/shared/css/chrome_shared.css for sample extension. */
+
+/* Prevent CSS from overriding the hidden property. */
+[hidden] {
+  display: none !important;
+}
+
+html.loading * {
+  -webkit-transition-delay: 0 !important;
+  -webkit-transition-duration: 0 !important;
+}
+
+body {
+  cursor: default;
+  margin: 0;
+}
+
+p {
+  line-height: 1.8em;
+}
+
+h1,
+h2,
+h3 {
+  -webkit-user-select: none;
+  font-weight: normal;
+  /* Makes the vertical size of the text the same for all fonts. */
+  line-height: 1;
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+h2 {
+  font-size: 1.3em;
+  margin-bottom: 0.4em;
+}
+
+h3 {
+  color: black;
+  font-size: 1.2em;
+  margin-bottom: 0.8em;
+}
+
+a {
+  color: rgb(17, 85, 204);
+  text-decoration: underline;
+}
+
+a:active {
+  color: rgb(5, 37, 119);
+}
+
+/* Elements that need to be LTR even in an RTL context, but should align
+ * right. (Namely, URLs, search engine names, etc.)
+ */
+html[dir='rtl'] .weakrtl {
+  direction: ltr;
+  text-align: right;
+}
+
+/* Input fields in search engine table need to be weak-rtl. Since those input
+ * fields are generated for all cr.ListItem elements (and we only want weakrtl
+ * on some), the class needs to be on the enclosing div.
+ */
+html[dir='rtl'] div.weakrtl input {
+  direction: ltr;
+  text-align: right;
+}
+
+html[dir='rtl'] .favicon-cell.weakrtl {
+  -webkit-padding-end: 22px;
+  -webkit-padding-start: 0;
+}
+
+/* weakrtl for selection drop downs needs to account for the fact that
+ * Webkit does not honor the text-align attribute for the select element.
+ * (See Webkit bug #40216)
+ */
+html[dir='rtl'] select.weakrtl {
+  direction: rtl;
+}
+
+html[dir='rtl'] select.weakrtl option {
+  direction: ltr;
+}
+
+/* WebKit does not honor alignment for text specified via placeholder attribute.
+ * This CSS is a workaround. Please remove once WebKit bug is fixed.
+ * https://bugs.webkit.org/show_bug.cgi?id=63367
+ */
+html[dir='rtl'] input.weakrtl::-webkit-input-placeholder,
+html[dir='rtl'] .weakrtl input::-webkit-input-placeholder {
+  direction: rtl;
+}
diff --git a/chrome/common/extensions/docs/examples/api/fontSettings/css/uber_shared.css b/chrome/common/extensions/docs/examples/api/fontSettings/css/uber_shared.css
new file mode 100644
index 0000000..0fb3209
--- /dev/null
+++ b/chrome/common/extensions/docs/examples/api/fontSettings/css/uber_shared.css
@@ -0,0 +1,163 @@
+/* Copyright (c) 2012 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. */
+
+body.uber-frame {
+  -webkit-margin-start: 155px;
+  color: rgb(48, 57, 66);
+}
+
+html[dir='rtl'] body.uber-frame {
+  /* Enable vertical scrollbar at all times in RTL to avoid visual glitches when
+   * showing sub-pages that vertically overflow. */
+  overflow-y: scroll;
+}
+
+/* TODO(dbeam): Remove .page class from overlays in settings so the junk below
+ * isn't necessary. */
+body.uber-frame #extension-settings.page,
+body.uber-frame #mainview-content .page,
+body.uber-frame .subpage-sheet-container .page,
+body.uber-frame > .page {
+  -webkit-margin-end: 24px;
+  min-width: 576px;
+  padding-bottom: 20px;
+  padding-top: 55px;
+}
+
+body.uber-frame header {
+  background-image: -webkit-linear-gradient(white,
+                                            white 40%,
+                                            rgba(255, 255, 255, 0.92));
+  left: 155px;
+  /* <section>s in options currently amount to 638px total, broken up into
+   * 600px max-width + 18px -webkit-padding-start + 20px -webkit-margin-end
+   * so we mirror this value here so the headers match width and horizontal
+   * alignment when scrolling sideways. */
+  max-width: 738px;
+  min-width: 600px;
+  position: fixed;
+  right: 0;
+  top: 0;
+  /* list.css sets a z-index of up to 2, this is set to 3 to ensure that the
+   * header is in front of the selected list item. */
+  z-index: 3;
+}
+
+html[dir='rtl'] body.uber-frame header {
+  left: 0;
+  right: 155px;
+}
+
+body.uber-frame header > .search-field-container,
+body.uber-frame header > .header-extras,
+body.uber-frame header > button {
+  position: absolute;
+  right: 20px;
+  top: 21px;
+}
+
+html[dir='rtl'] body.uber-frame header > .search-field-container,
+html[dir='rtl'] body.uber-frame header > .header-extras,
+html[dir='rtl'] body.uber-frame header > button {
+  left: 20px;
+  right: auto;
+}
+
+body.uber-frame header input[type='search'],
+body.uber-frame header input[type='text'],
+body.uber-frame header button {
+  margin: 0;
+}
+
+body.uber-frame header > h1 {
+  margin: 0;
+  padding: 21px 0 13px;
+}
+
+/* Create a border under the h1 (but before anything that gets appended
+ * to the end of the header, such as the managed prefs banner). */
+body.uber-frame header > h1::after {
+  -webkit-margin-end: 20px;
+  background-color: #eee;
+  content: ' ';
+  display: block;
+  height: 1px;
+  position: relative;
+  top: 13px;
+}
+
+body.uber-frame footer {
+  border-top: 1px solid #eee;
+  margin-top: 16px;
+  /* min-width and max-width should match the header */
+  max-width: 638px;
+  min-width: 600px;
+  padding: 8px 0;
+}
+
+/* Sections are used in options pages, help page and history page. This defines
+ * the section metrics to match the header metrics above. */
+body.uber-frame section {
+  -webkit-padding-start: 18px;
+  margin-bottom: 24px;
+  margin-top: 8px;
+  max-width: 600px;
+}
+
+body.uber-frame section:last-of-type {
+  margin-bottom: 0;
+}
+
+body.uber-frame section > h3 {
+  -webkit-margin-start: -18px;
+}
+
+body.uber-frame section > div:only-of-type {
+  -webkit-box-flex: 1;
+}
+
+/* Styles for a hideable notification banner at the top of a page.
+ * See the Options page .managed-prefs-banner for a usage example. */
+.page.showing-banner {
+  margin-top: 45px;
+}
+
+.page-banner {
+  background-color: white;
+  width: 100%;
+  z-index: 2;
+}
+
+.page:not(.showing-banner) .page-banner {
+  display: none;
+}
+
+.page-banner-gradient {
+  background: -webkit-linear-gradient(rgb(255, 242, 183),
+                                      rgb(250, 230, 145));
+  border: 1px solid rgb(201, 189, 141);
+  border-radius: 3px;
+  height: 25px;
+  margin: 9px 9px 0 9px;
+}
+
+.page-banner .page-banner-gradient {
+  -webkit-margin-end: 20px;
+  -webkit-margin-start: 0;
+  margin-bottom: 9px;
+}
+
+.page-banner-text {
+  background-image: url('chrome://theme/IDR_MANAGED');
+  background-position: 5px center;
+  background-repeat: no-repeat;
+  display: block;
+  line-height: 24px;
+  padding-left: 26px;
+}
+
+.page-banner.clickable:active .page-banner-text {
+  background: -webkit-linear-gradient(rgb(250, 230, 145),
+                                      rgb(255, 242, 183));
+}
diff --git a/chrome/common/extensions/docs/examples/api/fontSettings/css/widgets.css b/chrome/common/extensions/docs/examples/api/fontSettings/css/widgets.css
new file mode 100644
index 0000000..1713df2
--- /dev/null
+++ b/chrome/common/extensions/docs/examples/api/fontSettings/css/widgets.css
@@ -0,0 +1,305 @@
+/* Copyright (c) 2012 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 defines styles for form controls. The order of rule blocks is
+ * important as there are some rules with equal specificity that rely on order
+ * as a tiebreaker. These are marked with OVERRIDE.
+ */
+
+/* Default state **************************************************************/
+
+:-webkit-any(button,
+             input[type='button'],
+             input[type='submit']):not(.custom-appearance):not(.link-button),
+select,
+input[type='checkbox'],
+input[type='radio'] {
+  -webkit-appearance: none;
+  -webkit-user-select: none;
+  background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  border-radius: 2px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08),
+      inset 0 1px 2px rgba(255, 255, 255, 0.75);
+  color: #444;
+  font: inherit;
+  margin: 0 1px 0 0;
+  text-shadow: 0 1px 0 rgb(240, 240, 240);
+}
+
+:-webkit-any(button,
+             input[type='button'],
+             input[type='submit']):not(.custom-appearance):not(.link-button),
+select {
+  min-height: 2em;
+  min-width: 4em;
+<if expr="is_win">
+  /* The following platform-specific rule is necessary to get adjacent
+   * buttons, text inputs, and so forth to align on their borders while also
+   * aligning on the text's baselines. */
+  padding-bottom: 1px;
+</if>
+}
+
+:-webkit-any(button,
+             input[type='button'],
+             input[type='submit']):not(.custom-appearance):not(.link-button) {
+  -webkit-padding-end: 10px;
+  -webkit-padding-start: 10px;
+}
+
+select {
+  -webkit-appearance: none;
+  -webkit-padding-end: 20px;
+  -webkit-padding-start: 6px;
+  /* OVERRIDE */
+  background-image: url('../images/select.png'),
+      -webkit-linear-gradient(#ededed, #ededed 38%, #dedede);
+  background-position: right center;
+  background-repeat: no-repeat;
+}
+
+html[dir='rtl'] select {
+  background-position: center left;
+}
+
+input[type='checkbox'] {
+  bottom: 2px;
+  height: 13px;
+  position: relative;
+  vertical-align: middle;
+  width: 13px;
+}
+
+input[type='radio'] {
+  /* OVERRIDE */
+  border-radius: 100%;
+  bottom: 3px;
+  height: 15px;
+  position: relative;
+  vertical-align: middle;
+  width: 15px;
+}
+
+/* TODO(estade): add more types here? */
+input[type='password'],
+input[type='search'],
+input[type='text'],
+input[type='url'],
+input:not([type]),
+textarea {
+  border: 1px solid #bfbfbf;
+  border-radius: 2px;
+  box-sizing: border-box;
+  color: #444;
+  font: inherit;
+  margin: 0;
+  /* Use min-height to accommodate addditional padding for touch as needed. */
+  min-height: 2em;
+  padding: 3px;
+<if expr="is_win or is_macosx">
+  /* For better alignment between adjacent buttons and inputs. */
+  padding-bottom: 4px;
+</if>
+}
+
+input[type='search'] {
+  -webkit-appearance: textfield;
+  /* NOTE: Keep a relatively high min-width for this so we don't obscure the end
+   * of the default text in relatively spacious languages (i.e. German). */
+  min-width: 160px;
+}
+
+/* Checked ********************************************************************/
+
+input[type='checkbox']:checked::before {
+  -webkit-user-select: none;
+  background-image: url('../images/check.png');
+  background-size: 100% 100%;
+  content: '';
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+html[dir='rtl'] input[type='checkbox']:checked::before {
+  -webkit-transform: scaleX(-1);
+}
+
+input[type='radio']:checked::before {
+  background-color: #666;
+  border-radius: 100%;
+  bottom: 3px;
+  content: '';
+  display: block;
+  left: 3px;
+  position: absolute;
+  right: 3px;
+  top: 3px;
+}
+
+/* Hover **********************************************************************/
+
+:enabled:hover:-webkit-any(
+    select,
+    input[type='checkbox'],
+    input[type='radio'],
+    :-webkit-any(
+        button,
+        input[type='button'],
+        input[type='submit']):not(.custom-appearance):not(.link-button)) {
+  background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
+  border-color: rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12),
+      inset 0 1px 2px rgba(255, 255, 255, 0.95);
+  color: black;
+}
+
+:enabled:hover:-webkit-any(select) {
+  /* OVERRIDE */
+  background-image: url('../images/select.png'),
+      -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0);
+}
+
+/* Active *********************************************************************/
+
+:enabled:active:-webkit-any(
+    select,
+    input[type='checkbox'],
+    input[type='radio'],
+    :-webkit-any(
+        button,
+        input[type='button'],
+        input[type='submit']):not(.custom-appearance):not(.link-button)) {
+  background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
+  box-shadow: none;
+  text-shadow: none;
+}
+
+:enabled:active:-webkit-any(select) {
+  /* OVERRIDE */
+  background-image: url('../images/select.png'),
+      -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7);
+}
+
+/* Disabled *******************************************************************/
+
+:disabled:-webkit-any(
+    button,
+    input[type='button'],
+    input[type='submit']):not(.custom-appearance):not(.link-button),
+select:disabled {
+  background-image: -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
+  border-color: rgba(80, 80, 80, 0.2);
+  box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08),
+      inset 0 1px 2px rgba(255, 255, 255, 0.75);
+  color: #aaa;
+}
+
+select:disabled {
+  /* OVERRIDE */
+  background-image: url('../images/disabled_select.png'),
+      -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6);
+}
+
+input:disabled:-webkit-any([type='checkbox'],
+                           [type='radio']) {
+  opacity: .75;
+}
+
+input:disabled:-webkit-any([type='password'],
+                           [type='search'],
+                           [type='text'],
+                           [type='url'],
+                           :not([type])) {
+  color: #999;
+}
+
+/* Focus **********************************************************************/
+
+:enabled:focus:-webkit-any(
+    select,
+    input[type='checkbox'],
+    input[type='password'],
+    input[type='radio'],
+    input[type='search'],
+    input[type='text'],
+    input[type='url'],
+    input:not([type]),
+    :-webkit-any(
+         button,
+         input[type='button'],
+         input[type='submit']):not(.custom-appearance):not(.link-button)) {
+  /* OVERRIDE */
+  -webkit-transition: border-color 200ms;
+  /* We use border color because it follows the border radius (unlike outline).
+   * This is particularly noticeable on mac. */
+  border-color: rgb(77, 144, 254);
+  outline: none;
+}
+
+/* Link buttons ***************************************************************/
+
+.link-button {
+  -webkit-box-shadow: none;
+  background: transparent none;
+  border: none;
+  color: rgb(17, 85, 204);
+  cursor: pointer;
+  /* Input elements have -webkit-small-control which can override the body font.
+   * Resolve this by using 'inherit'. */
+  font: inherit;
+  margin: 0;
+  padding: 0 4px;
+}
+
+.link-button:hover {
+  text-decoration: underline;
+}
+
+.link-button:active {
+  color: rgb(5, 37, 119);
+  text-decoration: underline;
+}
+
+.link-button[disabled] {
+  color: #999;
+  cursor: default;
+  text-decoration: none;
+}
+
+/* Checkbox/radio helpers ******************************************************
+ *
+ * .checkbox and .radio classes wrap labels. Checkboxes and radios should use
+ * these classes with the markup structure:
+ *
+ *   <div class="checkbox">
+ *     <label>
+ *       <input type="checkbox"></input>
+ *       <span>
+ *     </label>
+ *   </div>
+ */
+
+:-webkit-any(.checkbox, .radio) label {
+  /* Don't expand horizontally: <http://crbug.com/112091>. */
+  display: -webkit-inline-box;
+  padding-bottom: 7px;
+  padding-top: 7px;
+}
+
+:-webkit-any(.checkbox, .radio) label input ~ span {
+  -webkit-margin-start: 0.6em;
+  /* Make sure long spans wrap at the same horizontal position they start. */
+  display: block;
+}
+
+:-webkit-any(.checkbox, .radio) label:hover {
+  color: black;
+}
+
+label > input:disabled:-webkit-any([type='checkbox'], [type='radio']) ~ span {
+  color: #999;
+}
diff --git a/chrome/common/extensions/docs/examples/api/fontSettings/images/select.png b/chrome/common/extensions/docs/examples/api/fontSettings/images/select.png
new file mode 100644
index 0000000..bacfe90
--- /dev/null
+++ b/chrome/common/extensions/docs/examples/api/fontSettings/images/select.png
diff --git a/chrome/common/extensions/docs/examples/api/fontSettings/options.html b/chrome/common/extensions/docs/examples/api/fontSettings/options.html
index 6116315..6e3c4b2 100644
--- a/chrome/common/extensions/docs/examples/api/fontSettings/options.html
+++ b/chrome/common/extensions/docs/examples/api/fontSettings/options.html
@@ -4,22 +4,30 @@
   <meta charset="utf-8">
   <title>Font Settings Sample Extension</title>
   <script src="options.js"></script>
+  <link rel="stylesheet" href="css/chrome_shared.css">
+  <link rel="stylesheet" href="css/widgets.css">
+  <link rel="stylesheet" href="css/uber_shared.css">
   <style>
+    body.uber-frame {
+      font-family: sans-serif;
+      -webkit-margin-start: 30px;
+    }
+
     .font-setting-container {
-      -webkit-box-flex: 1;
       display: -webkit-box;
     }
 
     .font-input-div {
-      -webkit-margin-end: 1em;
-      margin-left: 10px;
+      -webkit-margin-end: 3em;
+      width: 12em;
     }
   </style>
 </head>
-<body>
+<body class="uber-frame">
   <div style="min-width: 600px;">
-  <h3>Font Settings Sample Extension</h3>
-    <div>Script</div>
+    <h1>Font Settings Sample Extension</h1>
+    <section>
+    <h3>Script</h3>
     <div>
     <select id="scriptList">
       <option value="Zyyy">Default</option>
@@ -57,7 +65,8 @@
     </select>
     </div>
     <div style="margin-left: 20px; overflow-x: auto;">
-      <div>Standard</div>
+      <section>
+      <h3>Standard</h3>
       <div class="font-setting-container">
         <div class="font-input-div">
           <select id="standardFontList"></select>
@@ -66,7 +75,9 @@
           Lorem ipsum dolor sit amat.
         </div>
       </div>
-      <div>Serif</div>
+      </section>
+      <section>
+      <h3>Serif</h3>
       <div class="font-setting-container">
         <div class="font-input-div">
           <select id="serifFontList"></select>
@@ -75,7 +86,9 @@
           Lorem ipsum dolor sit amat.
         </div>
       </div>
-      <div>Sans-Serif</div>
+      </section>
+      <section>
+      <h3>Sans-Serif</h3>
       <div class="font-setting-container">
         <div class="font-input-div">
           <select id="sansSerifFontList"></select>
@@ -84,7 +97,9 @@
           Lorem ipsum dolor sit amat.
         </div>
       </div>
-      <div>Fixed</div>
+      </section>
+      <section>
+      <h3>Fixed</h3>
       <div class="font-setting-container">
         <div class="font-input-div">
           <select id="fixedFontList"></select>
@@ -93,21 +108,37 @@
           Lorem ipsum dolor sit amat.
         </div>
       </div>
+      </section>
+    </div>
+    </section>
+    <section>
+    <h3>Default Font Size</h3>
+    <div class="font-setting-container">
+      <div class="font-input-div"><input type="text" id="defaultFontSize"></div>
     </div>
-    <div class="font-setting-container">Default Font Size</div>
-    <div class="font-input-div"><input type="text" id="defaultFontSize"></div>
-    <div class="font-setting-container">Default Fixed Font Size</div>
-    <div class="font-input-div">
-      <input type="text" id="defaultFixedFontSize">
+    </section>
+    <section>
+    <h3>Default Fixed Font Size</h3>
+    <div class="font-setting-container">
+      <div class="font-input-div">
+        <input type="text" id="defaultFixedFontSize">
+      </div>
     </div>
-    <div>Minimum Font Size</div>
+    </section>
+    <section>
+    <h3>Minimum Font Size</h3>
     <div class="font-setting-container">
       <div class="font-input-div"><input type="text" id="minFontSize"></div>
       <div id="minFontSample" style="font-family: standard; font-size: 1px;">
         Lorem ipsum dolor sit amat.
       </div>
     </div>
-    <button id="clearButton">Clear All Settings</button>
+    </section>
+    <section>
+    <h3>
+      <button id="clearButton">Clear All Settings</button>
+    </h3>
+    </section>
   </div>
 </div>
 </body>
diff --git a/chrome/common/extensions/docs/examples/api/fontSettings/options.js b/chrome/common/extensions/docs/examples/api/fontSettings/options.js
index 1741903..dd3af05 100644
--- a/chrome/common/extensions/docs/examples/api/fontSettings/options.js
+++ b/chrome/common/extensions/docs/examples/api/fontSettings/options.js
@@ -16,7 +16,8 @@ var sampleTextDivIds = [
   'standardFontSample',
   'serifFontSample',
   'sansSerifFontSample',
-  'fixedFontSample'
+  'fixedFontSample',
+  'minFontSample'
 ];
 
 var defaultSampleText = 'Lorem ipsum dolor sit amat.';