Settings People Revamp: Implement Change People preview pane

chrome/browser/resources/settings/people_page/change_picture.css

Index: chrome/browser/resources/settings/people_page/change_picture.css
diff --git a/chrome/browser/resources/settings/people_page/change_picture.css b/chrome/browser/resources/settings/people_page/change_picture.css
index 914164484c73af9287d92b54589906565fc20a0b..8d410db0b0aa5ba3635e62ee60428b9ad8c14130 100644
--- a/chrome/browser/resources/settings/people_page/change_picture.css
+++ b/chrome/browser/resources/settings/people_page/change_picture.css
@@ -7,6 +7,24 @@
   margin-top: 16px;
 }
 
+#availableIcons paper-button {

[dpapad, 2016/01/21 18:11:40]

All other CSS classes and IDs in this file are using this-naming-style instead
of thisNamingStyle.

[tommycli, 2016/01/21 18:47:05]

Done.

[Dan Beam, 2016/01/21 19:33:28]

fwiw: I dropped the presubmit check for ids-like-this a while ago so
this.$.idsLikeThis would be easier to do, and just updated the style guide[1].

[1]
https://sites.google.com/a/chromium.org/dev/developers/web-development-style-...

+  padding: 4px;
+}
+
+#preview-pane {
+  flex-shrink: 0;
+  margin: 18px 10px 0 0;
+  width: 228px;
+}
+
+#preview-pane img {

[tommycli, 2016/01/21 01:35:10]

These CSS Changes are inspired by the existing CSS for old Options. The mocks
haven't changed the general layout much.

https://code.google.com/p/chromium/codesearch#chromium/src/chrome/browser/res...

+  border: solid 1px #cacaca;
+  border-radius: 4px;
+  max-height: 220px;
+  max-width: 220px;
+  padding: 3px;
+}
+
 .user-image {
   height: 64px;
   width: 64px;