whip the feedback page into shape

chrome/browser/resources/feedback.css

 /* Copyright (c) 2012 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. */
 
-.feedback-label {
+#feedback-page {
+  -webkit-margin-start: 80px;
+  color: rgb(48, 57, 66);
+}
+
+#feedback-page > h1 {
+  border-bottom: 1px solid #eee;
+  font-size: 2em;
+  padding-bottom: 6px;
+  width: 718px;
+}
+
+#content {
+  width: 600px;
+}
+
+#description {
+  display: block;
   font-weight: 300;
   text-align: start;
   vertical-align: text-top;
 }
 
-.feedback-text {
-  width: 40em;
+#description-text {
+  box-sizing: border-box;
+  margin-top: 1em;
+  width: 100%;
 }
 
-.feedback-table {
-  border-spacing: 0;
-  width: 40em;
+#page-url {
+  -webkit-box-align: baseline;
+  display: -webkit-box;
 }
 
-.feedback-field {
-  border-style: solid;
-  border-width: 1px;
-  width: 22em;
+#page-url > label {
+  -webkit-margin-end: 1em;
 }
 
-.feedback-fieldlabel {
-  font-weight: 300;
-  width: 13em;
-}
-
-hr {
-  background: #ccc;
-  border: none;
-  height: 1px;
-  margin-bottom: 10px;
-  margin-top: 10px;
-  width: 40em;
+#page-url-text {
+  -webkit-box-flex: 1;
+  display: block;
 }
 
 .thumbnail-list {
-  -webkit-margin-start: 1em;
   margin-bottom: 1em;
   margin-top: 0.5em;
-  width: 33.5em;
+  min-height: 151px;
 }
 
 .image-thumbnail-container {
-  border: 2px solid white;
+  border: 2px solid #ccc;
   border-radius: 3px;
   display: inline-block;
-  z-index: 0;
 }
 
-.image-thumbnail-container-selected {
-  border: 2px solid green;
-  border-radius: 3px;
-  display: inline-block;
-  z-index: 0;
+.image-thumbnail-container-selected:not(:only-of-type) {
+  border-color: green;
 }
 
-.image-thumbnail-container:hover {
-  border: 2px solid rgb(184, 218, 176);
-  z-index: 0;
-}
-
-.image-popup {
-  width: 50%;
+.image-thumbnail-container:not(:only-of-type):not(.image-thumbnail-container-selected):hover {

[Dan Beam, 2012/05/16 22:38:14]

80 char wrap

[Evan Stade, 2012/05/16 23:56:24]

how do you wrap a css selector?

[Dan Beam, 2012/05/17 05:09:05]

either as you would a function or before a psuedo-function, i.e:

  .image-thumbnail-container:not(:only-of-type):not(
      .image-thumbnail-container-selected):hover {
    border-color: rgb(184, 218, 176);
  }

or

  .image-thumbnail-container:not(:only-of-type)
      :not(.image-thumbnail-container-selected):hover {
    border-color: rgb(184, 218, 176);
  }

here's how I've seen it previously (but there was a space to wrap more
naturally):
https://chromiumcodereview.appspot.com/10332049/diff/11004/chrome/browser/res...
(L416)

[Evan Stade, 2012/05/17 16:38:57]

that only worked because there was already whitespace in the selector: this
selector has no whitespace and adding a newline would change the meaning.

[Dan Beam, 2012/05/17 17:14:37]

wrapping like C++/JS functions (see #1) doesn't change anything, second one
might (didn't check)

+  border-color: rgb(184, 218, 176);
 }
 
 .image-thumbnail {
   border: 2px solid white;
-  display: inline-block;
-  padding: 0;
-  position: relative;
-  z-index: 1;
-}
-
-.image-thumbnail:hover {
-  z-index: 2;
-}
-
-.image-thumbnail div {
-  display: none;
 }
 
 .image-thumbnail img {
   display: block;
-  width: 200px;
-}
-
-.image-thumbnail:hover div {
-  background-color: transparent;
-  border: 1px dashed blue;
-  display: block;
-  left: 0;
-  padding: 1px;
-  position: absolute;
-}
-
-.image-thumbnail:hover div img {
-  position: absolute;
-  width: 400px;
-}
-
-.image-thumbnail-current {
-  border: 2px solid white;
-  display: inline-block;
-  padding: 0;
-  position: relative;
-  z-index: 1;
-}
-
-.image-thumbnail-current:hover {
-  z-index: 2;
-}
-
-.image-thumbnail-current div {
-  display: none;
-}
-
-.image-thumbnail-current img {
-  display: block;
-  width: 200px;
-}
-
-.image-thumbnail-current:hover div {
-  background-color: transparent;
-  border: 1px dashed blue;
-  display: block;
-  left: 0;
-  padding: 1px;
-  position: absolute;
-}
-
-.image-thumbnail-current:hover div img {
-  border: 1px dashed blue;
-  padding: 2px;
-  position: absolute;
-  width: 400px;
-}
-
-th {
-  font-weight: normal;
-  padding-top: 10px;
-}
-
-.formpane {
-  margin-right: 20px;
-}
-
-.feedback-input {
-  border-style: solid;
-  border-width: 1px;
-}
-
-#user-email-text {
-  border: none;
+  height: 140px;
 }
 
 #buttons-pane {
   /* Linux and Mac OS X display OK/Cancel dialogs in the reverse direction. */
 <if expr="not pp_ifdef('toolkit_views')">
   -webkit-box-direction: reverse;
 </if>
   display: -webkit-box;
   padding: 0;
 }
 
-#send-report-button,
-#cancel-button {
-  display: block;
-}
-
 #privacy-note {
-  font-size: 90%;
-  font-weight: normal;
-  margin: 0;
   padding-bottom: 10px;
-  padding-top: 24px;
-  text-align: start;
   width: 44em;
 }