Standardize size of WebUI controls for touch and non-touch.

BUG=139834


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

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

chrome/browser/resources/bookmark_manager/css/bmm.css

@@ -22,6 +22,7 @@ list > * {
   -webkit-padding-start: 3px;
   color: hsl(0, 0%, 70%);
   display: -webkit-box;
+  line-height: 30px;
   padding-bottom: 0;
   padding-top: 0;
   text-decoration: none;

chrome/browser/resources/options2/browser_options.css

@@ -414,3 +414,12 @@ html[dir=rtl] .network-menu-item {
   -webkit-transition: height 200ms;
   overflow-y: hidden;
 }
+
+#keyboard-overlay .option-value > select {
+  width: 100%;
+}
+
+#keyboard-overlay table {
+  /* Same as .settings-row {margin}. */
+  -webkit-border-vertical-spacing: 0.65em;
+}

chrome/browser/resources/options2/browser_options.html

@@ -29,7 +29,7 @@
 </if>
   <section>
     <h3 i18n-content="sectionTitleAppearance"></h3>
-    <div>
+    <div class="settings-row">
 <if expr="pp_ifdef('chromeos') and pp_ifdef('use_ash')">
       <button id="set-wallpaper" i18n-content="setWallpaper"
           guest-visibility="disabled"></button>
@@ -199,12 +199,12 @@
         <button id="privacyClearDataButton"
             i18n-content="privacyClearDataButton"></button>
       </div>
-      <div id="privacy-explanation" class="settings-row">
+      <p id="privacy-explanation" class="settings-row">
         <span i18n-content="improveBrowsingExperience"></span>
         <span i18n-content="disableWebServices"></span>
         <a target="_blank" i18n-content="learnMore"
             i18n-values="href:privacyLearnMoreURL"></a>
-      </div>
+      </p>
       <div class="checkbox">
         <label>
           <input id="alternateErrorPagesEnabled"
@@ -385,8 +385,10 @@
   <section>
     <h3 i18n-content="advancedSectionTitleLanguages"></h3>
     <span class="settings-row" i18n-content="languageSectionLabel"></span>
-    <button id="language-button"
-        i18n-content="languageAndSpellCheckSettingsButton"></button>
+    <div class="settings-row">
+      <button id="language-button"
+          i18n-content="languageAndSpellCheckSettingsButton"></button>
+    </div>
     <div class="checkbox">
       <label>
         <input id="enableTranslate" pref="translate.enabled"
@@ -459,8 +461,8 @@
     <section id="cloud-print-connector-section">
       <h3 i18n-content="advancedSectionTitleCloudPrint"></h3>
       <div>
-        <span id="cloudPrintConnectorLabel" class="settings-row"
-             i18n-content="cloudPrintConnectorDisabledLabel"></span>
+        <p id="cloudPrintConnectorLabel" class="settings-row"
+             i18n-content="cloudPrintConnectorDisabledLabel"></p>
         <div class="settings-row">
           <button id="cloudPrintConnectorSetupButton"
               i18n-content="cloudPrintConnectorDisabledButton"></button>

chrome/browser/resources/options2/chromeos/language_pinyin_options.html

@@ -6,7 +6,7 @@
       <tr>
         <td class="option-name" colspan="2">
           <div class="checkbox">
-            <labl>
+            <label>
               <input id="pinyin-correct-pinyin"
                   pref="settings.language.pinyin_correct_pinyin"
                   type="checkbox">

chrome/browser/resources/options2/content_settings.css

@@ -53,7 +53,9 @@ select.exception-setting {
 }
 
 #disable-plugins-container {
-  margin: 7px 0;
+  /* Same as .checkbox and .radio padding. Using padding instead of margin
+   * to ensure minimum height for tap target. */
+  padding: 7px 0;
 }
 
 div[role='listitem'][managedby] {

chrome/browser/resources/options2/content_settings.html

@@ -42,12 +42,14 @@
                 class="clear-plugin-lso-data-disabled"></span>
           </label>
         </div>
-        <button class="exceptions-list-button" contentType="cookies"
-            i18n-content="manage_exceptions"></button>
-        <button id="show-cookies-button"
-            i18n-content="cookies_show_cookies"></button>
-        <button id="show-app-cookies-button"
-            i18n-content="cookies_show_app_cookies"></button>
+        <div class="settings-row">
+          <button class="exceptions-list-button" contentType="cookies"
+              i18n-content="manage_exceptions"></button>
+          <button id="show-cookies-button"
+              i18n-content="cookies_show_cookies"></button>
+          <button id="show-app-cookies-button"
+              i18n-content="cookies_show_app_cookies"></button>
+        </div>
      </div>
     </section>
     <!-- Image filter -->
@@ -66,8 +68,10 @@
             <span i18n-content="images_block"></span>
           </label>
         </div>
-        <button class="exceptions-list-button" contentType="images"
-            i18n-content="manage_exceptions"></button>
+        <div class="settings-row">
+          <button class="exceptions-list-button" contentType="images"
+              i18n-content="manage_exceptions"></button>
+        </div>
       </div>
     </section>
     <!-- JavaScript filter -->
@@ -86,8 +90,10 @@
             <span i18n-content="javascript_block"></span>
           </label>
         </div>
-        <button class="exceptions-list-button" contentType="javascript"
-            i18n-content="manage_exceptions"></button>
+        <div class="settings-row">
+          <button class="exceptions-list-button" contentType="javascript"
+              i18n-content="manage_exceptions"></button>
+        </div>
       </div>
     </section>
     <!-- Handlers settings -->
@@ -108,8 +114,10 @@
             <span i18n-content="handlers_block"></span>
           </label>
         </div>
-        <button id="manage-handlers-button" contentType="handlers"
-            i18n-content="manage_handlers"></button>
+        <div class="settings-row">
+          <button id="manage-handlers-button" contentType="handlers"
+              i18n-content="manage_handlers"></button>
+        </div>
       </div>
     </section>
     <!-- Plug-ins filter -->
@@ -134,8 +142,10 @@
             <span i18n-content="plugins_block"></span>
           </label>
         </div>
-        <button class="exceptions-list-button" contentType="plugins"
-            i18n-content="manage_exceptions"></button>
+        <div class="settings-row">
+          <button class="exceptions-list-button" contentType="plugins"
+              i18n-content="manage_exceptions"></button>
+        </div>
         <div id="disable-plugins-container">
           <a href="chrome://plugins" i18n-content="disableIndividualPlugins"
               target="_blank"></a>
@@ -158,8 +168,10 @@
             <span i18n-content="popups_block"></span>
           </label>
         </div>
-        <button class="exceptions-list-button" contentType="popups"
-            i18n-content="manage_exceptions"></button>
+        <div class="settings-row">
+          <button class="exceptions-list-button" contentType="popups"
+              i18n-content="manage_exceptions"></button>
+        </div>
       </div>
     </section>
     <!-- Location filter -->
@@ -184,8 +196,10 @@
             <span i18n-content="location_block"></span>
           </label>
         </div>
-        <button class="exceptions-list-button" contentType="location"
-            i18n-content="manage_exceptions"></button>
+        <div class="settings-row">
+          <button class="exceptions-list-button" contentType="location"
+              i18n-content="manage_exceptions"></button>
+        </div>
       </div>
     </section>
     <!-- Notifications filter tab contents -->
@@ -210,14 +224,16 @@
             <span i18n-content="notifications_block"></span>
           </label>
         </div>
-        <button class="exceptions-list-button" contentType="notifications"
-            i18n-content="manage_exceptions"></button>
+        <div class="settings-row">
+          <button class="exceptions-list-button" contentType="notifications"
+              i18n-content="manage_exceptions"></button>
+        </div>
       </div>
     </section>
     <!-- Fullscreen filter -->
     <section>
       <h3 i18n-content="fullscreen_tab_label"></h3>
-      <div>
+      <div class="settings-row">
         <button class="exceptions-list-button" contentType="fullscreen"
             i18n-content="manage_exceptions"></button>
       </div>
@@ -244,8 +260,10 @@
             <span i18n-content="mouselock_block"></span>
           </label>
         </div>
-        <button class="exceptions-list-button" contentType="mouselock"
-            i18n-content="manage_exceptions"></button>
+        <div class="settings-row">
+          <button class="exceptions-list-button" contentType="mouselock"
+              i18n-content="manage_exceptions"></button>
+        </div>
       </div>
     </section>
     <!-- Intent registration filter -->
@@ -275,9 +293,11 @@
             <span i18n-content="pepperFlashCameramicBlock"></span>
           </label>
         </div>
-        <button class="exceptions-list-button"
-            contentType="pepper-flash-cameramic"
-            i18n-content="manage_exceptions"></button>
+        <div class="settings-row">
+          <button class="exceptions-list-button"
+              contentType="pepper-flash-cameramic"
+              i18n-content="manage_exceptions"></button>
+        </div>
       </div>
     </section>
 <if expr="pp_ifdef('chromeos')">
@@ -314,13 +334,15 @@
             <span i18n-content="mediaStreamBlock"></span>
           </label>
         </div>
-        <button class="exceptions-list-button" contentType="media-stream"
-            i18n-content="manage_exceptions"></button>
+        <div class="settings-row">
+          <button class="exceptions-list-button" contentType="media-stream"
+              i18n-content="manage_exceptions"></button>
+        </div>
       </div>
     </section>
     <section id="media-galleries-section" hidden>
       <h3 i18n-content="mediaGalleriesSectionLabel"></h3>
-      <div>
+      <div class="settings-row">
         <button id="manage-galleries-button"
             i18n-content="manageGalleriesButton"></button>
       </div>

chrome/browser/resources/options2/language_options.css

@@ -32,6 +32,7 @@
 
 .language-options-header,
 .language-options-footer {
+  line-height: 1.2em;
   margin: 10px 0;
 }
 
@@ -81,6 +82,9 @@
 #language-options-input-method-list button {
   -webkit-margin-start: 20px;
   display: block;
+  /* Same margin as .settings-row. */
+  margin-bottom: 0.65em;
+  margin-top: 0.65em;
 }
 
 #language-options-list {
@@ -130,6 +134,11 @@
   -webkit-column-gap: 20px;
 }
 
+#add-language-overlay-language-list > li > button.link-button {
+  padding-bottom: 8px;
+  padding-top: 8px;
+}
+
 #add-language-overlay-page {
   width: 800px;
 }

chrome/browser/resources/options2/search_engine_manager.css

@@ -17,7 +17,8 @@
 
 .search-engine-list .favicon {
   height: 16px;
-  padding: 1px 7px 0 7px;
+  line-height: 16px;
+  padding: 0 7px;
   width: 16px;
 }
 
@@ -66,7 +67,7 @@
 
 .search-engine-list .url-column .list-inline-button {
   margin-top: 0;
-  padding: 1px 6px;
+  padding: 1px 6px 2px 6px;
 }
 
 .search-engine-list > :not(:hover):not([editing]) .url-column

chrome/browser/resources/shared/css/chrome_shared.css

@@ -104,53 +104,3 @@ html[dir='rtl'] input.weakrtl::-webkit-input-placeholder,
 html[dir='rtl'] .weakrtl input::-webkit-input-placeholder {
   direction: rtl;
 }
-
-/* Rules to make it easier to hit targets when using a coarse pointer like
- * a touch screen.
- */
-@media (pointer:coarse) {
-  list input[type='input'],
-  list input[type='password'],
-  list input[type='search'],
-  list input[type='text'],
-  list input[type='url'] {
-    margin: 0;
-    padding: 3px 3px 2px 3px;
-  }
-
-  /* Margins are not touchable.  Use padding on the inner label instead to
-    increase the size of the touch target. */
-  .checkbox,
-  .radio {
-    margin: 0;
-  }
-
-  .checkbox label,
-  .radio label {
-    padding-bottom: 7px;
-    padding-top: 7px;
-  }
-
-  li > button.link-button {
-    padding-bottom: 8px;
-    padding-top: 8px;
-  }
-
-  :-webkit-any(button,
-               input[type='button'],
-               input[type='submit'],
-               select):not(.custom-appearance):not(.link-button) {
-    margin-bottom: 6px;
-    margin-top: 6px;
-  }
-
-  list :-webkit-any(
-      button,
-      input[type='button'],
-      input[type='submit'],
-      select):not(.custom-appearance):not(.link-button) {
-    margin: 0;
-    padding-bottom: 0;
-    padding-top: 3px;
-  }
-}

chrome/browser/resources/shared/css/list.css

@@ -91,6 +91,22 @@ grid > .spacer {
   visibility: hidden;
 }
 
+list :-webkit-any(
+    input[type='input'],
+    input[type='password'],
+    input[type='search'],
+    input[type='text'],
+    input[type='url']),
+list :-webkit-any(
+    button,
+    input[type='button'],
+    input[type='submit'],
+    select):not(.custom-appearance):not(.link-button) {
+  line-height: normal;
+  margin: 0;
+  vertical-align: middle;
+}
+
 list > [hidden],
 grid > [hidden] {
   display: none;

chrome/browser/resources/shared/css/tree.css

@@ -16,18 +16,12 @@ tree {
   border-radius: 2px;
   color: black;
   cursor: default;
-  line-height: 20px;
+  line-height: 28px;
   padding: 0 3px;
   position: relative;
   white-space: nowrap;
 }
 
-@media (pointer:coarse) {
-  .tree-item > .tree-row {
-    line-height: 40px;
-  }
-}
-
 .expand-icon {
   -webkit-transform: rotate(-90deg);
   -webkit-transition: all 150ms;
@@ -38,17 +32,11 @@ tree {
   height: 16px;
   opacity: .6;
   position: relative;
-  top: 2px;
+  top: 6px;
   vertical-align: top;
   width: 16px;
 }
 
-@media (pointer:coarse) {
-  .expand-icon {
-    vertical-align: text-top;
-  }
-}
-
 html[dir=rtl] .expand-icon {
   -webkit-transform: rotate(90deg);
 }

chrome/browser/resources/shared/css/widgets.css

@@ -35,10 +35,6 @@ input[type='radio'] {
 select {
   min-height: 2em;
   min-width: 4em;
-<if expr="pp_ifdef('chromeos')">
-  /* Without this rule, chromeos button text is too high on the button. */
-  padding-top: 3px;
-</if>
 <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
@@ -107,10 +103,6 @@ textarea {
   /* For better alignment between adjacent buttons and inputs. */
   padding-bottom: 4px;
 </if>
-<if expr="pp_ifdef('chromeos')">
-  /* For better alignment between adjacent buttons and inputs. */
-  padding-bottom: 2px;
-</if>
 }
 
 input[type='search'] {
@@ -291,14 +283,11 @@ input:disabled:-webkit-any([type='password'],
  *   </div>
  */
 
-.checkbox,
-.radio {
-  margin: 0.65em 0;
-}
-
 :-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 {