WebUI: Replace image based legacy blue/white buttons with CSS.

These buttons were implemented mostly with the border-image CSS property
and reused images that were shared between WebUI and Views. Views no longer
uses those images. Instead replacing with a full CSS implementation (without
using border-image), allows removing those images.

The images are no longer used anywhere after this CL, and will be fully
removed in follow up CL.

Bug: 522168
Test: Open the feedback app. Cancel and Send buttons should look identical (AFAICT) as before.
Change-Id: I6a5d9625f1f042b1fb99a4247b523215f291fc34
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1639341
Auto-Submit: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Michael Giuffrida <michaelpg@chromium.org>
Commit-Queue: Michael Giuffrida <michaelpg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#666137}

chrome/browser/resources/chromeos/first_run/app/main.html

@@ -8,7 +8,6 @@
     <link rel="stylesheet" href="chrome://resources/css/apps/common.css">
     <link rel="stylesheet" href="chrome://resources/css/apps/topbutton_bar.css">
     <link rel="stylesheet" href="../step.css">
-    <link rel="stylesheet" href="../preload.css">
     <link rel="stylesheet" href="style.css">
     <script src="chrome://resources/js/load_time_data.js"></script>
     <script src="chrome://resources/js/util.js"></script>

chrome/browser/resources/chromeos/first_run/first_run.html

@@ -8,7 +8,6 @@
     <link rel="stylesheet" href="chrome://resources/css/apps/common.css">
     <link rel="stylesheet" href="bubble.css">
     <link rel="stylesheet" href="first_run.css">
-    <link rel="stylesheet" href="preload.css">
     <link rel="stylesheet" href="step.css">
     <link rel="stylesheet" href="step_bubble.css">
     <script src="chrome://resources/js/cr.js"></script>

chrome/browser/resources/chromeos/first_run/preload.css

-/* Copyright 2014 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. */
-
-/* Preloads images. Without preloading, background image starts loading in
- * the moment when CSS property is applied. Image loading has visible delay and
- * looks like defect. */
-
-@media all and (-webkit-max-device-pixel-ratio: 1.5) {
-  body::after {
-    content:
-        url(chrome://resources/images/apps/button.png)
-        url(chrome://resources/images/apps/button_hover.png)
-        url(chrome://resources/images/apps/button_pressed.png)
-        url(chrome://resources/images/apps/button_focused.png)
-        url(chrome://resources/images/apps/button_focused_hover.png)
-        url(chrome://resources/images/apps/button_focused_pressed.png)
-        url(chrome://resources/images/apps/button_inactive.png)
-        url(chrome://resources/images/apps/blue_button.png)
-        url(chrome://resources/images/apps/blue_button_hover.png)
-        url(chrome://resources/images/apps/blue_button_pressed.png)
-        url(chrome://resources/images/apps/blue_button_focused.png)
-        url(chrome://resources/images/apps/blue_button_focused_hover.png)
-        url(chrome://resources/images/apps/blue_button_focused_pressed.png)
-        url(chrome://resources/images/apps/blue_button_inactive.png);
-    display: none;
-  }
-}
-
-@media all and (-webkit-min-device-pixel-ratio: 1.5) {
-  body::after {
-    content:
-        url(chrome://resources/images/2x/apps/button.png)
-        url(chrome://resources/images/2x/apps/button_hover.png)
-        url(chrome://resources/images/2x/apps/button_pressed.png)
-        url(chrome://resources/images/2x/apps/button_focused.png)
-        url(chrome://resources/images/2x/apps/button_focused_hover.png)
-        url(chrome://resources/images/2x/apps/button_focused_pressed.png)
-        url(chrome://resources/images/2x/apps/button_inactive.png)
-        url(chrome://resources/images/2x/apps/blue_button.png)
-        url(chrome://resources/images/2x/apps/blue_button_hover.png)
-        url(chrome://resources/images/2x/apps/blue_button_pressed.png)
-        url(chrome://resources/images/2x/apps/blue_button_focused.png)
-        url(chrome://resources/images/2x/apps/blue_button_focused_hover.png)
-        url(chrome://resources/images/2x/apps/blue_button_focused_pressed.png)
-        url(chrome://resources/images/2x/apps/blue_button_inactive.png);
-    display: none;
-  }
-}

ui/webui/resources/css/apps/common.css

@@ -4,7 +4,8 @@
 
 button.white-button,
 button.blue-button {
-  border: 5px solid transparent;
+  border: 1px solid transparent;
+  border-radius: 2px;
   box-sizing: content-box;
   cursor: default;
   font-size: 14px;
@@ -14,106 +15,50 @@ button.blue-button {
   min-height: 21px;
   min-width: 55px;
   outline: none;
-  padding: 0 10px;
+  padding: 4px 14px;
   position: relative;
   text-align: center;
   z-index: 1;
 }
 
-button.white-button {
-  border-image: -webkit-image-set(
-    url(chrome://resources/images/apps/button.png) 1x,
-    url(chrome://resources/images/2x/apps/button.png)
-        2x) 5 fill / 5px / 2px repeat;
-}
-
-button.white-button:hover {
-  border-image: -webkit-image-set(
-    url(chrome://resources/images/apps/button_hover.png) 1x,
-    url(chrome://resources/images/2x/apps/button_hover.png)
-        2x) 5 fill / 5px / 2px repeat;
-}
-
-button.white-button:active {
-  border-image: -webkit-image-set(
-    url(chrome://resources/images/apps/button_pressed.png) 1x,
-    url(chrome://resources/images/2x/apps/button_pressed.png)
-        2x) 5 fill / 5px / 2px repeat;
+button.white-button[disabled] {
+  border-color: #c6c6c6;
 }
 
+button.white-button:focus:active,
 button.white-button:focus {
-  border-image: -webkit-image-set(
-    url(chrome://resources/images/apps/button_focused.png) 1x,
-    url(chrome://resources/images/2x/apps/button_focused.png)
-        2x) 5 fill / 5px / 2px repeat;
-}
-
-button.white-button:focus:hover {
-  border-image: -webkit-image-set(
-    url(chrome://resources/images/apps/button_focused_hover.png) 1x,
-    url(chrome://resources/images/2x/apps/button_focused_hover.png)
-        2x) 5 fill / 5px / 2px repeat;
+  border-color: rgb(62, 126, 248);
 }
 
-button.white-button:focus:active {
-  border-image: -webkit-image-set(
-    url(chrome://resources/images/apps/button_focused_pressed.png) 1x,
-    url(chrome://resources/images/2x/apps/button_focused_pressed.png)
-        2x) 5 fill / 5px / 2px repeat;
+button.white-button:active {
+  background-color: #e6e6e6;
+  border-color: #a6a6a6;
 }
 
-button.white-button[disabled] {
-  border-image: -webkit-image-set(
-    url(chrome://resources/images/apps/button_inactive.png) 1x,
-    url(chrome://resources/images/2x/apps/button_inactive.png)
-        2x) 5 fill / 5px / 2px repeat;
+button.white-button {
+  background-color: #f9f9f9;
+  border-color: #a4a4a4;
 }
 
 button.blue-button {
-  border-image: -webkit-image-set(
-    url(chrome://resources/images/apps/blue_button.png) 1x,
-    url(chrome://resources/images/2x/apps/blue_button.png)
-        2x) 5 fill / 5px / 2px repeat;
+  background-color: rgb(90, 151, 255);
+  border-color: rgb(43, 103, 206);
 }
 
 button.blue-button:hover {
-  border-image: -webkit-image-set(
-    url(chrome://resources/images/apps/blue_button_hover.png) 1x,
-    url(chrome://resources/images/2x/apps/blue_button_hover.png)
-        2x) 5 fill / 5px / 2px repeat;
+  background-color: rgb(98, 156, 255);
 }
 
 button.blue-button:active {
-  border-image: -webkit-image-set(
-    url(chrome://resources/images/apps/blue_button_pressed.png) 1x,
-    url(chrome://resources/images/2x/apps/blue_button_pressed.png)
-        2x) 5 fill / 5px / 2px repeat;
+  background-color: rgb(66, 121, 216);
+  border-color: rgb(35, 82, 162);
 }
 
 button.blue-button:focus {
-  border-image: -webkit-image-set(
-    url(chrome://resources/images/apps/blue_button_focused.png) 1x,
-    url(chrome://resources/images/2x/apps/blue_button_focused.png)
-        2x) 5 fill / 5px / 2px repeat;
-}
-
-button.blue-button:focus:hover {
-  border-image: -webkit-image-set(
-    url(chrome://resources/images/apps/blue_button_focused_hover.png) 1x,
-    url(chrome://resources/images/2x/apps/blue_button_focused_hover.png)
-        2x) 5 fill / 5px / 2px repeat;
-}
-
-button.blue-button:focus:active {
-  border-image: -webkit-image-set(
-    url(chrome://resources/images/apps/blue_button_focused_pressed.png) 1x,
-    url(chrome://resources/images/2x/apps/blue_button_focused_pressed.png)
-        2x) 5 fill / 5px / 2px repeat;
+  box-shadow: 0 0 0 1px inset rgb(173, 204, 255);
 }
 
 button.blue-button[disabled] {
-  border-image: -webkit-image-set(
-    url(chrome://resources/images/apps/blue_button_inactive.png) 1x,
-    url(chrome://resources/images/2x/apps/blue_button_inactive.png)
-        2x) 5 fill / 5px / 2px repeat;
+  background-color: rgb(171, 201, 255);
+  border-color: rgb(148, 177, 229);
 }