Merge pull request #29493 from crh0716/1147092

Bug 1147092 - Override the add button style r=eragonj

apps/settings/elements/addon_details.html

@@ -9,34 +9,34 @@ <h1 class="addon-details-header" data-l10n-id="addon-details-header"></h1>
       <ul>
         <li>
           <label class="pack-switch">
-            <input class="addon-enabled" type="checkbox" data-ignore>
-            <span data-l10n-id="addon-enable"></span>
+            <input class="addon-enabled" type="checkbox">
+            <span data-l10n-id="addon"></span>
+            <small class="addon-enabled-state"></small>
           </label>
         </li>
       </ul>
 
-      <header>
-        <h2 data-l10n-id="addon-description-header"></h2>
-      </header>
-      <p class="addon-paragraph">
-        <img class="addon-details-icon">
-        <span class="addon-description-text"></span>
-        <button data-l10n-id="addon-rename" class="addon-rename"></button>
-      </p>
-      <p class="addon-developer addon-paragraph"></p>
+      <ul>
+        <li>
+          <label class="addon-details-info">
+            <img class="addon-details-icon">
+            <span class="addon-details-name"></span>
+            <small class="addon-developer"></small>
+          </label>
+          <p class="addon-description-text addon-paragraph"></p>
+          <button data-l10n-id="addon-rename" class="addon-rename"></button>
+        </li>
+      </ul>
 
       <header>
         <h2 data-l10n-id="addon-targets"></h2>
       </header>
-      <p class="addon-no-targets addon-paragraph"
-         data-l10n-id="addon-no-targets" hidden>
-      </p>
-      <ul class="addon-targets">
+      <ul>
+        <li>
+          <p class="addon-targets addon-paragraph"></p>
+        </li>
       </ul>
 
-      <header>
-        <h2 data-l10n-id="addon-options"></h2>
-      </header>
       <ul>
         <li>
           <button class="addon-delete danger" data-l10n-id="addon-delete">

apps/settings/js/panels/addon_details/addon_details.js

@@ -15,27 +15,51 @@ define(function(require) {
    * @returns {AddonDetails}
    */
   function AddonDetails(elements) {
+    this._boundUpdateEnabledState = this._updateEnabledState.bind(this);
     this._elements = elements;
+    this._curApp = null;
   }
 
+  /**
+   * Update the enabled state of an addon.
+   *
+   * @access private
+   * @memberOf AddonDetails.prototype
+   * @param {Boolean} newState
+   */
+  AddonDetails.prototype._updateEnabledState = function _update(newState) {
+    this._elements.enabledState
+      .setAttribute('data-l10n-id', newState ? 'enabled' : 'disabled');
+  };
+
   /**
    * Render details of an app to the UI elements.
    *
    * @access public
    * @memberOf AddonDetails.prototype
    * @param {JSON} options that contain:
-   *          {Object}  app        Add-on to render
-   *          {Boolean} isActivity A flag indicating if the panel is accessed
-   *                               via activity handling.
+   *        {Object}  app        Add-on to render
+   *        {Boolean} isActivity A flag indicating if the panel is accessed
+   *                             via activity handling.
    */
   AddonDetails.prototype.render = function render({app, isActivity}) {
+    if (this._curApp !== null) {
+      this._curApp.unobserve('enabled', this._boundUpdateEnabledState);
+    }
+    this._curApp = app;
+    if (this._curApp) {
+      this._curApp.observe('enabled', this._boundUpdateEnabledState);
+      this._updateEnabledState(this._curApp.enabled);
+    }
+
     var l10n = navigator.mozL10n;
     this.noRename = !isActivity || !AddonManager.canDelete(app);
     var manifest =
       new ManifestHelper(app.instance.manifest || app.instance.updateManifest);
 
     this._elements.body.classList.toggle('no-rename', this.noRename);
     this.updateNames(manifest);
+
     // Put an icon next to the description
     navigator.mozApps.mgmt.getIcon(app, PREFERRED_ICON_SIZE).then((blob) => {
       this._elements.icon.src = URL.createObjectURL(blob);
@@ -73,25 +97,16 @@ define(function(require) {
       targets.forEach(function(target) {
         var manifest =
           new ManifestHelper(target.manifest || target.updateManifest);
-        names.push(manifest.name);
+        names.push(manifest.displayName);
       });
 
       names.sort();
 
-      names.forEach((name) => {
-        var item = document.createElement('li');
-        var para = document.createElement('p');
-        para.textContent = name;
-        item.appendChild(para);
-        this._elements.targetsList.appendChild(item);
-      });
-
-      if (names.length === 0) {
-        this._elements.targetsList.hidden = true;
-        this._elements.noTargetsMsg.hidden = false;
+      if (names.length < 1) {
+        this._elements.targetsList
+          .setAttribute('data-l10n-id', 'addon-no-targets');
       } else {
-        this._elements.targetsList.hidden = false;
-        this._elements.noTargetsMsg.hidden = true;
+        this._elements.targetsList.textContent = names.join(', ');
       }
     });
   };
@@ -110,6 +125,8 @@ define(function(require) {
 
     l10n.setAttributes(
       this._elements.header, 'addon-details-header', appnameArgs);
+    l10n.setAttributes(
+      this._elements.name, 'addon-details-header', appnameArgs);
     // Put text description for an icon
     l10n.setAttributes(this._elements.icon, 'accessible-app-icon', appnameArgs);
   };

apps/settings/js/panels/addon_details/panel.js

@@ -16,11 +16,12 @@ define(function(require) {
           body: panel.querySelector('.addon-details-body'),
           header: panel.querySelector('.addon-details-header'),
           gaiaHeader: panel.querySelector('gaia-header'),
+          enabledState: panel.querySelector('.addon-enabled-state'),
+          name: panel.querySelector('.addon-details-name'),
           icon: panel.querySelector('.addon-details-icon'),
           description: panel.querySelector('.addon-description-text'),
           developer: panel.querySelector('.addon-developer'),
           targetsList: panel.querySelector('.addon-targets'),
-          noTargetsMsg: panel.querySelector('.addon-no-targets'),
           toggle: panel.querySelector('.addon-enabled'),
           deleteButton: panel.querySelector('.addon-delete'),
           renameButton: panel.querySelector('.addon-rename')

apps/settings/locales/settings.en-US.properties

@@ -1435,9 +1435,10 @@ settings-prompt-dialog-header={{settings-dialog-prompt}}
 accessible-app-icon.ariaLabel=Icon for {{ appName }} app
 
 # Addongs settings
+addon=Add-on
 addons=Add-ons
 addons-header={{addons}}
-addon-details-header={{ appName }} Add-on
+addon-details-header={{ appName }}
 addon-enable=Enable Add-on
 addon-description-header=Description
 addon-developer-name={{ developerName }}

apps/settings/style/apps.css

@@ -1,23 +1,41 @@
 /**
  * Application Permissions
  */
-#addons ul li img,
-#addon-details ul li img,
 #appPermissions ul li img,
 #homescreens ul li img {
   position: absolute;
   width: 3rem;
   height: 3rem;
   left: 1.6rem;
+  top: 1.5rem;
 }
 
-#addons ul li > a,
 #addon-detail-toggle,
 #appPermissions ul li > a,
 #homescreens ul li > a  {
   -moz-padding-start: 7.4rem;
 }
 
+#addons ul li img {
+  position: absolute;
+  width: 5rem;
+  height: 5rem;
+  left: 0.6rem;
+  top: 0.5rem;
+}
+
+#addons ul li > a {
+  -moz-padding-start: 8.4rem;
+}
+
+/**
+ * !important required to override scoped the gaia-header styling for addons-add
+ * header button.
+ */
+#addons .addons-add {
+  color: #858585 !important;
+}
+
 .uninstall-app {
   margin: 1rem 1.5rem 0;
   padding: 1.5rem 0 0.5rem;
@@ -47,23 +65,41 @@
  */
 .addon-paragraph {
   font-size: 1.7rem;
-  line-height: 1.7rem;
+  line-height: 2.3rem;
   font-weight: 400;
-  font-style: italic;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  -moz-padding-start: 1.5rem;
+  -moz-padding-end: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 1.5rem;
+  white-space: unset;
 }
 
-.addon-paragraph img {
-  float: left;
-  margin: 0 1rem 1rem 1rem;
-  width: 6.4rem;
-  height: 6.4rem;
+.addon-targets {
+  padding-bottom: 0.5rem;
+}
+
+/* For overriding the style from building block */
+ul li > label:not([for]).addon-details-info {
+  -moz-padding-start: 8.1rem;
+  -moz-padding-end: 5.9rem;
+  padding-top: 1rem;
+  width: calc(100% - 12.5rem);
+  display: block;
+}
+
+.addon-details-icon {
+  position: absolute;
+  width: 5rem;
+  height: 5rem;
+  left: 1.4rem;
 }
 
 .addon-rename {
   background: none;
-  flex-shrink: 0;
+  border: none;
+  position: absolute;
+  top: 0.7rem;
+  right: 0;
   width: auto;
   color: #00aac5;
   font-style: italic;
@@ -73,6 +109,11 @@
   margin: 0;
 }
 
+.addon-details-name {
+  white-space: normal;
+  padding-top: 0.4rem;
+}
+
 .addon-rename:active {
   background: none;
   color: #00aac5;
@@ -87,13 +128,9 @@
  * Right-To-Left layout
  */
 html:-moz-dir(rtl) #addons ul li img,
-html:-moz-dir(rtl) #addon-details ul li img,
 html:-moz-dir(rtl) #appPermissions ul li img,
-html:-moz-dir(rtl) #homescreens ul li img {
+html:-moz-dir(rtl) #homescreens ul li img,
+html:-moz-dir(rtl) .addon-details-icon {
   left: unset;
   right: 1.6rem;
 }
-
-html:-moz-dir(rtl) .addon-paragraph img {
-  float: right;
-}

build/csslint/xfail.list

@@ -39,6 +39,7 @@ apps/keyboard/style/keyboard.css 1 3
 apps/music/bower_components/gaia-theme/gaia-theme.css 5 0
 apps/music/style/music.css 0 3
 apps/pdfjs/content/web/viewer.css 0 1
+apps/settings/style/apps.css 0 1
 apps/settings/style/lists.css 2 0
 apps/settings/style/settings.css 0 9
 apps/settings/style/settings_large.css 1 1