Print Preview Print Destination Search Widget

chrome/browser/resources/print_preview/search/destination_list.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.
+ */
+
+.destination-list-header {

[Dan Beam, 2012/05/29 21:25:50]

why not .destination-list header?

[Robert Toscano, 2012/05/29 22:17:36]

Then I would have to decorate my element like

  <tag class="destination-list header">

but what if in one of the style-sheets I import, there exists a class ".header"
CSS definition? I would unintentionally import those styles into an element
where it shouldn't. So instead, I prefix all classes from the same element. This
is my answer to several of the other related comments. I'll use the label
css-paranoia.

[Dan Beam, 2012/05/29 22:30:18]

  .destination-list header

would correspond to:

  <div class="destination-list">
    <header></header><!-- NOTE: header tag, not class="header" -->
  </div>

like what you're already doing.

[Robert Toscano, 2012/05/30 21:08:00]

But wouldn't you have the same problem? You might import a style-sheet which has
a "header" element CSS definition, and your header element would get that
styling unintentionally.

[Dan Beam, 2012/05/31 00:17:58]

This isn't realistic and the answer to fix the other code, like we talked about.
We don't embed third party code into print preview or webui so you can easily
change the "bad" code to suit your needs.

+  -webkit-padding-start: 0;
+  background-color: transparent;
+}
+
+.destination-list-title {
+  -webkit-padding-end: 8px;
+  display: inline;
+}
+
+.destination-list-destination-list-item-container {

[Dan Beam, 2012/05/29 21:25:50]

is this a copy pasta error?

[Robert Toscano, 2012/05/29 22:17:36]

Nope, but I guess I could rename to .destination-list-item-container?

+  -webkit-padding-start: 0;
+  list-style-type: none;
+  margin-bottom: 0;
+}
+
+.destination-list-no-destinations-message {

[Dan Beam, 2012/05/29 21:25:50]

I think just .no-destinations-message should be unique enough, probably don't
need the "destination-list" in the class name as this seems like it'd make

|<-- indent -->|<tag class="destination-list-no-destinations-message">

relatively hard to wrap in 80 chars. If you're really paranoid, you may want to
have a root namespace where this class applies, like I mentioned above, i.e.

  .destination-list .no-destinations-message {}

or

  .destination-list.no-destinations-message {}

if it's the same node.

[Robert Toscano, 2012/05/29 22:17:36]

See css-paranoia

+  -webkit-padding-start: 18px;
+  color: #999;
+}
+
+.destination-list-footer {
+  -webkit-padding-start: 18px;
+  padding-top: 8px;
+}
+
+.destination-list-total {
+  color: #999;
+}