Settings: Implement sub-subpages, and clean up some animations.

chrome/browser/resources/settings/search_page/search_page.css

Index: chrome/browser/resources/settings/search_page/search_page.css
diff --git a/chrome/browser/resources/settings/search_page/search_page.css b/chrome/browser/resources/settings/search_page/search_page.css
index 30e00a148c5843771aa479b99f7b4379cfeccd33..1c4320e123c2da0a0e00f986b2463ddc68352f73 100644
--- a/chrome/browser/resources/settings/search_page/search_page.css
+++ b/chrome/browser/resources/settings/search_page/search_page.css
@@ -6,7 +6,11 @@
   -webkit-margin-start: 10px;
 }
 
-.search-engines {
+.search-engines-subpage-button {

[Dan Beam, 2015/08/14 21:23:07]

did you mean...

  cr-button.search-engines-subpage

(as in: <button class="search-engines-subpage">?)

either way, .search-engines-subpage is a bad class name because it sounds like
it's styling... a subpage

[tommycli, 2015/08/14 21:27:42]

Hmm... that's what I had in PS#4, yet it was still kind of confusing.

Do you have a recommended class name for the button and the sub-subpage?

[Dan Beam, 2015/08/14 21:33:39]

no, it's not.  notice the difference between "a.b" and "a .b"
using a compound selector if necessary
1 for presentation (e.g. .subpage or cr-button)
1 for identification (#show-advanced or #show-subpage)

unless there's a subpage with a title of "show" this isn't ambiguous

+  margin-top: 10px;
+}
+
+.search-engines-button {
   align-items: center;
   display: flex;
   margin-top: 20px;
@@ -14,4 +18,4 @@
 
 #searchEnginesMenu {
   min-width: 150px;
-}
+}