Commit 96337440 authored by Mark Striemer's avatar Mark Striemer
Browse files

Bug 1575905 - Part 1: Show theme previews for built-in themes, hide theme icons r=rpl,Gijs 

Differential Revision: https://phabricator.services.mozilla.com/D51697

--HG--
extra : moz-landing-system : lando
parent 058d24f2

toolkit/mozapps/extensions/content/aboutaddons.css

+1 −0
Original line number Diff line number Diff line
@@ -176,6 +176,7 @@ addon-card[expanded] .addon-card-message { 
  /* Adjust height so that the image preserves the aspect ratio from AMO.

   * For details, see https://bugzilla.mozilla.org/show_bug.cgi?id=1546123 */

  height: calc(var(--section-width) * 92 / 680);

  object-fit: cover;

}



.card-heading-icon {

toolkit/mozapps/extensions/content/aboutaddons.js

+35 −15
Original line number Diff line number Diff line
@@ -84,6 +84,21 @@ XPCOMUtils.defineLazyPreferenceGetter( 
const PLUGIN_ICON_URL = "chrome://global/skin/plugins/pluginGeneric.svg";

const EXTENSION_ICON_URL =

  "chrome://mozapps/skin/extensions/extensionGeneric.svg";

const BUILTIN_THEME_PREVIEWS = new Map([

  [

    "default-theme@mozilla.org",

    "chrome://mozapps/content/extensions/default-theme.svg",

  ],

  [

    "firefox-compact-light@mozilla.org",

    "chrome://mozapps/content/extensions/firefox-compact-light.svg",

  ],

  [

    "firefox-compact-dark@mozilla.org",

    "chrome://mozapps/content/extensions/firefox-compact-dark.svg",

  ],

]);



const PERMISSION_MASKS = {

  "ask-to-activate": AddonManager.PERM_CAN_ASK_TO_ACTIVATE,

  enable: AddonManager.PERM_CAN_ENABLE,
@@ -419,6 +434,10 @@ function nl2br(text) { 
 *          The URL of the best fitting screenshot, if any.

 */

function getScreenshotUrlForAddon(addon) {

  if (BUILTIN_THEME_PREVIEWS.has(addon.id)) {

    return BUILTIN_THEME_PREVIEWS.get(addon.id);

  }



  let { screenshots } = addon;

  if (!screenshots || !screenshots.length) {

    return null;
@@ -2678,25 +2697,25 @@ class AddonCard extends HTMLElement { 


    card.setAttribute("active", addon.isActive);



    // Update the icon.

    let icon;

    if (addon.type == "plugin") {

      icon = PLUGIN_ICON_URL;

    } else {

      icon =

        AddonManager.getPreferredIconURL(addon, 32, window) ||

        EXTENSION_ICON_URL;

    }

    card.querySelector(".addon-icon").src = icon;



    // Update the theme preview.

    // Set the icon or theme preview.

    let iconEl = card.querySelector(".addon-icon");

    let preview = card.querySelector(".card-heading-image");

    preview.hidden = true;

    if (addon.type == "theme") {

      iconEl.hidden = true;

      let screenshotUrl = getScreenshotUrlForAddon(addon);

      if (screenshotUrl) {

        preview.src = screenshotUrl;

        preview.hidden = false;

      }

      preview.hidden = !screenshotUrl;

    } else {

      preview.hidden = true;

      iconEl.hidden = false;

      if (addon.type == "plugin") {

        iconEl.src = PLUGIN_ICON_URL;

      } else {

        iconEl.src =

          AddonManager.getPreferredIconURL(addon, 32, window) ||

          EXTENSION_ICON_URL;

      }

    }
@@ -2935,13 +2954,14 @@ class RecommendedAddonCard extends HTMLElement { 


    // Set the theme preview.

    let preview = card.querySelector(".card-heading-image");

    preview.hidden = true;

    if (addon.type == "theme") {

      let screenshotUrl = getScreenshotUrlForAddon(addon);

      if (screenshotUrl) {

        preview.src = screenshotUrl;

        preview.hidden = false;

      }

    } else {

      preview.hidden = true;

    }



    // Set the name.

toolkit/mozapps/extensions/content/default-theme.svg

0 → 100644
+17 −0
Original line number Diff line number Diff line 
<!-- 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/. -->

<svg xmlns="http://www.w3.org/2000/svg" width="664" height="90" fill="#0C0C0D">

  <path fill="#202340" d="M0 0h664v90H0z"/>

  <path fill="#F9F9FA" d="M28 35.717V.5L156 0v35.217h508V90H0V35.217z"/>

  <path fill="#0A84FF" d="M28 0h128v5H28z"/>

  <rect width="76" height="5" x="54" y="18" fill="#3D3D3D" rx="2.5"/>

  <rect width="76" height="5" x="182" y="18" fill="#F9F9FA" rx="2.5"/>

  <rect width="533" height="29" x="82.5" y="47.5" fill="#FFF" stroke="#ADADB3" stroke-opacity=".2" rx="4"/>

  <rect width="430" height="5" x="96" y="61" rx="2.5"/>

  <circle cx="27" cy="63" r="7"/>

  <circle cx="55" cy="63" r="7"/>

  <rect width="18" height="2.667" x="630" y="54" rx="1.333"/>

  <rect width="18" height="2.667" x="630" y="60.667" rx="1.333"/>

  <rect width="18" height="2.667" x="630" y="67" rx="1.333"/>

</svg>

toolkit/mozapps/extensions/content/firefox-compact-dark.svg

0 → 100644
+17 −0
Original line number Diff line number Diff line 
<!-- 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/. -->

<svg xmlns="http://www.w3.org/2000/svg" width="664" height="90" fill="#F9F9FA">

  <path fill="#0C0C0D" d="M0 0h664v90H0z"/>

  <path fill="#323234" d="M28 35.217V0l128 .489v35.218l508-.49V90H0V35.217z"/>

  <path fill="#0A84FF" d="M28 0h128v5H28z"/>

  <rect width="76" height="5" x="54" y="18" rx="2.5"/>

  <rect width="76" height="5" x="182" y="18" rx="2.5"/>

  <rect width="533" height="29" x="82.5" y="47.5" fill="#515153" stroke="#ADADB3" stroke-opacity=".2" rx="4"/>

  <rect width="430" height="5" x="96" y="61" rx="2.5"/>

  <circle cx="27" cy="63" r="7"/>

  <circle cx="55" cy="63" r="7"/>

  <rect width="18" height="2.667" x="630" y="54" rx="1.333"/>

  <rect width="18" height="2.667" x="630" y="60.667" rx="1.333"/>

  <rect width="18" height="2.667" x="630" y="67.333" rx="1.333"/>

</svg>

toolkit/mozapps/extensions/content/firefox-compact-light.svg

0 → 100644
+17 −0
Original line number Diff line number Diff line 
<!-- 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/. -->

<svg xmlns="http://www.w3.org/2000/svg" width="664" height="90" fill="#0C0C0D">

  <path fill="#E1E1E5" d="M0 0h664v90H0z"/>

  <path fill="#F9F9FA" d="M28 35.217V0h128v35.217h508V90H0V35.217z"/>

  <path fill="#0A84FF" d="M28 0h128v5H28z"/>

  <rect width="76" height="5" x="54" y="18" fill="#3D3D3D" rx="2.5"/>

  <rect width="76" height="5" x="182" y="18" fill="#3D3D3D" rx="2.5"/>

  <rect width="533" height="29" x="82.5" y="47.5" fill="#FFF" stroke="#ADADB3" stroke-opacity=".2" rx="4"/>

  <rect width="430" height="5" x="96" y="61" rx="2.5"/>

  <circle cx="27" cy="63" r="7"/>

  <circle cx="55" cy="63" r="7"/>

  <rect width="18" height="2.667" x="630" y="54" rx="1.333"/>

  <rect width="18" height="2.667" x="630" y="60.667" rx="1.333"/>

  <rect width="18" height="2.667" x="630" y="67.333" rx="1.333"/>

</svg>