WebUI Edit Search Engine Dialog

chrome/browser/resources/edit_search_engine_dialog.css

Index: chrome/browser/resources/edit_search_engine_dialog.css
diff --git a/chrome/browser/resources/edit_search_engine_dialog.css b/chrome/browser/resources/edit_search_engine_dialog.css
new file mode 100644
index 0000000000000000000000000000000000000000..8c689b690fd64a0178e97611a97ec49875d0f2c4
--- /dev/null
+++ b/chrome/browser/resources/edit_search_engine_dialog.css
@@ -0,0 +1,66 @@
+/* Copyright (c) 2011 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, body {

[flackr, 2011/10/05 02:41:12]

Seems like this shouldn't be necessary on both html and body.

[wyck, 2011/10/05 14:32:32]

This is the way it was suggested to me originally.  Which one should it be then?
 html or body?

+  background-color: #EEE;

[flackr, 2011/10/05 02:41:12]

s/EEE/eee

[wyck, 2011/10/05 14:32:32]

Done.

+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
+.vbox,
+.hbox {
+  display: table;
+  height: 100%;
+  width: 100%;
+}
+
+.vbox > div {
+  display: table-row;
+}
+
+.hbox > div {
+  display: table-cell;
+  vertical-align: top;
+}
+
+.vbox > .fill {
+  height: 100%;
+}
+
+.hbox > .fill {
+  width: 100%;
+}
+
+.hfill {
+  width: 100%;
+}
+
+input {
+  -webkit-box-sizing: border-box;

[arv (Not doing code reviews), 2011/10/04 20:55:01]

skip -webkit-box-sizing

[wyck, 2011/10/04 21:57:57]

Done.

+  box-sizing: border-box;
+}
+
+#url-description {
+  margin: 12px 3px 0 3px;
+}
+
+#buttons-table {
+  float: right;

[arv (Not doing code reviews), 2011/10/04 20:55:01]

don't use floats. What is your intention here?

[wyck, 2011/10/04 21:57:57]

My intention is that the buttons are at the right.  And the two buttons (cancel
and save) should be the same width regardless of language.

[arv (Not doing code reviews), 2011/10/06 17:39:51]

Sorry for being slow here.

If I understand correctly the buttons are stacked vertically and they need to be
the same size.

The stacking and sizing is better done using flex box (direction vertical).

The right alignment is better done using text-align + inline-block or margin.
Floats should not be used for layout. Only for getting texts to wrap around.

You also need to use direction neutral properties (like -webkit-margin-start,
text-align: end etc).

Here is a quick prototype:

http://plexode.com/eval3/#ht=%3Cstyle%3E%0A%0A.a%20%7B%0A%20%20display%3A%20-...

+  margin-bottom: 8px;
+  margin-right: 8px;

[arv (Not doing code reviews), 2011/10/04 20:55:01]

RTL

[wyck, 2011/10/04 21:57:57]

Done.

+  margin-top: 20px;
+  width: auto;
+}
+
+#buttons-table > div {
+  padding: 3px;
+  width: 50%;
+}
+
+button {
+  white-space: nowrap;
+  width: 100%;
+}