Bug 988068 - Improve about:addons styling. r=mfinkle a=lsblakk
authorMargaret Leibovic <margaret.leibovic@gmail.com>
Mon, 21 Apr 2014 11:06:14 -0700
changeset 192141 283b42b59b7f408ab532f6a0884fbcf7f6554574
parent 192140 f44e3f7a4932c794c06d57aba6fff201bbe87d65
child 192142 15cb4a9c5983172901da3de867e82821347fdce1
push id3503
push userraliiev@mozilla.com
push dateMon, 28 Apr 2014 18:51:11 +0000
treeherdermozilla-beta@c95ac01e332e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmfinkle, lsblakk
bugs988068
milestone30.0a2
Bug 988068 - Improve about:addons styling. r=mfinkle a=lsblakk
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)