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

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

As discussed, add TODO to move these to a common location (either
options_page.css or somewhere in the shared directory.)

[Finnur, 2011/09/02 18:01:39]

Done.

+  display: -webkit-box;
+  -webkit-box-orient: horizontal;
+}
+
+.vbox {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+
+.stretch {
+  padding-right: 10px;
+  -webkit-box-flex: 1;
+}
+
+.extension-list-item {
+  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 > * {

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

this item and the next will conflict with other options window lists.  please
change the rule so that it only affects this list.

[Finnur, 2011/09/02 18:01:39]

Done.

+  height: auto;
+}
+
+/* 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 {

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

Please rename this one, it's just too general of a name for me to feel
comfortable.  :-)  Alternatively, change the rule so that specific to this page.

[Finnur, 2011/09/02 18:01:39]

Done.

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

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

This conflicts with the .page list rule in options_page.css.  Please make it
more specific.

[Finnur, 2011/09/02 18:01:39]

I don't think this was used anymore. Removed.

On 2011/09/02 17:41:11, csilv wrote:

+  min-height: 0;
+}
+
+.search-suppress {
+  display: none;
+  height: 0;
+}
+
+.extension-list-item-collaped {
+  margin-bottom: 16px;
+  -webkit-transition: padding 300ms, overflow 300ms, opacity 700ms;
+}
+
+.extension-list-item-expanded {
+  margin-bottom: 16px;
+  overflow: visible;
+  -webkit-transition: padding 300ms, overflow 300ms, opacity 700ms;
+}
+
+.extension-settings {
+  overflow-x: hidden;
+}
+
+.extension-icon {
+  height: 48px;
+  padding-left: 15px;
+  padding-right: 15px;
+  vertical-align: text-top;
+  width: 48px;
+  -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;
+}
+
+.informative-text {
+  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 {
+  display: -webkit-box;
+  padding-left: 10px;
+  padding-top: 5px;
+  font-size: 15px;
+}