toolkit/mozapps/extensions/content/aboutaddons.html
author Rob Wu <rob@robwu.nl>
Wed, 08 May 2019 18:30:04 +0000
changeset 532039 af2c36273f0c06c24d6dcc5625805f92f390eec0
parent 532036 76eb966c5aa706e93e06e9b463bb1d305ff1b7f4
child 532040 043d273f14ca4ff406c4d6674701ecfa51ecbd9d
permissions -rw-r--r--
Bug 1542262 - Match AMO's rating logic in about:addons r=mstriemer,Pike - Fill stars based on whether the rating is within the 0.5 range of a 0.5-multiple, rather than checking whether the rating is at least as large as the 0.5-multiple. This follows the boundaries at: https://github.com/mozilla/addons-frontend/blob/bb9277eeffa1aca38b49c8ed2f4dfa5823def394/src/ui/components/Rating/index.js#L139-L140 - Use a review star rating instead of re-using the bookmark star. This is not necessarily to be more consistent with AMO's stars, but to prevent the stars from becoming non-stars if we ever change the bookmark icon. The SVG icon is based on the path at: https://github.com/mozilla/addons-frontend/blob/bb9277eeffa1aca38b49c8ed2f4dfa5823def394/src/ui/components/IconStar/index.js#L19 - Turn it into a custom element to make re-use easier. Differential Revision: https://phabricator.services.mozilla.com/D29480

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
    <link rel="stylesheet" href="chrome://mozapps/content/extensions/aboutaddons.css">

    <link rel="localization" href="branding/brand.ftl">
    <link rel="localization" href="toolkit/about/aboutAddons.ftl">
    <link rel="localization" href="toolkit/about/abuseReports.ftl">

    <script src="chrome://mozapps/content/extensions/aboutaddonsCommon.js"></script>
    <script src="chrome://mozapps/content/extensions/message-bar.js"></script>
    <script src="chrome://mozapps/content/extensions/abuse-reports.js"></script>
    <script src="chrome://mozapps/content/extensions/aboutaddons.js"></script>
  </head>
  <body>
    <message-bar-stack id="abuse-reports-messages" reverse max-message-bar-count="3">
    </message-bar-stack>
    <div id="main">
    </div>

    <template name="addon-options">
      <panel-list>
        <panel-item action="toggle-disabled"></panel-item>
        <panel-item data-l10n-id="remove-addon-button" action="remove"></panel-item>
        <panel-item data-l10n-id="install-update-button" action="install-update" badged></panel-item>
        <panel-item-separator></panel-item-separator>
        <panel-item data-l10n-id="report-addon-button" action="report"></panel-item>
        <panel-item-separator></panel-item-separator>
        <panel-item data-l10n-id="expand-addon-button" action="expand"></panel-item>
      </panel-list>
    </template>

    <template name="plugin-options">
      <panel-list>
        <panel-item data-l10n-id="ask-to-activate-button" action="ask-to-activate"></panel-item>
        <panel-item data-l10n-id="always-activate-button" action="always-activate"></panel-item>
        <panel-item data-l10n-id="never-activate-button" action="never-activate"></panel-item>
        <panel-item-separator></panel-item-separator>
        <panel-item data-l10n-id="expand-addon-button" action="expand"></panel-item>
      </panel-list>
    </template>

    <template name="card">
      <div class="card addon">
        <img class="card-heading-image">
        <div class="addon-card-collapsed">
          <img class="card-heading-icon addon-icon">
          <div class="card-contents">
            <div class="addon-name-container">
              <span class="addon-name"></span>
              <div class="addon-badge addon-badge-private-browsing-allowed"
                    data-l10n-id="addon-badge-private-browsing-allowed"
                    hidden></div>
            </div>
            <span class="addon-description"></span>
          </div>
          <div class="more-options-menu">
            <button class="more-options-button ghost-button" action="more-options"></button>
          </div>
        </div>
      </div>
    </template>

    <template name="addon-name-container-in-disco-card">
      <div class="disco-card-head">
        <span class="disco-addon-name"></span>
        <span class="disco-addon-author"><a data-l10n-name="author" target="_blank"></a></span>
      </div>
      <button class="disco-cta-button primary" action="install-addon"></button>
      <button class="disco-cta-button" data-l10n-id="manage-addon-button" action="manage-addon"></button>
    </template>

    <template name="addon-description-in-disco-card">
      <div>
        <strong class="disco-description-intro"></strong>
        <span class="disco-description-main"></span>
      </div>
    </template>

    <template name="addon-details">
      <div class="addon-detail-description"></div>
      <div class="addon-detail-contribute">
        <label data-l10n-id="detail-contributions-description"></label>
        <button
          class="addon-detail-contribute-button"
          action="contribute"
          data-l10n-id="detail-contributions-button"
          data-l10n-attrs="accesskey">
        </button>
      </div>
      <div class="addon-detail-row addon-detail-row-updates">
        <label data-l10n-id="addon-detail-updates-label"></label>
        <div>
          <button class="button-link" data-l10n-id="addon-detail-update-check-label" action="update-check" hidden></button>
          <label>
            <input type="radio" name="autoupdate" value="1"/>
            <span data-l10n-id="addon-detail-updates-radio-default"></span>
          </label>
          <label>
            <input type="radio" name="autoupdate" value="2"/>
            <span data-l10n-id="addon-detail-updates-radio-on"></span>
          </label>
          <label>
            <input type="radio" name="autoupdate" value="0"/>
            <span data-l10n-id="addon-detail-updates-radio-off"></span>
          </label>
        </div>
      </div>
      <div class="addon-detail-row addon-detail-row-has-help addon-detail-row-private-browsing">
        <label data-l10n-id="detail-private-browsing-label"></label>
        <div>
          <label>
            <input type="radio" name="private-browsing" value="1"/>
            <span data-l10n-id="addon-detail-private-browsing-allow"></span>
          </label>
          <label>
            <input type="radio" name="private-browsing" value="0"/>
            <span data-l10n-id="addon-detail-private-browsing-disallow"></span>
          </label>
        </div>
      </div>
      <div class="addon-detail-row-help" data-l10n-id="addon-detail-private-browsing-help">
        <a target="_blank" data-l10n-name="learn-more"></a>
      </div>
      <div class="addon-detail-row addon-detail-row-author">
        <label data-l10n-id="addon-detail-author-label"></label>
      </div>
      <div class="addon-detail-row addon-detail-row-version">
        <label data-l10n-id="addon-detail-version-label"></label>
      </div>
      <div class="addon-detail-row addon-detail-row-lastUpdated">
        <label data-l10n-id="addon-detail-last-updated-label"></label>
      </div>
      <div class="addon-detail-row addon-detail-row-homepage">
        <label data-l10n-id="addon-detail-homepage-label"></label>
        <a target="_blank"></a>
      </div>
      <div class="addon-detail-row addon-detail-row-rating">
        <label data-l10n-id="addon-detail-rating-label"></label>
        <div class="addon-detail-rating">
          <five-star-rating></five-star-rating>
          <a target="_blank"></a>
        </div>
      </div>
    </template>

    <template name="five-star-rating">
      <link rel="stylesheet" href="chrome://mozapps/content/extensions/rating-star.css">
      <span class="rating-star"></span>
      <span class="rating-star"></span>
      <span class="rating-star"></span>
      <span class="rating-star"></span>
      <span class="rating-star"></span>
    </template>

    <template name="panel-list">
      <link rel="stylesheet" href="chrome://mozapps/content/extensions/panel-list.css">
      <div class="arrow top"></div>
      <div class="list">
        <slot></slot>
      </div>
      <div class="arrow bottom"></div>
    </template>

    <template name="panel-item">
      <link rel="stylesheet" href="chrome://mozapps/content/extensions/panel-item.css">
      <button><slot></slot></button>
    </template>

    <template name="discopane">
      <header>
        <p>
          <span data-l10n-id="discopane-intro">
            <a
              class="discopane-intro-learn-more-link"
              data-l10n-name="learn-more-trigger"
              target="_blank">
            </a>
          </span>
        </p>
      </header>
      <message-bar class="discopane-notice">
        <div class="discopane-notice-content">
          <span data-l10n-id="discopane-notice-recommendations"></span>
          <button data-l10n-id="discopane-notice-learn-more" action="notice-learn-more"></button>
        </div>
      </message-bar>
      <recommended-addon-list></recommended-addon-list>
      <footer class="discopane-footer">
        <div>
          <button class="primary" action="open-amo" data-l10n-id="find-more-addons"></button>
        </div>
        <div>
          <a
            class="discopane-privacy-policy-link"
            data-l10n-id="privacy-policy"
            href="https://www.mozilla.org/privacy/firefox/?utm_source=firefox-browser&amp;utm_medium=firefox-browser&amp;utm_content=privacy-policy-link#addons"
            target="_blank"
          ></a>
        </div>
      </footer>
    </template>
  </body>
</html>