Make chrome://flags/deprecated share style with chrome://flags

Flags Deprecated visual: http://screen/acUoJdkq6p6
Flags Visual: http://screen/95M6sZUb2n1

Bug: 982371
Change-Id: I48efdec4dc217ad11b27b0f20db9512894b51558
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1785518Reviewed-by: Peter Lee <pkl@chromium.org>
Reviewed-by: Hector Carmona <hcarmona@chromium.org>
Reviewed-by: Scott Violet <sky@chromium.org>
Commit-Queue: Yann Dago <ydago@chromium.org>
Cr-Commit-Position: refs/heads/master@{#694278}

chrome/browser/ui/webui/flags_ui.cc

@@ -75,11 +75,6 @@ content::WebUIDataSource* CreateFlagsUIHTMLSource() {
 #endif
 
   source->AddResourcePath(flags_ui::kFlagsJS, IDR_FLAGS_UI_FLAGS_JS);
-  source->AddResourcePath(flags_ui::kFlagsStyleLoaderJS,
-                          IDR_FLAGS_UI_FLAGS_STYLE_LOADER_JS);
-  source->AddResourcePath(flags_ui::kFlagsDeprecatedCSS,
-                          IDR_FLAGS_UI_FLAGS_DEPRECATED_CSS);
-  source->AddResourcePath(flags_ui::kFlagsCSS, IDR_FLAGS_UI_FLAGS_CSS);
   source->SetDefaultResource(IDR_FLAGS_UI_FLAGS_HTML);
   return source;
 }

components/flags_ui/flags_ui_constants.cc

@@ -7,10 +7,7 @@
 namespace flags_ui {
 
 // Resource paths.
-const char kFlagsDeprecatedCSS[] = "flags_deprecated.css";
 const char kFlagsJS[] = "flags.js";
-const char kFlagsCSS[] = "flags.css";
-const char kFlagsStyleLoaderJS[] = "flags_style_loader.js";
 
 // Message handlers.
 const char kEnableExperimentalFeature[] = "enableExperimentalFeature";

components/flags_ui/flags_ui_constants.h

@@ -9,10 +9,7 @@ namespace flags_ui {
 
 // Resource paths.
 // Must match the resource file names.
-extern const char kFlagsDeprecatedCSS[];
 extern const char kFlagsJS[];
-extern const char kFlagsCSS[];
-extern const char kFlagsStyleLoaderJS[];
 
 // Message handlers.
 // Must match the constants used in the resource files.

components/flags_ui/resources/flags.css

@@ -24,12 +24,9 @@ html {
   --google-blue-700: rgb(25, 103, 210);
   --google-grey-100: rgb(241, 243, 244);
   --google-grey-200: rgb(232, 234, 237);
-  --google-grey-300-rgb: 218, 220, 224;
-  --google-grey-300: rgb(var(--google-grey-300-rgb));
-  --google-grey-500-rgb: 154, 160, 166;
-  --google-grey-500: rgb(var(--google-grey-500-rgb));
+  --google-grey-300: rgb(218, 220, 224);
+  --google-grey-500: rgb(154, 160, 166);
   --google-grey-700: rgb(95, 99, 104);
-  --google-grey-800-rgb: 60, 64, 67;  /* #3c4043 */
   --google-grey-900: rgb(32, 33, 36);
   --google-red-300: rgb(242, 139, 130);
   --google-red-700: rgb(197, 34, 31);
@@ -130,10 +127,6 @@ button {
   padding: 0;
 }
 
-#deprecated-flags-title {
-  display: none;
-}
-
 #header {
   background: var(--toolbar-color);
   box-shadow: 0 2px 2px 0 var(--shadow-color);
@@ -174,21 +167,8 @@ button {
   position: relative;
 }
 
-.search-container .search-hint {
-  -webkit-mask-image: url(../../../ui/webui/resources/images/icon_search.svg);
-  -webkit-mask-position: 50%;
-  -webkit-mask-repeat: no-repeat;
-  background: var(--secondary-color);
-  height: 100%;
-  left: 8px;
-  pointer-events: none;
-  position: absolute;
-  top: 0;
-  width: 20px;
-}
-
 #search {
-  background: var(--input-background);
+  background: var(--input-background) url(../../../ui/webui/resources/images/icon_search.svg) no-repeat 8px 50%;
   border: 1px solid transparent;
   border-radius: 3px;
   box-sizing: border-box;
@@ -198,6 +178,12 @@ button {
   width: 100%;
 }
 
+@media (prefers-color-scheme: dark) {
+  #search {
+    background-image: url(../../../ui/webui/resources/images/dark/icon_search.svg);
+  }
+}
+
 #search:focus {
   border-color: var(--interactive-color);
   outline: 0;
@@ -529,6 +515,7 @@ button.primary {
 
 button.primary:-webkit-any(:active, :focus, :hover) {
   background: var(--google-blue-400);
+  outline: 0;
 }
 
 html.focus-outline-visible button.primary:focus {

components/flags_ui/resources/flags.html

@@ -8,7 +8,7 @@
 </if>
 <title>$i18n{title}</title>
 
-<link rel="stylesheet" href="chrome://flags/flags.css">
+<link rel="stylesheet" href="flags.css">
 
 <if expr="is_ios">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1">
@@ -17,9 +17,6 @@
   <script src="chrome://resources/js/ios/web_ui.js"></script>
 </if>
 
-<if expr="not is_ios">
-  <script src="chrome://flags/flags_style_loader.js"></script>
-</if>
 <script src="chrome://resources/js/cr.js"></script>
 <script src="chrome://resources/js/cr/ui/focus_outline_manager.js"></script>
 <script src="chrome://resources/js/util.js"></script>
@@ -27,12 +24,8 @@
 <body>
 <div id="header">
   <div class="flex-container">
-    <div id="deprecatedd-flags-title" class="flex">
-      <h1>$i18n{title}</h1>
-    </div>
-    <div class="flex center-content">
+    <div class="flex">
       <div class="search-container">
-        <div class="search-hint"></div>
         <input type="text" id="search" placeholder="$i18n{search-placeholder}" tabindex="1"
             autocomplete="off" spellcheck="false">
         <input type="button" class="clear-search" title="$i18n{clear-search}"
@@ -51,7 +44,7 @@
 </div>
 <div id="body-container" style="visibility:hidden">
   <div id="flagsTemplate">
-    <div id="flags-title" class="flex-container">
+    <div class="flex-container">
       <div class="flex"><h1 class="section-header-title">$i18n{title}</h1></div>
       <span id="version" class="flex">$i18n{version}</span>
     </div>

components/flags_ui/resources/flags_deprecated.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. */
-
-html {
-  background: rgb(248, 249, 250);
-  overflow: hidden;
-  --input-background: rgba(0, 0, 0, 0.22);
-  --toolbar-color: var(--google-blue-700);
-  --cr-card-background-color: white;
-  --cr-card-shadow: rgba(var(--google-grey-800-rgb), .3) 0 1px 2px 0,
-    rgba(var(--google-grey-800-rgb), .15) 0 1px 3px 1px;
-  --cr-search-field-input-color: white;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    background: var(--google-grey-900);
-    --cr-card-background-color: var(--google-grey-900);
-    --cr-search-field-input-color: var(--google-grey-500);
-    --cr-card-shadow: rgba(0, 0, 0, .3) 0 1px 2px 0,
-      rgba(0, 0, 0, .15) 0 1px 3px 1px;
-  }
-}
-
-#promos {
-  display: none;
-}
-
-#flags-title {
-  display: none;
-}
-
-#enterprise-flags-title {
-  display: block;
-}
-
-body {
-  display: flex;
-  flex-direction: column;
-}
-
-#body-container {
-  box-sizing: border-box;
-  flex: 1;
-  margin: 0;
-  min-width: 100%;
-  overflow: overlay;
-}
-
-#flagsTemplate {
-  background: var(--cr-card-background-color);
-  box-shadow: var(--cr-card-shadow);
-  box-sizing: border-box;
-  margin: 0 auto;
-  max-width: 680px;
-  min-width: 680px;
-  padding-top: 18px;
-}
-
-@media (prefers-color-scheme: dark) {
-  #flagsTemplate {
-    background-image: linear-gradient(rgba(255, 255, 255, .04),
-    rgba(255, 255, 255, .04));
-  }
-}
-
-#header {
-  display: flex;
-  flex-shrink: 0;
-  height: 55px;
-  position: relative;
-  white-space: nowrap;
-}
-
-#header h1 {
-  color: white;
-  font-size: 16px;
-  font-weight: 400;
-  letter-spacing: .25px;
-  line-height: normal;
-  margin: auto 0;
-  margin-inline-start: 6px;
-  padding-inline-end: 12px;
-}
-
-#header .flex-container > * {
-  flex: 1;
-}
-
-#header .flex-container {
-  justify-content: space-between;
-  max-width: 100%;
-  width: 100%;
-}
-
-#header .center-content {
- flex: 3;
- max-width: 680px;
-}
-
-@media only screen and (max-width: 512px) {
-  #enterprise-flags-title {
-    max-width: 0;
-    overflow: hidden;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  #header {
-    background-color: rgba(255, 255, 255, .04);
-  }
-}
-
-#experiment-reset-all {
-  margin-inline-start: 10px;
-}
-
-.search-container {
-  margin-inline-end: 0;
-  position: relative;
-}
-
-.search-container .search-hint {
-  -webkit-mask-size: 20px;
-  background: var(--cr-search-field-input-color);
-  left: 12px;
-}
-
-#search {
-  background: var(--input-background);
-  border-radius: 4px;
-  color: var(--cr-search-field-input-color);
-  font-size: 13px;
-  padding-inline-start: 44px;
-}
-
-@media (prefers-color-scheme: dark) {
-  #search {
-    background-image: none;
-  }
-}
-
-#search::placeholder {
-  color: rgba(255, 255, 255, .7);
-}
-
-.clear-search {
-  background: var(--cr-search-field-input-color);
-}
-
-button:not(.primary) {
-  color: var(--google-grey-300);
-}
-
-@media (prefers-color-scheme: dark) {
-  button:not(.primary) {
-    color: var(--google-grey-700);
-  }
-}
-
-button:not(.primary):hover {
-  background: rgba(var(--google-grey-500-rgb), .04);
-}
-
-@media (prefers-color-scheme: dark) {
-  button:not(.primary):hover {
-    background: rgba(var(--google-grey-300-rgb), .08);
-  }
-}

components/flags_ui/resources/flags_style_loader.js

-/* 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. */
-
-if (window.location.href.startsWith("chrome://flags/deprecated")) {
-  const styles = document.createElement('link');
-  styles.rel = 'stylesheet';
-  styles.href = 'chrome://flags/flags_deprecated.css';
-  document.querySelector('head').appendChild(styles);
-}

components/resources/flags_ui_resources.grdp

 <?xml version="1.0" encoding="utf-8"?>
 <grit-part>
-  <include name="IDR_FLAGS_UI_FLAGS_CSS" file="../flags_ui/resources/flags.css" flattenhtml="true" type="BINDATA" compress="gzip" />
-  <include name="IDR_FLAGS_UI_FLAGS_DEPRECATED_CSS" file="../flags_ui/resources/flags_deprecated.css" type="BINDATA" compress="gzip" />
-  <include name="IDR_FLAGS_UI_FLAGS_HTML" file="../flags_ui/resources/flags.html" preprocess="true" type="BINDATA" compress="gzip" />
+  <include name="IDR_FLAGS_UI_FLAGS_HTML" file="../flags_ui/resources/flags.html" flattenhtml="true" type="BINDATA" compress="gzip" />
   <include name="IDR_FLAGS_UI_FLAGS_JS" file="../flags_ui/resources/flags.js" type="BINDATA" compress="gzip" />
-  <include name="IDR_FLAGS_UI_FLAGS_STYLE_LOADER_JS" file="../flags_ui/resources/flags_style_loader.js" type="BINDATA" compress="gzip" />
 </grit-part>

ios/chrome/browser/ui/webui/flags_ui.cc

@@ -44,7 +44,6 @@ web::WebUIIOSDataSource* CreateFlagsUIHTMLSource() {
   source->UseStringsJs();
   FlagsUI::AddFlagsIOSStrings(source);
   source->AddResourcePath(flags_ui::kFlagsJS, IDR_FLAGS_UI_FLAGS_JS);
-  source->AddResourcePath(flags_ui::kFlagsCSS, IDR_FLAGS_UI_FLAGS_CSS);
   source->SetDefaultResource(IDR_FLAGS_UI_FLAGS_HTML);
   return source;
 }