Convert chrome://extensions to a settings page within the options pages.

chrome/browser/resources/options/extension_settings.css

+/*
+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.
+*/
+
+a {

[csilv, 2011/09/01 19:52:53]

This file is going to be pulled into the options window, so keep in mind that
there is always a danger of name collisions.  In this case, these link tags will
(potentially) affect all links in the options window.  Do we need links to have
a different behavior/appearance than the rest of the options tab?

[Finnur, 2011/09/02 13:58:47]

Hmm... probably best to keep the look the same as the other links (or change it
wholesale).

Removed.


On 2011/09/01 19:52:53, csilv wrote:

+  color: rgb(80, 108, 164);
+  text-decoration: none;
+
+  text-shadow: 0 0 1px white;
+  
+  -webkit-transition: text-shadow .15s;
+}
+a:hover {
+  text-shadow: 0 0 1px rgba(80, 108, 164, .5);
+}
+a:active {
+  position: relative;
+  top: 1px;
+}
+
+.hbox {

[csilv, 2011/09/01 19:52:53]

We should consider moving thse (.hbox, .vbox, .stretch) to a more general
location like options_page.css, or even more general within the shared
directory.

[Finnur, 2011/09/02 13:58:47]

Mind if I submit it as a followup CL? 

On 2011/09/01 19:52:53, csilv wrote:

[csilv, 2011/09/02 17:41:11]

I don't mind at all, lets do that.

On 2011/09/02 13:58:47, Finnur wrote:

+  display: -webkit-box;
+  -webkit-box-orient: horizontal;
+}
+
+.vbox {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+
+.stretch {
+  padding-right: 10px;
+  -webkit-box-flex: 1;
+}
+
+.extensionListItem {

[csilv, 2011/09/01 19:52:53]

use dash naming for "extensionList" elements.  (ie, extension-list-item,
extension-list-item-collapsed, extension-list-item-expanded).

[Finnur, 2011/09/02 13:58:47]

Done.

+  font-family: 'Helvetica Neue', Arial, sans-serif; 

[csilv, 2011/09/01 19:52:53]

Remove font-family setting, the font will be specified by the options window.

[Finnur, 2011/09/02 13:58:47]

Done.

+  padding-bottom: 7px;
+  padding-top: 7px;
+  width: 100%;
+  -webkit-user-select: auto;
+}
+
+/* List items have a fixed height, whereas we want variable height depending on
+   content */
+list > * {
+  height: Auto;

[csilv, 2011/09/01 19:52:53]

nit: lowercase 'auto'

[Finnur, 2011/09/02 13:58:47]

So... not German, eh? ;)
Done.

On 2011/09/01 19:52:53, csilv wrote:

+}
+
+/* Get rid of the light-blue background on list item hover. */
+list:not([disabled]) > :hover {
+  background-color: white;
+  border-color: #CDCDCD;
+}
+
+/* Get rid of display: table, which causes width issues. */
+.displaytable {
+  display: block;
+}  
+/* Get rid of display: table row, which causes width issues. */
+.displaytable > section {
+  display: block;
+}
+/* Get rid of display: table cell, which causes width issues. */
+.displaytable > section > * {
+  display: block;
+}
+
+.content {
+  border-bottom : 0px solid #eeeeee;

[csilv, 2011/09/01 19:52:53]

nit: color as #eee

[Finnur, 2011/09/02 13:58:47]

Ah... so not so big on Euros, either, eh? Must be American. ;)
Done.

+  margin-top: 3px;
+}
+
+.big-list {
+  overflow-y: hidden;
+}
+
+.butter-bar {
+  background: #FFF299;
+  padding: 2px 5px;
+  border-radius: 3px;
+  white-space: normal;
+}
+
+.page list {
+  min-height: 0px;

[csilv, 2011/09/01 19:52:53]

min-height: 0;

[Finnur, 2011/09/02 13:58:47]

Done.

+}
+
+.search-suppress {
+  display: none;
+  height: 0px;

[csilv, 2011/09/01 19:52:53]

height: 0;

[Finnur, 2011/09/02 13:58:47]

Done.

+}
+
+.extensionListItemCollapsed {
+  margin-bottom: 16px;
+  -webkit-transition: padding 300ms, overflow 300ms, opacity 700ms;
+}
+
+.extensionListItemExpanded {
+  margin-bottom: 16px;
+  overflow: visible;
+  -webkit-transition: padding 300ms, overflow 300ms, opacity 700ms;
+}
+
+.extension-settings {
+  overflow-x: hidden;
+}
+
+.extension-icon {
+  width: 48px;

[csilv, 2011/09/01 19:52:53]

order properties in alphabetical order (here and below)

[Finnur, 2011/09/02 13:58:47]

Done.

+  height: 48px;
+  padding-left: 15px;

[csilv, 2011/09/01 19:52:53]

Perhaps not for this CL, but we should consider RTL friendly properties, ex
-webkit-padding-start and -webkit-padding-end rather than padding-left,
padding-right. (These are okay since they're identical, but there are other
left/right padding and margin attributes below.)

[Finnur, 2011/09/02 13:58:47]

Ah, not so friendly with the RTL people, eh? Oh, wait... that would be me.
Noted. :)

On 2011/09/01 19:52:53, csilv wrote:

+  padding-right: 15px;
+  vertical-align: text-top;
+  -webkit-user-select: none;
+}
+
+.extension-title {
+  font-size: 16px;
+  font-weight: 500;
+  padding-right: 20px;
+}
+
+.extension-version {
+  font-size: 13px;
+  font-weight: 400;
+}
+  
+.extension-description {
+  font-size: 13px;
+  white-space: normal;
+  padding-right: 5px;
+}
+
+.extension-checkbox-span {
+  margin-left: 7px;
+}
+
+.extension-checkbox-label {
+  margin-right: 10px;
+}
+
+.extension-delete {
+  margin-left: 5px;
+}
+
+.extension-details-hidden {
+  opacity: 0;
+  max-height: 0;
+  -webkit-transition: max-height 400ms, opacity 200ms;
+}
+
+.extension-details-visible {
+  opacity: 1;
+  max-height: 100px;
+  -webkit-transition: max-height 200ms, opacity 300ms;
+}
+
+.extension-links-view {
+  padding-left: 15px;
+}
+
+.extension-links-trailing {
+  padding-right: 7px;
+}
+
+.extension-zippy-container {
+  cursor: pointer;
+  width: 20px;
+  -webkit-user-select: none;
+}
+
+.gray-text {

[csilv, 2011/09/01 19:52:53]

nit: ideally the name of this is more to convey why it's gray... so
'informative-text' or 'supplmental-text', etc... as maybe in the future we'll
want that informative text to be a different color.  :-)

[Finnur, 2011/09/02 13:58:47]

Done.

+  color: gray;
+}
+
+.extension-zippy-default {
+  background-image: url('zippy.png');
+  background-repeat: no-repeat;
+  background-position: center top;
+  position: absolute;
+  left: 12px;
+  top: 25px;
+  width: 6px;
+  height: 16px;
+  opacity: .25;
+}
+
+.extension-zippy-collapsed {
+  -webkit-transition: -webkit-transform .1s;
+  -webkit-transform: rotate(0deg);
+}
+
+.extension-zippy-collapsed:hover {
+  -webkit-transition: -webkit-transform .1s, opacity .1s;
+  opacity: .5;
+  -webkit-transform: rotate(5deg);
+}
+
+.extension-zippy-expanded {
+  -webkit-transition: -webkit-transform .1s;
+  -webkit-transform: rotate(90deg);
+}
+
+.extension-zippy-expanded:hover {
+  -webkit-transition: -webkit-transform .1s;
+  -webkit-transform: rotate(85deg);
+}
+
+.extension-enabling {
+  position: relative;
+  top: 3px;
+}
+
+.extension-enabling-label {
+  padding-left: 3px;
+  padding-right: 9px;
+  color: black;
+}
+
+.extension-enabling-label-bold {
+  font-weight: bold;
+}
+
+.extension-inspect-table {
+  padding: 0;
+  border-spacing: 0;
+}
+
+.extension-inspect-left-column {
+  vertical-align: text-top;
+}
+
+/* Dev */
+
+.dev-open {
+  border-bottom: 1px solid rgb(205, 205, 205);
+  height: 32px;
+  padding-bottom: 7px;
+  padding-left: 4px;
+  padding-right: 3px;
+  padding-top: 4px;
+  -webkit-transition: padding 300ms, height 300ms, opacity 700ms;
+}
+.dev-closed {
+  height: 0;
+  opacity: 0;
+  padding-left: 4px;
+  padding-right: 3px;
+  -webkit-transition: padding 300ms, height 700ms, opacity 200ms;
+}
+
+.dev-button-visible {
+  display: inherit;
+  opacity: 1;
+  -webkit-transition: opacity 200ms;
+}
+
+.dev-button-hidden {
+  display: none;
+}
+
+#suggest-gallery {
+  padding-left: 10px;
+}
+
+#dev-toggle {
+  display: block;
+  float: right;
+  margin-top: -28px;
+  margin-right: 8px;
+}
+
+#get-more-extensions {
+  padding-left: 10px;
+  padding-top: 5px;
+  font-size: 15px;
+}