Display data collection permissions in add-on detail page (#13636)

diox · web-flow · commit c55dfa9ebbb2 · 2025-06-19T13:54:56.000+02:00
* Display data collection permissions in add-on detail page

* Bump subheader to h4, leave it with the default color

* Swap tests to be more realistic
diff --git a/src/amo/components/PermissionsCard/index.js b/src/amo/components/PermissionsCard/index.js
@@ -37,26 +37,49 @@ export class PermissionsCardBase extends React.Component<InternalProps> {
     });
 
     if (
-      !addonPermissions.optional.length &&
-      !addonPermissions.required.length
+      !addonPermissions.permissions.optional.length &&
+      !addonPermissions.permissions.required.length &&
+      !addonPermissions.data_collection_permissions.optional.length &&
+      !addonPermissions.data_collection_permissions.required.length
     ) {
       return null;
     }
 
-    const optionalContent = permissionUtils.formatPermissions(
-      addonPermissions.optional,
+    const optionalPermissionsContent = permissionUtils.formatPermissions(
+      addonPermissions.permissions.optional,
     );
-    const requiredContent = permissionUtils.formatPermissions(
-      addonPermissions.required,
+    const requiredPermissionsContent = permissionUtils.formatPermissions(
+      addonPermissions.permissions.required,
     );
+    const optionalDataCollectionPermissionsContent =
+      permissionUtils.formatPermissions(
+        addonPermissions.data_collection_permissions.optional,
+      );
+    const requiredDataCollectionPermissionsContent =
+      permissionUtils.formatPermissions(
+        addonPermissions.data_collection_permissions.required,
+      );
 
-    if (!optionalContent.length && !requiredContent.length) {
+    if (
+      !optionalPermissionsContent.length &&
+      !requiredPermissionsContent.length &&
+      !optionalDataCollectionPermissionsContent.length &&
+      !requiredDataCollectionPermissionsContent.length
+    ) {
       return null;
     }
 
+    // 'none' is a special string that can only appear alone in required data
+    // collection permissions, and the header changes when it appears.
+    const requiredDataCollectionPermissionsHeader =
+      addonPermissions.data_collection_permissions.required.length === 1 &&
+      addonPermissions.data_collection_permissions.required[0] === 'none'
+        ? i18n.gettext('Data collection:')
+        : i18n.gettext('Required data collection, according to the developer:');
+
     const header = (
       <div className="PermissionsCard-header">
-        {i18n.gettext('Permissions')}
+        {i18n.gettext('Permissions and data')}
         <Link
           className="PermissionsCard-learn-more"
           href="https://support.mozilla.org/kb/permission-request-messages-firefox-extensions"
@@ -78,23 +101,45 @@ export class PermissionsCardBase extends React.Component<InternalProps> {
         id="AddonDescription-permissions-card"
         maxHeight={300}
       >
-        {requiredContent.length ? (
+        {requiredPermissionsContent.length ? (
           <>
-            <p className="PermissionsCard-subhead--required">
+            <h4 className="PermissionsCard-subhead--required">
               {i18n.gettext('Required permissions:')}
-            </p>
+            </h4>
             <ul className="PermissionsCard-list--required">
-              {requiredContent}
+              {requiredPermissionsContent}
             </ul>
           </>
         ) : null}
-        {optionalContent.length ? (
+        {optionalPermissionsContent.length ? (
           <>
-            <p className="PermissionsCard-subhead--optional">
+            <h4 className="PermissionsCard-subhead--optional">
               {i18n.gettext('Optional permissions:')}
-            </p>
+            </h4>
+            <ul className="PermissionsCard-list--optional">
+              {optionalPermissionsContent}
+            </ul>
+          </>
+        ) : null}
+        {requiredDataCollectionPermissionsContent.length ? (
+          <>
+            <h4 className="PermissionsCard-subhead--required">
+              {requiredDataCollectionPermissionsHeader}
+            </h4>
+            <ul className="PermissionsCard-list--required">
+              {requiredDataCollectionPermissionsContent}
+            </ul>
+          </>
+        ) : null}
+        {optionalDataCollectionPermissionsContent.length ? (
+          <>
+            <h4 className="PermissionsCard-subhead--optional">
+              {i18n.gettext(
+                'Optional data collection, according to the developer:',
+              )}
+            </h4>
             <ul className="PermissionsCard-list--optional">
-              {optionalContent}
+              {optionalDataCollectionPermissionsContent}
             </ul>
           </>
         ) : null}
diff --git a/src/amo/components/PermissionsCard/permissions.js b/src/amo/components/PermissionsCard/permissions.js
@@ -17,12 +17,14 @@ export class PermissionUtils {
 
   permissionStrings: Object;
 
+  dataCollectionPermissionStrings: Object;
+
   constructor(i18n: I18nType) {
     this.i18n = i18n;
     // These should be kept in sync with Firefox's strings for webextension
     // permissions which can be found in:
-    // https://searchfox.org/mozilla-central/rev/b0b003e992b199fd8e13999bd5d06d06c84a3fd2/toolkit/components/extensions/ExtensionPermissionMessages.sys.mjs#32
-    // https://searchfox.org/mozilla-central/rev/b0b003e992b199fd8e13999bd5d06d06c84a3fd2/toolkit/locales/en-US/toolkit/global/extensionPermissions.ftl
+    // https://searchfox.org/mozilla-central/rev/fdb34ddfe30bd54aba991feb72b1476c77938e46/toolkit/components/extensions/ExtensionPermissionMessages.sys.mjs#32
+    // https://searchfox.org/mozilla-central/rev/fdb34ddfe30bd54aba991feb72b1476c77938e46/toolkit/locales/en-US/toolkit/global/extensionPermissions.ftl
     this.permissionStrings = {
       bookmarks: i18n.gettext('Read and modify bookmarks'),
       browserSettings: i18n.gettext('Read and modify browser settings'),
@@ -59,28 +61,67 @@ export class PermissionUtils {
       topSites: i18n.gettext('Access browsing history'),
       webNavigation: i18n.gettext('Access browser activity during navigation'),
     };
+
+    this.dataCollectionPermissionStrings = {
+      authenticationInfo: i18n.gettext('Authentication information'),
+      bookmarksInfo: i18n.gettext('Bookmarks'),
+      browsingActivity: i18n.gettext('Browsing activity'),
+      financialAndPaymentInfo: i18n.gettext(
+        'Financial and payment information',
+      ),
+      healthInfo: i18n.gettext('Health information'),
+      locationInfo: i18n.gettext('Location'),
+      personalCommunications: i18n.gettext('Personal communications'),
+      personallyIdentifyingInfo: i18n.gettext(
+        'Personally identifying information',
+      ),
+      searchTerms: i18n.gettext('Search terms'),
+      technicalAndInteraction: i18n.gettext('Technical and interaction data'),
+      websiteActivity: i18n.gettext('Website activity'),
+      websiteContent: i18n.gettext('Website content'),
+
+      // 'none' is a special string that can only appear alone in required data
+      // collection permissions, and the header changes when it appears.
+      none: i18n.gettext(
+        "The developer says this extension doesn't require data collection.",
+      ),
+    };
   }
 
   // Get lists of optional and required permissions from the correct platform file.
   getCurrentPermissions({ file }: GetCurrentPermissionsParams): {
-    optional: Array<string>,
-    required: Array<string>,
+    permissions: {
+      optional: Array<string>,
+      required: Array<string>,
+    },
+    data_collection_permissions: {
+      optional: Array<string>,
+      required: Array<string>,
+    },
   } {
     const permissions = {
       optional: [],
       required: [],
     };
+    const data_collection_permissions = {
+      optional: [],
+      required: [],
+    };
 
     if (!file) {
       log.debug('getCurrentPermissions() called with no file');
 
-      return permissions;
+      return { permissions, data_collection_permissions };
     }
 
     const hostPermissions = file.host_permissions || [];
     permissions.optional = [...file.optional_permissions, ...hostPermissions];
     permissions.required = file.permissions;
-    return permissions;
+    data_collection_permissions.optional =
+      file.optional_data_collection_permissions || [];
+    data_collection_permissions.required =
+      file.data_collection_permissions || [];
+    return { permissions, data_collection_permissions };
   }
 
   // Classify a permission as a host permission or a regular permission.
@@ -128,12 +169,12 @@ export class PermissionUtils {
         continue;
       }
       // Only output a permission if we have a string defined for it.
-      if (this.permissionStrings[permission]) {
+      const permissionString =
+        this.permissionStrings[permission] ||
+        this.dataCollectionPermissionStrings[permission];
+      if (permissionString) {
         permissionsToDisplay.push(
-          <Permission
-            description={this.permissionStrings[permission]}
-            key={permission}
-          />,
+          <Permission description={permissionString} key={permission} />,
         );
       }
     }
diff --git a/src/amo/components/PermissionsCard/styles.scss b/src/amo/components/PermissionsCard/styles.scss
@@ -14,7 +14,6 @@
 
 .PermissionsCard-subhead--optional,
 .PermissionsCard-subhead--required {
-  color: $grey-50;
   margin: 24px 0 0;
 
   &:first-child {
diff --git a/src/amo/reducers/versions.js b/src/amo/reducers/versions.js
@@ -28,10 +28,12 @@ export type VersionIdType = number;
 
 export type AddonFileType = {|
   created: string,
+  data_collection_permissions?: Array<string>,
   hash: string,
   id: number,
   is_mozilla_signed_extension: boolean,
   host_permissions: Array<string>,
+  optional_data_collection_permissions?: Array<string>,
   optional_permissions: Array<string>,
   permissions: Array<string>,
   platform: 'all' | 'android' | 'mac' | 'linux' | 'windows',
diff --git a/tests/unit/amo/components/TestPermissionUtils.js b/tests/unit/amo/components/TestPermissionUtils.js
@@ -25,8 +25,14 @@ describe(__filename, () => {
       };
 
       expect(_getCurrentPermissions({ file })).toEqual({
-        optional: optionalPermissions,
-        required: permissions,
+        permissions: {
+          optional: optionalPermissions,
+          required: permissions,
+        },
+        data_collection_permissions: {
+          optional: [],
+          required: [],
+        },
       });
     });
 
@@ -42,16 +48,51 @@ describe(__filename, () => {
       };
 
       expect(_getCurrentPermissions({ file })).toEqual({
-        optional: [...optionalPermissions, ...hostPermissions],
-        required: permissions,
+        permissions: {
+          optional: [...optionalPermissions, ...hostPermissions],
+          required: permissions,
+        },
+        data_collection_permissions: {
+          optional: [],
+          required: [],
+        },
+      });
+    });
+
+    it('returns data_collection_permissions from file', () => {
+      const optionalDataCollectionPermissions = ['authenticationInfo'];
+      const requiredDataCollectionPermissions = ['searchTerms'];
+
+      const file = {
+        permissions: [],
+        optional_permissions: [],
+        optional_data_collection_permissions: optionalDataCollectionPermissions,
+        data_collection_permissions: requiredDataCollectionPermissions,
+      };
+
+      expect(_getCurrentPermissions({ file })).toEqual({
+        permissions: {
+          optional: [],
+          required: [],
+        },
+        data_collection_permissions: {
+          optional: optionalDataCollectionPermissions,
+          required: requiredDataCollectionPermissions,
+        },
       });
     });
 
     it('returns empty arrays if no file was found', () => {
       const file = null;
       expect(_getCurrentPermissions({ file })).toEqual({
-        optional: [],
-        required: [],
+        permissions: {
+          optional: [],
+          required: [],
+        },
+        data_collection_permissions: {
+          optional: [],
+          required: [],
+        },
       });
     });
   });
@@ -115,5 +156,21 @@ describe(__filename, () => {
         hostPermissionB,
       ]);
     });
+
+    it('formats data collection permission strings', () => {
+      const testPermissions = [
+        'technicalAndInteraction',
+        'personallyIdentifyingInfo',
+        'foobar',
+      ];
+      const result = permissionUtils.formatPermissions(testPermissions);
+      expect(result).toHaveLength(2);
+      expect(result[0].props.description).toEqual(
+        'Personally identifying information',
+      );
+      expect(result[1].props.description).toEqual(
+        'Technical and interaction data',
+      );
+    });
   });
 });
diff --git a/tests/unit/amo/pages/TestAddon.js b/tests/unit/amo/pages/TestAddon.js
