Bug 988068 - Improve about:addons styling. r=mfinkle
authorMargaret Leibovic <margaret.leibovic@gmail.com>
Mon, 21 Apr 2014 11:06:14 -0700
changeset 198980 a00af396554ac11103ea8c24d09e4355cefa8ab0
parent 198979 788297be17eba9be755b9b5c343e9d94fd2cb737
child 198981 48645ff1f93ea2326f40fcb30d041ecf3cca773f
push id486
push userasasaki@mozilla.com
push dateMon, 14 Jul 2014 18:39:42 +0000
treeherdermozilla-release@d33428174ff1 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmfinkle
bugs988068
milestone31.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 988068 - Improve about:addons styling. r=mfinkle
mobile/android/chrome/content/aboutAddons.js
mobile/android/chrome/content/aboutAddons.xhtml
mobile/android/themes/core/aboutAddons.css
mobile/android/themes/core/aboutBase.css
mobile/android/themes/core/defines.inc
mobile/android/themes/core/jar.mn
--- a/mobile/android/chrome/content/aboutAddons.js
+++ b/mobile/android/chrome/content/aboutAddons.js
@@ -18,18 +18,16 @@ XPCOMUtils.defineLazyGetter(window, "gCh
   window.QueryInterface(Ci.nsIInterfaceRequestor)
     .getInterface(Ci.nsIWebNavigation)
     .QueryInterface(Ci.nsIDocShellTreeItem)
     .rootTreeItem
     .QueryInterface(Ci.nsIInterfaceRequestor)
     .getInterface(Ci.nsIDOMWindow)
     .QueryInterface(Ci.nsIDOMChromeWindow));
 
-XPCOMUtils.defineLazyGetter(window, "SelectHelper", function() gChromeWin.SelectHelper);
-
 var ContextMenus = {
   target: null,
 
   init: function() {
     document.addEventListener("contextmenu", this, false);
 
     document.getElementById("contextmenu-enable").addEventListener("click", ContextMenus.enable.bind(this), false);
     document.getElementById("contextmenu-disable").addEventListener("click", ContextMenus.disable.bind(this), false);
@@ -154,21 +152,16 @@ var Addons = {
 
     let inner = document.createElement("div");
     inner.className = "inner";
 
     let details = document.createElement("div");
     details.className = "details";
     inner.appendChild(details);
 
-    let tagPart = document.createElement("div");
-    tagPart.textContent = gStringBundle.GetStringFromName("addonType." + aAddon.type);
-    tagPart.className = "tag";
-    details.appendChild(tagPart);
-
     let titlePart = document.createElement("div");
     titlePart.textContent = aAddon.name;
     titlePart.className = "title";
     details.appendChild(titlePart);
 
     let versionPart = document.createElement("div");
     versionPart.textContent = aAddon.version;
     versionPart.className = "version";
@@ -303,17 +296,16 @@ var Addons = {
     detailItem.setAttribute("optionsURL", aListItem.getAttribute("optionsURL"));
     let addon = detailItem.addon = aListItem.addon;
 
     let favicon = document.querySelector("#addons-details > .addon-item .icon");
     favicon.setAttribute("src", addon.iconURL || AMO_ICON);
 
     detailItem.querySelector(".title").textContent = addon.name;
     detailItem.querySelector(".version").textContent = addon.version;
-    detailItem.querySelector(".tag").textContent = gStringBundle.GetStringFromName("addonType." + addon.type);
     detailItem.querySelector(".description-full").textContent = addon.description;
     detailItem.querySelector(".status-uninstalled").textContent =
       gStringBundle.formatStringFromName("addonStatus.uninstalled", [addon.name], 1);
 
     let enableBtn = document.getElementById("enable-btn");
     if (addon.appDisabled)
       enableBtn.setAttribute("disabled", "true");
     else
--- a/mobile/android/chrome/content/aboutAddons.xhtml
+++ b/mobile/android/chrome/content/aboutAddons.xhtml
@@ -37,29 +37,28 @@
   <div id="addons-list" class="list">
   </div>
 
   <div id="addons-details" class="list">
     <div class="addon-item list-item">
       <img class="icon"/>
       <div class="inner">
         <div class="details">
-          <div class="tag"></div>
           <div class="title"></div>
           <div class="version"></div>
         </div>
         <div class="description-full"></div>
+        <div class="options-header">&aboutAddons.options;</div>
+        <div class="options-box"></div>
       </div>
       <div class="status status-uninstalled show-on-uninstall"></div>
       <div class="buttons">
         <button id="enable-btn" class="show-on-disable hide-on-enable hide-on-uninstall" >&addonAction.enable;</button>
         <button id="disable-btn" class="show-on-enable hide-on-disable hide-on-uninstall" >&addonAction.disable;</button>
         <button id="uninstall-btn" class="hide-on-uninstall" >&addonAction.uninstall;</button>
         <button id="cancel-btn" class="show-on-uninstall" >&addonAction.undo;</button>
       </div>
-      <div class="options-header">&aboutAddons.options;</div>
-      <div class="options-box"></div>
     </div>
   </div>
 
   <script type="application/javascript;version=1.8" src="chrome://browser/content/aboutAddons.js"></script>
 </body>
 </html>
--- a/mobile/android/themes/core/aboutAddons.css
+++ b/mobile/android/themes/core/aboutAddons.css
@@ -1,125 +1,113 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+%filter substitution
+%include defines.inc
+
 .details {
   width: 100%;
 }
 
 .details > div {
   display: inline;
 }
 
 .version {
   /* title is not localized, so keep the margin on the left side */
   margin-left: .67em;
 }
 
-.tag {
-  float: right;
-  margin-left: .67em;
-
-  /* compensate for the title baseline */
-  position: relative;
-  bottom: -3px;
-}
-
 #header-button {
   background-image: url("chrome://browser/skin/images/amo-logo.png"), url("chrome://browser/skin/images/chevron.png");
   background-size: 20px 20px, 8px 20px;
   background-position: left, right 3px center;
 }
 
 .description {
   width: 100%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
 .status {
-  background-color: #eef2f5;
+  background-color: @color_about_item_inner@;
   border-top: 2px solid;
   -moz-border-top-colors: #bac2ac #ffffff;
   font-weight: bold;
   padding: 0.5em;
   width: 100%;
 }
 
 .options-header {
   font-weight: bold;
-  padding: 1em 1.3em;
-}
-
-.options-box {
-  margin: 0 .67em;
+  text-transform: uppercase;
+  margin-top: 1em;
 }
 
 .addon-item[isDisabled="true"] .options-header,
 .addon-item:not([optionsURL]) .options-header,
 .addon-item[optionsURL=""] .options-header,
 .addon-item[isDisabled="true"] .options-box,
 .addon-item:not([optionsURL]) .options-box,
 .addon-item[optionsURL=""] .options-box {
   display: none;
 }
 
+/* Settings */
+
 setting {
-  padding: 1em .67em;
-  border-top: 2px solid;
-  -moz-border-top-colors: #bac2ac #ffffff;
+  padding-bottom: 1em;
   -moz-box-align: center;
   box-sizing: border-box;
   width: 100%;
 }
 
+setting[type="integer"],
+setting[type="string"],
+setting[type="menulist"],
+setting[type="control"] {
+  -moz-box-orient: vertical;
+  -moz-box-align: start;
+}
+
 setting > vbox {
   -moz-box-flex: 1;
 }
 
-.preferences-title {
-  font-weight: bold;
-}
-
 .preferences-description {
   margin-top: 4px;
+  color: #666;
 }
 
 .preferences-description:empty {
   display: none;
 }
 
-/* Put setting textboxes on a separate row */
-setting[type="integer"],
-setting[type="string"] {
-  -moz-box-align: center;
-  -moz-box-orient: vertical;
-}
-
-.preferences-alignment > textbox {
-  margin: .67em 0 0 0;
-  font-size: 1.2em !important;
-}
+/* Checkbox */
 
 checkbox {
   -moz-binding: url("chrome://global/content/bindings/checkbox.xml#checkbox-with-spacing") !important;
+  margin: 0;
 }
 
 checkbox[label=""] > .checkbox-label-box,
 checkbox:not([label]) > .checkbox-label-box {
   display: none;
 }
 
 .checkbox-check {
-  background: url("chrome://browser/skin/images/checkbox_unchecked.png") no-repeat 50% 50%;
-  border: 0 transparent;
-  width: 2.6em;
-  height: 2.6em;
+  background-color: transparent;
+  background-image: url("chrome://browser/skin/images/checkbox_unchecked.png");
+  border: none;
+  height: 48px;
+  width: 48px;
 }
 
 setting:active checkbox > .checkbox-spacer-box > .checkbox-check {
   background-image: url("chrome://browser/skin/images/checkbox_unchecked_pressed.png");
 }
 
 checkbox[disabled="true"] > .checkbox-spacer-box > .checkbox-check {
   background-image: url("chrome://browser/skin/images/checkbox_unchecked_disabled.png");
@@ -139,66 +127,71 @@ checkbox[checked="true"][disabled="true"
 
 /* Textbox */
 
 textbox[type="number"] > spinbuttons {
   visibility: collapse;
 }
 
 textbox {
-  background: white -moz-linear-gradient(top, rgba(27,113,177,0.5) 0, rgba(198,225,246,0.2) 3px, rgba(255,255,255,0.2) 16px);
-  border-radius: 3px;
-  border-color: rgb(94,128,153);
-  padding: 0 !important;
+  min-width: 200px;
+  margin: 2px 0;
+  padding: 0.5em !important;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  color: #333;
 }
 
-.textbox-input-box {
-  padding: .4em .67em;
+/* Button */
+
+button {
+  margin: 2px 0;
+  background: #fff;
+  border: 1px solid #ccc;
+  padding: 0.5em;
 }
 
 /* Menulist */
 
 menulist {
   -moz-appearance: none !important;
   -moz-user-focus: ignore;
-  /* min-width: 200px !important; */
-  color: #000 !important;
-  border-radius: 5px;
-  border-color: rgb(94,128,153);
-  border-style: solid;
-  padding: .4em .67em;
-  background: white;
-  border: 1px solid #cacdd5;
-  border-style: solid;
-  border-color: rgb(94,128,153);
   min-width: 200px;
-}
-
-.menulist-label {
-  background-color: transparent !important;
-}
-
-menulist > menupopup > menuitem > label {
-  -moz-padding-start: 3px !important;
-  -moz-padding-end: 7px !important;
+  margin: 2px 0;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 0.5em;
 }
 
 menulist > dropmarker {
   height: 1.8em;
   width: 1.8em;
   margin-left: @margin_snormal@;
-  background-color: transparent; /* for windows */
-  border: none;                  /* for windows */
+  background-color: transparent;
+  border: none;
   -moz-box-align: center;
   -moz-box-pack: center;
   list-style-image: url("chrome://browser/skin/images/dropmarker.svg") !important;
   -moz-image-region: auto;
   display: block;
 }
 
+/* Select */
+
+select {
+  min-width: 200px;
+  margin: 2px 0;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 1em;
+}
+
 /* XBL bindings */
 
 settings {
   -moz-binding: url("chrome://mozapps/content/extensions/setting.xml#settings");
 }
 
 setting {
   display: none;
--- a/mobile/android/themes/core/aboutBase.css
+++ b/mobile/android/themes/core/aboutBase.css
@@ -1,16 +1,19 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+%filter substitution
+%include defines.inc
+
 html {
   font-family: Roboto,"Droid Sans",helvetica,arial,clean,sans-serif;
-  font-size: 12px;
-  background-color: #ced7de;
+  font-size: 14px;
+  background-color: @color_about_background@;
   -moz-text-size-adjust: none;
 }
 
 body {
   margin: 0;
 }
 
 .header {
@@ -41,17 +44,17 @@ body {
 .list {
   padding: 0px;
   margin: 0px;
   width: 100%;
 }
 
 .list-item {
   color: black;
-  background-color: #e6e9eb;
+  background-color: @color_about_item@;
   border-bottom: 2px solid;
   -moz-border-bottom-colors: #ffffff #bac2ac;
   position: relative;
   list-style-type: none;
   list-style-image: none;
   margin: 0px;
   padding: 0px;
 }
@@ -61,19 +64,18 @@ body {
 }
 
 .list-item:active,
 .list-item:active > .inner {
   background-image: none;
 }
 
 .inner {
-  background-color: #eef2f5;
-  min-height: 3.8em;
-  padding: 0.5em;
+  background-color: @color_about_item_inner@;
+  padding: 1em;
 
   /* make room for the favicon */
   -moz-margin-start: 4.5em;
 }
 
 /* Icons */
 body[dir="ltr"] .icon {
   left: 1.35em;
@@ -106,19 +108,18 @@ body[dir="ltr"] .icon {
 .buttons > button {
   -moz-appearance: none;
   color: black;
   font-size: 1em !important;
   border: 1px solid transparent;
   border-top-color: #bac2ac;
   -moz-border-start-color: #bac2ac;
   background-image: none;
-  background-color: #edf0f5;
+  background-color: @color_about_item_inner@;
   border-radius: 0px !important;
-
   flex: 1;
   padding: 0.75em 0.5em;
 }
 
 .buttons > button[disabled="true"] {
   color: #b5b5b5;
 }
 
@@ -131,21 +132,20 @@ body[dir="ltr"] .icon {
 }
 
 .row {
   display: flex;
   width: 100%;
 }
 
 .title {
-  font-size: 1.2em;
   font-weight: bold;
   overflow: hidden;
   flex: 1;
 }
 
 #browse-title {
-  margin-top: 1em;
+  margin: 0.5em 0;
   background-image: url("chrome://browser/skin/images/chevron.png");
   background-size: 8px 20px;
   background-position: right;
   background-repeat: no-repeat;
 }
--- a/mobile/android/themes/core/defines.inc
+++ b/mobile/android/themes/core/defines.inc
@@ -1,10 +1,14 @@
 %filter substitution
 
+%define color_about_background #ced7de
+%define color_about_item #e6e9eb
+%define color_about_item_inner #eef2f5
+
 %define color_background_active #525252
 %define color_background_default #000
 %define color_text_default #fff
 %define color_divider_border #333333
 %define color_button_border #5a5a5a
 %define color_dialog_border #5a5a5a
 %define color_background_dlgbuttons #9a9a9a
 %define color_background_panel #d6d6d6
--- a/mobile/android/themes/core/jar.mn
+++ b/mobile/android/themes/core/jar.mn
@@ -3,19 +3,19 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 
 chrome.jar:
 % skin browser classic/1.0 %skin/
   skin/aboutPage.css                        (aboutPage.css)
   skin/about.css                            (about.css)
-  skin/aboutAddons.css                      (aboutAddons.css)
+* skin/aboutAddons.css                      (aboutAddons.css)
   skin/aboutApps.css                        (aboutApps.css)
-  skin/aboutBase.css                        (aboutBase.css)
+* skin/aboutBase.css                        (aboutBase.css)
 * skin/aboutDownloads.css                   (aboutDownloads.css)
   skin/aboutFeedback.css                    (aboutFeedback.css)
 #ifdef MOZ_SERVICES_HEALTHREPORT
   skin/aboutHealthReport.css                (aboutHealthReport.css)
 #endif
   skin/aboutMemory.css                      (aboutMemory.css)
 * skin/aboutPrivateBrowsing.css             (aboutPrivateBrowsing.css)
   skin/aboutReader.css                      (aboutReader.css)