-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature: Export report in an HTML file (#545)
* feat: add summary export components * ref:report generation * style-fix: redesign download report button * fix:no of frames showing up * Minor refactoring * Minor improvements * ref: remove devServer config for report * ref: add types * ref: refactor report app assembly * feat: add library detection section in report * ref: move download button * feat:disable download button until library detection is done * feat: add disable reason in download report button * style-fix: update font-sized * feat: name report file based on top level url * ref: move download button to menubar * style-fix: scale down download item * Fix infinite loading issue when a new tab is opened The issue originally started in PR#562 when we were trying to fix the case when the user visits a 404 page and the library detection section goes into infinite loop * ref:refactor report view * ref: add unit test for report view * ref: add unit test for report object generation * ref: move dependencies and return null with invalid data * ref: move dependencies and return null with invalid data --------- Co-authored-by: sayedtaqui <sayedwp@gmail.com>
- Loading branch information
1 parent
a83a404
commit f0a113e
Showing
30 changed files
with
28,750 additions
and
395 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| /* | ||
| * Copyright 2023 Google LLC | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * https://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
| /** | ||
| * External dependencies. | ||
| */ | ||
| import type { | ||
| LibraryData, | ||
| TabCookies, | ||
| TabFrames, | ||
| } from '@ps-analysis-tool/common'; | ||
| import { saveAs } from 'file-saver'; | ||
| /** | ||
| * Internal dependencies. | ||
| */ | ||
| import generateReportObject from './generateReportObject'; | ||
|
|
||
| /** | ||
| * Utility function to download report. | ||
| * @param url Top level URL. | ||
| * @param tabCookies Tab cookies. | ||
| * @param tabFrames Tab frames. | ||
| * @param libraryMatches | ||
| */ | ||
| export default async function downloadReport( | ||
| url: string, | ||
| tabCookies: TabCookies, | ||
| tabFrames: TabFrames, | ||
| libraryMatches: LibraryData | ||
| ) { | ||
| const htmlText = await (await fetch('../report/index.html')).text(); | ||
| const parser = new DOMParser(); | ||
| const reportDom = parser.parseFromString(htmlText, 'text/html'); | ||
|
|
||
| // Injections | ||
| const script = reportDom.createElement('script'); | ||
|
|
||
| const reportData = generateReportObject( | ||
| tabCookies, | ||
| tabFrames, | ||
| libraryMatches | ||
| ); | ||
|
|
||
| const code = `window.PSAT_DATA = ${JSON.stringify(reportData)}`; | ||
|
|
||
| script.text = code; | ||
| reportDom.head.appendChild(script); | ||
|
|
||
| const injectedHtmlText = `<head>${reportDom.head.innerHTML}<head><body>${reportDom.body.innerHTML}</body>`; | ||
| const html = new Blob([injectedHtmlText]); | ||
| const hostname = new URL(url).hostname; | ||
|
|
||
| saveAs(html, `${hostname.replace('.', '-')}-report.html`); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| /* | ||
| * Copyright 2023 Google LLC | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * https://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| /** | ||
| * External dependencies. | ||
| */ | ||
| import type { | ||
| LibraryData, | ||
| TabCookies, | ||
| TabFrames, | ||
| } from '@ps-analysis-tool/common'; | ||
|
|
||
| import { | ||
| prepareCookieStatsComponents, | ||
| prepareCookiesCount, | ||
| prepareFrameStatsComponent, | ||
| type DataMapping, | ||
| } from '@ps-analysis-tool/design-system'; | ||
|
|
||
| /** | ||
| * Utility function to generate report object. | ||
| * @param url Top level URL. | ||
| * @param tabCookies Tab cookies. | ||
| * @param tabFrames Tab frames. | ||
| * @param libraryMatches | ||
| */ | ||
| export default function generateReportObject( | ||
| tabCookies: TabCookies, | ||
| tabFrames: TabFrames, | ||
| libraryMatches: LibraryData | ||
| ) { | ||
| const cookieStats = prepareCookiesCount(tabCookies); | ||
| const cookiesStatsComponents = prepareCookieStatsComponents(cookieStats); | ||
| const frameStateCreator = prepareFrameStatsComponent(tabFrames, tabCookies); | ||
|
|
||
| const cookieClassificationDataMapping: DataMapping[] = [ | ||
| { | ||
| title: 'Total cookies', | ||
| count: cookieStats.total, | ||
| data: cookiesStatsComponents.legend, | ||
| }, | ||
| { | ||
| title: '1st party cookies', | ||
| count: cookieStats.firstParty.total, | ||
| data: cookiesStatsComponents.firstParty, | ||
| }, | ||
| { | ||
| title: '3rd party cookies', | ||
| count: cookieStats.thirdParty.total, | ||
| data: cookiesStatsComponents.thirdParty, | ||
| }, | ||
| ]; | ||
|
|
||
| const blockedCookieDataMapping: DataMapping[] = [ | ||
| { | ||
| title: 'Blocked cookies', | ||
| count: cookieStats.blockedCookies.total, | ||
| data: cookiesStatsComponents.blocked, | ||
| }, | ||
| ]; | ||
|
|
||
| return { | ||
| cookieClassificationDataMapping, | ||
| tabCookies, | ||
| cookiesStatsComponents, | ||
| tabFrames, | ||
| showInfoIcon: true, | ||
| showHorizontalMatrix: false, | ||
| blockedCookieDataMapping, | ||
| showBlockedInfoIcon: true, | ||
| frameStateCreator, | ||
| libraryMatches, | ||
| }; | ||
| } |
Oops, something went wrong.