From ffbff0ef1346f663df618c80a4353b571bca4ca7 Mon Sep 17 00:00:00 2001 From: Rob Paveza Date: Fri, 22 Jan 2021 11:59:31 -0700 Subject: [PATCH 1/6] Added accessible JSON viewer. This change introduces a new JSON viewer component. This component is based on the FAST-React `` component with minor modifications (which take place within CSS definitions). It removes the react-json-view component, which cannot be navigated at all with the keyboard. --- .../public/index.html | 75 +++++++++++++++ .../src/_locales/en/messages.json | 21 +++++ .../src/_locales/ps-PS/messages.json | 40 ++++++++ .../src/themes/vscode-theme.ts | 2 + .../src/ui/JSONView/Property.tsx | 84 +++++++++++++++++ .../src/ui/JSONView/index.tsx | 92 +++++++++++++++++++ .../src/ui/ResponseViewer/preview.tsx | 18 ++-- 7 files changed, 324 insertions(+), 8 deletions(-) create mode 100644 packages/devtools-network-console/src/ui/JSONView/Property.tsx create mode 100644 packages/devtools-network-console/src/ui/JSONView/index.tsx diff --git a/packages/devtools-network-console/public/index.html b/packages/devtools-network-console/public/index.html index e317e02..c4d7f56 100644 --- a/packages/devtools-network-console/public/index.html +++ b/packages/devtools-network-console/public/index.html @@ -117,6 +117,81 @@ z-index: auto !important; } +.json-view-item { + font-family: Consolas, 'Open Sans', 'Courier New', monospace; + font-size: 12px; +} + +span.json-view-string { + color: #0451a5; +} + +span.json-view-string.json-view-key { + color: #a31515; +} + +span.json-view-key::after { + content: ': '; + color: #555; + white-space: pre; +} + +span.json-view-string::before, span.json-view-string::after { + content: '"'; + color: #555; +} + +span.json-view-string.json-view-key::after { + content: '": '; +} + +span.json-view-number { + color: #09885a; +} + +.light span.json-view-number.json-view-key { + color: #0451a5 +} + +span.json-view-boolean { + color: #00f; +} + +span.json-view-undefined-or-null { + color: #666; + font-style: italic; +} + +.dark span.json-view-string, .dark span.json-view-boolean { + color: #ce9178; +} + +.dark span.json-view-string.json-view-key { + color: #9cdcfe; +} + +.dark span.json-view-key::after, .dark span.json-view-string::before, .dark span.json-view-string::after { + color: #aaa; +} + +.dark span.json-view-number { + color: #b5cea8; +} + +.dark span.json-view-undefined-or-null { + color: #bbb; +} + +/* Unset the height of treeview items to allow the values to word-wrap without looking funky */ +.json-tree-view-item-can-wrap > div { + height: unset !important; +} + +.json-view-string:not(.json-view-key) { + word-break:break-all; + white-space: break-spaces; +} + diff --git a/packages/devtools-network-console/src/_locales/en/messages.json b/packages/devtools-network-console/src/_locales/en/messages.json index 5244e7d..aad4351 100644 --- a/packages/devtools-network-console/src/_locales/en/messages.json +++ b/packages/devtools-network-console/src/_locales/en/messages.json @@ -324,6 +324,27 @@ "description": "Title of dropdown for selecting an HTTP verb" }, + "JSONView.rootElement.title": { + "message": "(root)", + "description": "Label for the root 'property' of a JSON value being previewed" + }, + "JSONView.property.emptyArray": { + "message": "Empty array", + "description": "Label for property values of arrays that are empty" + }, + "JSONView.property.arrayValue": { + "message": "Array", + "description": "Label for property values of arrays with contents" + }, + "JSONView.property.emptyObject": { + "message": "Empty object", + "description": "Label for property values of objects that are empty" + }, + "JSONView.property.objectValue": { + "message": "Object", + "description": "Label for property values of objects with contents" + }, + "KNOWN_HTTP_VERBS.GET": { "message": "Requests transfer of a currently selected representation for the target resource. GET is the primary mechanism of information retrieval and the focus of almost all performance optimizations.", "description": "Description of the defined behavior of the HTTP GET verb" diff --git a/packages/devtools-network-console/src/_locales/ps-PS/messages.json b/packages/devtools-network-console/src/_locales/ps-PS/messages.json index ffa5ec0..2b1895c 100644 --- a/packages/devtools-network-console/src/_locales/ps-PS/messages.json +++ b/packages/devtools-network-console/src/_locales/ps-PS/messages.json @@ -47,6 +47,10 @@ "message": "T̂h́îś r̂éq̂úêśt̂ d́ôéŝ ńôt́ ûśê áût́ĥór̂íẑát̂íôń.", "description": "Description label for 'None' style authorization choice" }, + "Authorization.groupLabel": { + "message": "Âút̂h́ôŕîźât́îón̂ śêĺêćt̂íôń", + "description": "ARIA label for the radio button list for choosing an authorization mechanism" + }, "Authorization.Shared.dataSensitiveWarning": { "message": "T̂h́êśê ṕâŕâḿêt́êŕŝ ḿâý ĉón̂t́âín̂ śêńŝít̂ív̂é îńf̂ór̂ḿât́îón̂. Ćôńŝíd̂ér̂ śp̂éĉíf̂ýîńĝ t́ĥéŝé ŵít̂h́ êńv̂ír̂ón̂ḿêńt̂ v́âŕîáb̂ĺêś ĥér̂é, âńd̂ śp̂éĉíf̂ýîńĝ t́ĥát̂ ýôúr̂ én̂v́îŕôńm̂én̂t́ v̂ár̂íâb́l̂éŝ ár̂én̂'t́ ĉh́êćk̂éd̂ ín̂ t́ô śôúr̂ćê ćôńt̂ŕôĺ.", "description": "Helper text indicating that users' authorization settings should not be checked into source control." @@ -299,10 +303,34 @@ "message": "Êx́p̂án̂d́ t̂h́ê ćâĺl̂ śt̂áĉḱ t̂ó ŝéê ér̂ŕôŕ d̂ét̂áîĺŝ", "description": "Accessible label for link that displays the call stack" }, + "Generic.deletedEntryAnnouncement": { + "message": "D̂él̂ét̂éd̂", + "description": "Screen reader announcement for when a grid row is deleted." + }, "HttpVerbPicker.title": { "message": "Ĉh́ôóŝé âń ĤT́T̂Ṕ M̂ét̂h́ôd́ ôŕ V̂ér̂b́", "description": "Title of dropdown for selecting an HTTP verb" }, + "JSONView.rootElement.title": { + "message": "(r̂óôt́)", + "description": "Label for the root 'property' of a JSON value being previewed" + }, + "JSONView.property.emptyArray": { + "message": "Êḿp̂t́ŷ ár̂ŕâý", + "description": "Label for property values of arrays that are empty" + }, + "JSONView.property.arrayValue": { + "message": "Âŕr̂áŷ", + "description": "Label for property values of arrays with contents" + }, + "JSONView.property.emptyObject": { + "message": "Êḿp̂t́ŷ ób̂j́êćt̂", + "description": "Label for property values of objects that are empty" + }, + "JSONView.property.objectValue": { + "message": "Ôb́ĵéĉt́", + "description": "Label for property values of objects with contents" + }, "KNOWN_HTTP_VERBS.GET": { "message": "R̂éq̂úêśt̂ś t̂ŕâńŝf́êŕ ôf́ â ćûŕr̂én̂t́l̂ý ŝél̂éĉt́êd́ r̂ép̂ŕêśêńt̂át̂íôń f̂ór̂ t́ĥé t̂ár̂ǵêt́ r̂éŝóûŕĉé. ĜÉT̂ íŝ t́ĥé p̂ŕîḿâŕŷ ḿêćĥán̂íŝḿ ôf́ îńf̂ór̂ḿât́îón̂ ŕêt́r̂íêv́âĺ âńd̂ t́ĥé f̂óĉúŝ óf̂ ál̂ḿôśt̂ ál̂ĺ p̂ér̂f́ôŕm̂án̂ćê óp̂t́îḿîźât́îón̂ś.", "description": "Description of the defined behavior of the HTTP GET verb" @@ -359,6 +387,10 @@ "message": "L̂éâŕn̂ ḿôŕê", "description": "Link label to learn more about an error." }, + "RequestBody.groupLabel": { + "message": "R̂éq̂úêśt̂ b́ôd́ŷ ḿôd́ê śêĺêćt̂íôń", + "description": "ARIA label for the radio button list for choosing a body mode" + }, "RequestEditor.NoBody.message": { "message": "T̂ó îńĉĺûd́ê á r̂éq̂úêśt̂ b́ôd́ŷ, ćĥóôśê ón̂é ôf́ t̂h́ê ót̂h́êŕ m̂ód̂éŝ áb̂óv̂é.", "description": "Informative label directing the user how to choose a different body mode" @@ -511,6 +543,14 @@ "message": "T̂ím̂é", "description": "Label of the round-trip time" }, + "SaveToCollection.createNewCollectionLabel": { + "message": "Ĉŕêát̂é â ńêẃ Ĉól̂ĺêćt̂íôń", + "description": "Button label to create a new Collection when one does not exist" + }, + "SaveToCollection.noCollections": { + "message": "Ŷóû d́ôń't̂ h́âv́ê án̂ý ĉól̂ĺêćt̂íôńŝ d́êf́îńêd́ f̂ór̂ śâv́îńĝ t́ĥíŝ ŕêq́ûéŝt́.", + "description": "Message informing the user that there are no collections to save a request into" + }, "ViewSelect.create": { "message": "Ĉŕêát̂é â ŕêq́ûéŝt́", "description": "Action title to create a new default request" diff --git a/packages/devtools-network-console/src/themes/vscode-theme.ts b/packages/devtools-network-console/src/themes/vscode-theme.ts index d13ac46..fdf608b 100644 --- a/packages/devtools-network-console/src/themes/vscode-theme.ts +++ b/packages/devtools-network-console/src/themes/vscode-theme.ts @@ -113,5 +113,7 @@ export function recalculateAndApplyTheme(sourceCss: string, themeType: THEME_TYP --nc-theme-dividers: ${palette.splitterColor}; background-color: ${themeType === 'light' ? 'white' : 'rgb(30,30,30)'};` ); + document.body.classList.toggle(themeType, true); + document.body.classList.toggle(themeType === 'light' ? 'dark' : 'light', false); globalDispatch({ type: 'SET_THEME_TYPE', themeType, }); } diff --git a/packages/devtools-network-console/src/ui/JSONView/Property.tsx b/packages/devtools-network-console/src/ui/JSONView/Property.tsx new file mode 100644 index 0000000..463ff41 --- /dev/null +++ b/packages/devtools-network-console/src/ui/JSONView/Property.tsx @@ -0,0 +1,84 @@ +import React from 'react'; +import { LocalizationConsumer, getText } from 'utility/loc-context'; + +interface PropertyProps { + keyKind: 'string' | 'number'; + name: string | number; + value: any; +} + +function Property(props: PropertyProps) { + const classList = ['json-view-key']; + if (props.keyKind === 'string') { + classList.push('json-view-string'); + } + else { + classList.push('json-view-number'); + } + + const typeofValue = typeof props.value; + const isArray = Array.isArray(props.value); + const isEmptyArray = isArray && props.value.length === 0; + const isObjectType = !isArray && typeofValue === 'object'; + const isObject = isObjectType && props.value !== null; + const isNull = isObjectType && props.value === null; + const isEmptyObject = isObject && Object.keys(props.value).length === 0; + // This value is assigned (and therefore truthy) if none of the other conditions is met. + // In that case, the value is one of: number, bigint, string, boolean, or undefined + let otherPrimitiveClassName = ''; + if (typeofValue === 'undefined') { + otherPrimitiveClassName = 'json-view-undefined-or-null'; + } + else if (typeofValue === 'number' || typeofValue === 'bigint') { + otherPrimitiveClassName = 'json-view-number'; + } + else if (typeofValue === 'string') { + otherPrimitiveClassName = 'json-view-string'; + } + else if (typeofValue === 'boolean') { + otherPrimitiveClassName = 'json-view-boolean'; + } + else { + // Should not occur for JSON-deserialized values + // Leave it empty to avoid rendering anything + } + + return ( + + {locale => { + return ( +
+ {props.name} +   + {isEmptyArray && ( + [ ] + )} + + {(isArray && !isEmptyArray) && ( + [{(props.value as Array).length}] + )} + + {isEmptyObject && ( + {`{ }`} + )} + + {(isObject && !isEmptyObject) && ( + {`{…}`} + )} + + {isNull && ( + null + )} + + {!!otherPrimitiveClassName && ( + {String(props.value)} + )} +
+ ); + }} + + ); +} + +const PropertyMemoized = React.memo(Property); +export default PropertyMemoized; diff --git a/packages/devtools-network-console/src/ui/JSONView/index.tsx b/packages/devtools-network-console/src/ui/JSONView/index.tsx new file mode 100644 index 0000000..6e768ff --- /dev/null +++ b/packages/devtools-network-console/src/ui/JSONView/index.tsx @@ -0,0 +1,92 @@ +import React from 'react'; +import { TreeView, TreeViewItem } from '@microsoft/fast-components-react-msft'; +import { LocalizationConsumer, getText } from 'utility/loc-context'; +import Property from './Property'; + +interface IJSONViewProps { + value: any; +} + +function produceChildren(value: any, depth: number) { + if (typeof value !== 'object' || value === null) { + return undefined; + } + + let children: Array; + const isArray = Array.isArray(value); + if (isArray) { + children = Array.from(produceArrayChildren(value, depth)); + } + else { + children = Array.from(produceObjectChildren(value, depth)); + } + return children; +} + +function* produceObjectChildren(value: object, depth: number): IterableIterator { + const keys = Object.keys(value); + for (let i = 0; i < keys.length; i++) { + const key = keys[i]; + const childValue = (value as Record)[key]; + if (typeof childValue === 'object' && childValue !== null && Object.keys(childValue).length > 0) { + yield } + children={produceChildren(childValue, depth + 1)} + aria-level={depth} + /> + } + else { + yield } + aria-level={depth} + /> + } + } +} + +function* produceArrayChildren(value: Array, depth: number): IterableIterator { + for (let i = 0; i < value.length; i++) { + const childValue = value[i]; + if (typeof childValue === 'object' && childValue !== null && Object.keys(childValue).length > 0) { + yield } + children={produceChildren(childValue, depth + 1)} + aria-level={depth} + /> + } + else { + yield } + aria-level={depth} + /> + } + } +} + +function JSONViewComposed(props: IJSONViewProps) { + return ( + + {locale => { + return ( + + } + children={produceChildren(props.value, 1)} + aria-level={0} + defaultExpanded + /> + + ); + }} + + + ) +} + +const JSONViewComposedMemoized = React.memo(JSONViewComposed); +export default JSONViewComposedMemoized; diff --git a/packages/devtools-network-console/src/ui/ResponseViewer/preview.tsx b/packages/devtools-network-console/src/ui/ResponseViewer/preview.tsx index f6040b1..9747072 100644 --- a/packages/devtools-network-console/src/ui/ResponseViewer/preview.tsx +++ b/packages/devtools-network-console/src/ui/ResponseViewer/preview.tsx @@ -2,7 +2,8 @@ // Licensed under the MIT License. import * as React from 'react'; -import ReactJsonView from 'react-json-view'; +// import ReactJsonView from 'react-json-view'; +import JSONView from 'ui/JSONView'; import { strFromB64 } from 'utility/b64'; import { THEME_TYPE } from 'themes/vscode-theme'; import { getText, ILocalized } from 'utility/loc-context'; @@ -27,13 +28,14 @@ function JsonPreview({ body, theme, locale }: { body: string; theme: THEME_TYPE rjsTheme = "bright"; } const child = ( - + // + ); return child; } From 924d3d8d1649c5a74a8f114b362d6eca3c474f54 Mon Sep 17 00:00:00 2001 From: Rob Paveza Date: Fri, 22 Jan 2021 12:12:15 -0700 Subject: [PATCH 2/6] Cleaned up frontend package dependencies --- package-lock.json | 2 +- package.json | 3 +- .../package-lock.json | 327 ------------------ .../devtools-network-console/package.json | 5 - 4 files changed, 3 insertions(+), 334 deletions(-) diff --git a/package-lock.json b/package-lock.json index 30933e7..12837bb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "edge-devtools-network-console", - "version": "0.9.0", + "version": "0.11.1-preview", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 430fec9..dc3c2e7 100644 --- a/package.json +++ b/package.json @@ -22,5 +22,6 @@ "start": "node ./scripts/run-frontend", "run-tests:shared": "node ./scripts/run-package-task -- --package-name network-console-shared --task-name test", "ps": "node ./scripts/generate-pseudoloc" - } + }, + "dependencies": {} } diff --git a/packages/devtools-network-console/package-lock.json b/packages/devtools-network-console/package-lock.json index be2a7c0..4920d23 100644 --- a/packages/devtools-network-console/package-lock.json +++ b/packages/devtools-network-console/package-lock.json @@ -1246,183 +1246,6 @@ } } }, - "@fluentui/keyboard-key": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/@fluentui/keyboard-key/-/keyboard-key-0.2.1.tgz", - "integrity": "sha512-s2CYcspWWdqzwXNOvkNURifuRRiZun/5CQ3gcvRw9+S9/ONvPtedRkppNeTyj2wbW6Ctzf218bu2eJqu0aVK/Q==", - "requires": { - "tslib": "^1.10.0" - } - }, - "@fluentui/react": { - "version": "7.118.1", - "resolved": "https://registry.npmjs.org/@fluentui/react/-/react-7.118.1.tgz", - "integrity": "sha512-+xCiiU7lhNKSL+Mqod7ZAEP1JX1lm+3hRh4GhoFqkOnKbs/UMm5f5cEtXtV+noI78Ot8fHyD9/oPlPx5Bnt2Lg==", - "requires": { - "@uifabric/set-version": "^7.0.13", - "office-ui-fabric-react": "^7.118.1", - "tslib": "^1.10.0" - }, - "dependencies": { - "@fluentui/react-focus": { - "version": "7.12.6", - "resolved": "https://registry.npmjs.org/@fluentui/react-focus/-/react-focus-7.12.6.tgz", - "integrity": "sha512-FuDZnxXaTbCdnlNGwpEM2d2Ku6wKhbypba+QG7V2m/HoRnaSFaLYtCvFVRQRS84e6nIdZf9DJEA4K59Zt3SRsg==", - "requires": { - "@fluentui/keyboard-key": "^0.2.1", - "@uifabric/merge-styles": "^7.14.1", - "@uifabric/set-version": "^7.0.13", - "@uifabric/styling": "^7.12.16", - "@uifabric/utilities": "^7.20.3", - "tslib": "^1.10.0" - } - }, - "@uifabric/foundation": { - "version": "7.7.23", - "resolved": "https://registry.npmjs.org/@uifabric/foundation/-/foundation-7.7.23.tgz", - "integrity": "sha512-SxvejfkRVo86moJX4YqGAyDPJvCYS1Dq7Wd1brblnGHI44MEcLH5hmIiMuXpiPQRJjF1HoQ37RfABH2nraov9w==", - "requires": { - "@uifabric/merge-styles": "^7.14.1", - "@uifabric/set-version": "^7.0.13", - "@uifabric/styling": "^7.12.16", - "@uifabric/utilities": "^7.20.3", - "tslib": "^1.10.0" - } - }, - "@uifabric/icons": { - "version": "7.3.49", - "resolved": "https://registry.npmjs.org/@uifabric/icons/-/icons-7.3.49.tgz", - "integrity": "sha512-UVdJQgW+/0B3JS6+59rRpTSvhl1T0BUGZhRGSo7rmLxGPjBfmkgaIyDhgKViocUtjogy/oT75vnFGDWu97vuVA==", - "requires": { - "@uifabric/set-version": "^7.0.13", - "@uifabric/styling": "^7.12.16", - "tslib": "^1.10.0" - } - }, - "@uifabric/merge-styles": { - "version": "7.14.1", - "resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.14.1.tgz", - "integrity": "sha512-nKkk0o9XyVh8HL174ZSDqw3IUnN2qb+kO73vg/rwioKPEQyuPGoEfij8jrb+CGpcCGnMYi53IeB1tm8ySlNatg==", - "requires": { - "@uifabric/set-version": "^7.0.13", - "tslib": "^1.10.0" - } - }, - "@uifabric/react-hooks": { - "version": "7.4.5", - "resolved": "https://registry.npmjs.org/@uifabric/react-hooks/-/react-hooks-7.4.5.tgz", - "integrity": "sha512-OLEBII+7x4rlTWjQ6hvMWS+CuWRJgvEfCsUcFMu5D5teXTr0bZQThyW8oVvkqKsNmF2JdwwqT6dSwhwgarlFzA==", - "requires": { - "@uifabric/set-version": "^7.0.13", - "@uifabric/utilities": "^7.20.3", - "tslib": "^1.10.0" - } - }, - "@uifabric/set-version": { - "version": "7.0.13", - "resolved": "https://registry.npmjs.org/@uifabric/set-version/-/set-version-7.0.13.tgz", - "integrity": "sha512-SRsYaacvNykS9lRwKNJgrJuhPV4ytblthFNg0+Wi6+zvIf/w50k/nBlmXVetV5U9dAuX4njSkd+/3iOpgevkyw==", - "requires": { - "tslib": "^1.10.0" - } - }, - "@uifabric/styling": { - "version": "7.12.16", - "resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-7.12.16.tgz", - "integrity": "sha512-OhLTdYDgj3F+9wt5LUjuP7rXvO9t6rRcORnBqAC7mJEw9V6ha5+SS3tZiBpj8ksiFEX9ddUDgcM/E1QPc4mCJg==", - "requires": { - "@microsoft/load-themed-styles": "^1.10.26", - "@uifabric/merge-styles": "^7.14.1", - "@uifabric/set-version": "^7.0.13", - "@uifabric/utilities": "^7.20.3", - "tslib": "^1.10.0" - } - }, - "@uifabric/utilities": { - "version": "7.20.3", - "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-7.20.3.tgz", - "integrity": "sha512-Amg+qdnNKx0yxjoEFHanM2jTCYfCZAlHPDHcS+BCiSwzeQrEPhlOrtZVPJtagNVhXLFiC09uDsmE/BF6dHb+ww==", - "requires": { - "@uifabric/merge-styles": "^7.14.1", - "@uifabric/set-version": "^7.0.13", - "prop-types": "^15.7.2", - "tslib": "^1.10.0" - } - }, - "office-ui-fabric-react": { - "version": "7.118.1", - "resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-7.118.1.tgz", - "integrity": "sha512-bv6+JjQde8Ojyv4WtdNMflEYel306hehsz+iyKx/60M4/pXEXQfiHB5gYBIos13UmrTpT3SjGVmwSN+q5z+yEw==", - "requires": { - "@fluentui/react-focus": "^7.12.6", - "@fluentui/react-icons": "^0.1.25", - "@microsoft/load-themed-styles": "^1.10.26", - "@uifabric/foundation": "^7.7.23", - "@uifabric/icons": "^7.3.49", - "@uifabric/merge-styles": "^7.14.1", - "@uifabric/react-hooks": "^7.4.5", - "@uifabric/set-version": "^7.0.13", - "@uifabric/styling": "^7.12.16", - "@uifabric/utilities": "^7.20.3", - "prop-types": "^15.7.2", - "tslib": "^1.10.0" - } - } - } - }, - "@fluentui/react-icons": { - "version": "0.1.25", - "resolved": "https://registry.npmjs.org/@fluentui/react-icons/-/react-icons-0.1.25.tgz", - "integrity": "sha512-V2ENUpGq/IWm1MDySWayUvjnp+Fvs0xfYf5slVlWsM9qBdPZ8yqY672NhKuM17t5A9N3HWvURmS2NRjVcH3Z/A==", - "requires": { - "@uifabric/set-version": "^7.0.13", - "@uifabric/styling": "^7.12.16", - "@uifabric/utilities": "^7.20.3", - "tslib": "^1.10.0" - }, - "dependencies": { - "@uifabric/merge-styles": { - "version": "7.14.1", - "resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-7.14.1.tgz", - "integrity": "sha512-nKkk0o9XyVh8HL174ZSDqw3IUnN2qb+kO73vg/rwioKPEQyuPGoEfij8jrb+CGpcCGnMYi53IeB1tm8ySlNatg==", - "requires": { - "@uifabric/set-version": "^7.0.13", - "tslib": "^1.10.0" - } - }, - "@uifabric/set-version": { - "version": "7.0.13", - "resolved": "https://registry.npmjs.org/@uifabric/set-version/-/set-version-7.0.13.tgz", - "integrity": "sha512-SRsYaacvNykS9lRwKNJgrJuhPV4ytblthFNg0+Wi6+zvIf/w50k/nBlmXVetV5U9dAuX4njSkd+/3iOpgevkyw==", - "requires": { - "tslib": "^1.10.0" - } - }, - "@uifabric/styling": { - "version": "7.12.16", - "resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-7.12.16.tgz", - "integrity": "sha512-OhLTdYDgj3F+9wt5LUjuP7rXvO9t6rRcORnBqAC7mJEw9V6ha5+SS3tZiBpj8ksiFEX9ddUDgcM/E1QPc4mCJg==", - "requires": { - "@microsoft/load-themed-styles": "^1.10.26", - "@uifabric/merge-styles": "^7.14.1", - "@uifabric/set-version": "^7.0.13", - "@uifabric/utilities": "^7.20.3", - "tslib": "^1.10.0" - } - }, - "@uifabric/utilities": { - "version": "7.20.3", - "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-7.20.3.tgz", - "integrity": "sha512-Amg+qdnNKx0yxjoEFHanM2jTCYfCZAlHPDHcS+BCiSwzeQrEPhlOrtZVPJtagNVhXLFiC09uDsmE/BF6dHb+ww==", - "requires": { - "@uifabric/merge-styles": "^7.14.1", - "@uifabric/set-version": "^7.0.13", - "prop-types": "^15.7.2", - "tslib": "^1.10.0" - } - } - } - }, "@hapi/address": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", @@ -2136,11 +1959,6 @@ "exenv-es6": "^1.0.0" } }, - "@microsoft/load-themed-styles": { - "version": "1.10.43", - "resolved": "https://registry.npmjs.org/@microsoft/load-themed-styles/-/load-themed-styles-1.10.43.tgz", - "integrity": "sha512-9RUeBMXPHbT/qHTRIQi9oQs3bw5JkQGBQ8ayjycq95q+1OUI9jBJPiJi2d8btpGdJWisVb3ZXxRsUx5u6f5dRA==" - }, "@monaco-editor/react": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-3.2.1.tgz", @@ -2443,12 +2261,6 @@ "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.45.tgz", "integrity": "sha512-jnqIUKDUqJbDIUxm0Uj7bnlMnRm1T/eZ9N+AVMqhPgzrba2GhGG5o/jCTwmdPK709nEZsGoMzXEDUjcXHa3W0g==" }, - "@types/form-urlencoded": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@types/form-urlencoded/-/form-urlencoded-2.0.1.tgz", - "integrity": "sha512-Kz3LwezuNvsQF8ZcswMv4b5ZhKmjTkH2Rxle6l/520Npvaxho6b4HN9lStp6HhGrZsL/rwJHpWK9vM1RA7uZbw==", - "dev": true - }, "@types/glob": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz", @@ -2590,15 +2402,6 @@ "csstype": "^2.2.0" } }, - "@types/react-data-grid": { - "version": "4.0.5", - "resolved": "https://registry.npmjs.org/@types/react-data-grid/-/react-data-grid-4.0.5.tgz", - "integrity": "sha512-TVJt6Ss60H9z9V2sgPTUrN39UM2YZ7Ij+NnK8E1OKC+3A60L9kEY+noK2G5wKpvVRy68RamGUkgAHYJg2M39lA==", - "dev": true, - "requires": { - "@types/react": "*" - } - }, "@types/react-dom": { "version": "16.9.6", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.6.tgz", @@ -2667,12 +2470,6 @@ } } }, - "@types/utf8": { - "version": "2.1.6", - "resolved": "https://registry.npmjs.org/@types/utf8/-/utf8-2.1.6.tgz", - "integrity": "sha512-pRs2gYF5yoKYrgSaira0DJqVg2tFuF+Qjp838xS7K+mJyY2jJzjsrl6y17GbIa4uMRogMbxs+ghNCvKg6XyNrA==", - "dev": true - }, "@types/webpack": { "version": "4.41.25", "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.25.tgz", @@ -3742,11 +3539,6 @@ } } }, - "base16": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/base16/-/base16-1.0.0.tgz", - "integrity": "sha1-4pf2DX7BAUp6lxo568ipjAtoHnA=" - }, "base64-js": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", @@ -4747,21 +4539,6 @@ "sha.js": "^2.4.8" } }, - "cross-fetch": { - "version": "3.0.6", - "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.0.6.tgz", - "integrity": "sha512-KBPUbqgFjzWlVcURG+Svp9TlhA5uliYtiNx/0r8nv0pdypeQCRJ9IaSIc3q/x3q8t3F75cHuwxVql1HFGHCNJQ==", - "requires": { - "node-fetch": "2.6.1" - }, - "dependencies": { - "node-fetch": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz", - "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==" - } - } - }, "cross-spawn": { "version": "6.0.5", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", @@ -6758,30 +6535,6 @@ "bser": "2.1.1" } }, - "fbemitter": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/fbemitter/-/fbemitter-3.0.0.tgz", - "integrity": "sha512-KWKaceCwKQU0+HPoop6gn4eOHk50bBv/VxjJtGMfwmJt3D29JpN4H4eisCtIPA+a8GVBam+ldMMpMjJUvpDyHw==", - "requires": { - "fbjs": "^3.0.0" - }, - "dependencies": { - "fbjs": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-3.0.0.tgz", - "integrity": "sha512-dJd4PiDOFuhe7vk4F80Mba83Vr2QuK86FoxtgPmzBqEJahncp+13YCmfoa53KHCo6OnlXLG7eeMWPfB5CrpVKg==", - "requires": { - "cross-fetch": "^3.0.4", - "fbjs-css-vars": "^1.0.0", - "loose-envify": "^1.0.0", - "object-assign": "^4.1.0", - "promise": "^7.1.1", - "setimmediate": "^1.0.5", - "ua-parser-js": "^0.7.18" - } - } - } - }, "fbjs": { "version": "0.8.17", "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz", @@ -6796,11 +6549,6 @@ "ua-parser-js": "^0.7.18" } }, - "fbjs-css-vars": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz", - "integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==" - }, "figgy-pudding": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz", @@ -6973,31 +6721,6 @@ } } }, - "flux": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/flux/-/flux-4.0.1.tgz", - "integrity": "sha512-emk4RCvJ8RzNP2lNpphKnG7r18q8elDYNAPx7xn+bDeOIo9FFfxEfIQ2y6YbQNmnsGD3nH1noxtLE64Puz1bRQ==", - "requires": { - "fbemitter": "^3.0.0", - "fbjs": "^3.0.0" - }, - "dependencies": { - "fbjs": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-3.0.0.tgz", - "integrity": "sha512-dJd4PiDOFuhe7vk4F80Mba83Vr2QuK86FoxtgPmzBqEJahncp+13YCmfoa53KHCo6OnlXLG7eeMWPfB5CrpVKg==", - "requires": { - "cross-fetch": "^3.0.4", - "fbjs-css-vars": "^1.0.0", - "loose-envify": "^1.0.0", - "object-assign": "^4.1.0", - "promise": "^7.1.1", - "setimmediate": "^1.0.5", - "ua-parser-js": "^0.7.18" - } - } - } - }, "follow-redirects": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz", @@ -10496,16 +10219,6 @@ "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=" }, - "lodash.curry": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz", - "integrity": "sha1-JI42By7ekGUB11lmIAqG2riyMXA=" - }, - "lodash.flow": { - "version": "3.5.0", - "resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz", - "integrity": "sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o=" - }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -17356,11 +17069,6 @@ "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz", "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==" }, - "pure-color": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/pure-color/-/pure-color-1.3.0.tgz", - "integrity": "sha1-H+Bk+wrIUfDeYTIKi/eWg2Qi8z4=" - }, "q": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz", @@ -17496,17 +17204,6 @@ } } }, - "react-base16-styling": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.6.0.tgz", - "integrity": "sha1-7yFW1mz0E5aVyKFniGy2nqZgeSw=", - "requires": { - "base16": "^1.0.0", - "lodash.curry": "^4.0.1", - "lodash.flow": "^3.3.0", - "pure-color": "^1.2.0" - } - }, "react-dev-utils": { "version": "11.0.0", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.0.tgz", @@ -17664,22 +17361,6 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, - "react-json-view": { - "version": "1.20.2", - "resolved": "https://registry.npmjs.org/react-json-view/-/react-json-view-1.20.2.tgz", - "integrity": "sha512-DOGrMqhDHrvBwzwiIU/LKpZ7CFrOHrjoQ+e+d1aOJHn82t++PKuB4atiNR1Ko8UBEoGrMv44RagRSyYWTsEHKg==", - "requires": { - "flux": "^4.0.1", - "react-base16-styling": "^0.6.0", - "react-lifecycles-compat": "^3.0.4", - "react-textarea-autosize": "^6.1.0" - } - }, - "react-lifecycles-compat": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", - "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" - }, "react-redux": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.0.tgz", @@ -17762,14 +17443,6 @@ "workbox-webpack-plugin": "5.1.4" } }, - "react-textarea-autosize": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-6.1.0.tgz", - "integrity": "sha512-F6bI1dgib6fSvG8so1HuArPUv+iVEfPliuLWusLF+gAKz0FbB4jLrWUrTAeq1afnPT2c9toEZYUdz/y1uKMy4A==", - "requires": { - "prop-types": "^15.6.0" - } - }, "read-pkg": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz", diff --git a/packages/devtools-network-console/package.json b/packages/devtools-network-console/package.json index e058b66..40686f3 100644 --- a/packages/devtools-network-console/package.json +++ b/packages/devtools-network-console/package.json @@ -2,7 +2,6 @@ "name": "network-console-frontend", "version": "0.11.1-preview", "dependencies": { - "@fluentui/react": "^7.118.1", "@microsoft/fast-components-react-base": "^4.26.4", "@microsoft/fast-components-react-msft": "^4.31.2", "@microsoft/fast-jss-manager-react": "^4.7.7", @@ -18,7 +17,6 @@ "network-console-shared": "../network-console-shared", "react": "^16.9.0", "react-dom": "^16.9.0", - "react-json-view": "^1.20.2", "react-redux": "^7.1.1", "react-scripts": "^4.0.0", "redux": "^4.0.4", @@ -49,14 +47,11 @@ }, "devDependencies": { "@types/debounce": "^1.2.0", - "@types/form-urlencoded": "^2.0.1", "@types/lodash-es": "^4.17.3", "@types/react": "^16.9.2", - "@types/react-data-grid": "^4.0.3", "@types/react-dom": "^16.9.0", "@types/react-redux": "^7.1.2", "@types/redux": "^3.6.0", - "@types/utf8": "^2.1.6", "rimraf": "^3.0.2" }, "homepage": "./" From 679dc76b209c0ee2b28f76fc376645bec7c554da Mon Sep 17 00:00:00 2001 From: Rob Paveza Date: Fri, 22 Jan 2021 13:24:16 -0700 Subject: [PATCH 3/6] Removed out-of-date refs to react-json-view --- .../src/ui/ResponseViewer/index.tsx | 12 +++++----- .../src/ui/ResponseViewer/preview.tsx | 22 +++---------------- 2 files changed, 9 insertions(+), 25 deletions(-) diff --git a/packages/devtools-network-console/src/ui/ResponseViewer/index.tsx b/packages/devtools-network-console/src/ui/ResponseViewer/index.tsx index ee49b36..027d28e 100644 --- a/packages/devtools-network-console/src/ui/ResponseViewer/index.tsx +++ b/packages/devtools-network-console/src/ui/ResponseViewer/index.tsx @@ -3,13 +3,13 @@ import * as React from 'react'; import { connect, useDispatch, useSelector } from 'react-redux'; -import { - DataGrid, - DataGridColumn, - DataGridCellRenderConfig, +import { + DataGrid, + DataGridColumn, + DataGridCellRenderConfig, LightweightButton, Pivot, - Progress, + Progress, } from '@microsoft/fast-components-react-msft'; import { DesignSystemProvider } from '@microsoft/fast-jss-manager-react'; import { DataGridHeaderRenderConfig } from '@microsoft/fast-components-react-base'; @@ -167,7 +167,7 @@ function ResponseViewerWithLocale(props: IResponseViewerProps & ILocalized) { return ; } - const renderedPreview = preview(props.response.response.body.content, contentType, props.locale, props.theme); + const renderedPreview = preview(props.response.response.body.content, contentType, props.locale); const tabsToDisplay = PIVOT_DEFAULT_ITEMS.slice(); if (!!renderedPreview) { tabsToDisplay.unshift(PIVOT_PREVIEW_ITEM); diff --git a/packages/devtools-network-console/src/ui/ResponseViewer/preview.tsx b/packages/devtools-network-console/src/ui/ResponseViewer/preview.tsx index 9747072..a78d036 100644 --- a/packages/devtools-network-console/src/ui/ResponseViewer/preview.tsx +++ b/packages/devtools-network-console/src/ui/ResponseViewer/preview.tsx @@ -2,13 +2,11 @@ // Licensed under the MIT License. import * as React from 'react'; -// import ReactJsonView from 'react-json-view'; import JSONView from 'ui/JSONView'; import { strFromB64 } from 'utility/b64'; -import { THEME_TYPE } from 'themes/vscode-theme'; import { getText, ILocalized } from 'utility/loc-context'; -function JsonPreview({ body, theme, locale }: { body: string; theme: THEME_TYPE } & ILocalized) { +function JsonPreview({ body }: { body: string; } & ILocalized) { const jsonObjPreview = React.useMemo(() => { let val = null; try { @@ -20,21 +18,7 @@ function JsonPreview({ body, theme, locale }: { body: string; theme: THEME_TYPE } return val; }, [body]); - let rjsTheme = "shapeshifter:inverted"; - if (theme === 'dark') { - rjsTheme = "twilight"; - } - else if (theme === 'high-contrast') { - rjsTheme = "bright"; - } const child = ( - // ); return child; @@ -73,7 +57,7 @@ interface IPreview { parentClassName: string; } -export default function preview(body: string, contentType: string, locale: string, theme: THEME_TYPE = 'light'): IPreview | undefined { +export default function preview(body: string, contentType: string, locale: string): IPreview | undefined { if (contentType.startsWith('image/')) { return { title: getText('ResponsePreview.imagePreviewTitle', { locale }), @@ -93,7 +77,7 @@ export default function preview(body: string, contentType: string, locale: strin else if (contentType.indexOf('json') > -1) { return { title: getText('ResponsePreview.jsonPreviewTitle', { locale }), - child: , + child: , className: 'editor-container json-preview-container', parentClassName: 'json-preview', }; From be419029361b1922486b9b98268a49a779ad0ac9 Mon Sep 17 00:00:00 2001 From: Rob Paveza Date: Fri, 22 Jan 2021 13:32:44 -0700 Subject: [PATCH 4/6] Fixed CR comments, added key= property to TreeViewItems --- .../src/ui/JSONView/Property.tsx | 3 +++ .../src/ui/JSONView/index.tsx | 18 ++++++++++++------ 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/packages/devtools-network-console/src/ui/JSONView/Property.tsx b/packages/devtools-network-console/src/ui/JSONView/Property.tsx index 463ff41..7f1b88f 100644 --- a/packages/devtools-network-console/src/ui/JSONView/Property.tsx +++ b/packages/devtools-network-console/src/ui/JSONView/Property.tsx @@ -1,3 +1,6 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + import React from 'react'; import { LocalizationConsumer, getText } from 'utility/loc-context'; diff --git a/packages/devtools-network-console/src/ui/JSONView/index.tsx b/packages/devtools-network-console/src/ui/JSONView/index.tsx index 6e768ff..b4ded7a 100644 --- a/packages/devtools-network-console/src/ui/JSONView/index.tsx +++ b/packages/devtools-network-console/src/ui/JSONView/index.tsx @@ -1,3 +1,6 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + import React from 'react'; import { TreeView, TreeViewItem } from '@microsoft/fast-components-react-msft'; import { LocalizationConsumer, getText } from 'utility/loc-context'; @@ -30,18 +33,20 @@ function* produceObjectChildren(value: object, depth: number): IterableIterator< const childValue = (value as Record)[key]; if (typeof childValue === 'object' && childValue !== null && Object.keys(childValue).length > 0) { yield } children={produceChildren(childValue, depth + 1)} aria-level={depth} - /> + />; } else { yield } aria-level={depth} - /> + />; } } } @@ -51,18 +56,20 @@ function* produceArrayChildren(value: Array, depth: number): IterableIt const childValue = value[i]; if (typeof childValue === 'object' && childValue !== null && Object.keys(childValue).length > 0) { yield } children={produceChildren(childValue, depth + 1)} aria-level={depth} - /> + />; } else { yield } aria-level={depth} - /> + />; } } } @@ -83,9 +90,8 @@ function JSONViewComposed(props: IJSONViewProps) { ); }} - - ) + ); } const JSONViewComposedMemoized = React.memo(JSONViewComposed); From dade51e96996262805b481c061e2257a84460a44 Mon Sep 17 00:00:00 2001 From: Rob Paveza Date: Fri, 22 Jan 2021 15:35:15 -0700 Subject: [PATCH 5/6] Code review feedback / consolidation --- .../src/ui/JSONView/index.tsx | 38 +++++++++---------- 1 file changed, 18 insertions(+), 20 deletions(-) diff --git a/packages/devtools-network-console/src/ui/JSONView/index.tsx b/packages/devtools-network-console/src/ui/JSONView/index.tsx index b4ded7a..9a2b1f2 100644 --- a/packages/devtools-network-console/src/ui/JSONView/index.tsx +++ b/packages/devtools-network-console/src/ui/JSONView/index.tsx @@ -31,22 +31,21 @@ function* produceObjectChildren(value: object, depth: number): IterableIterator< for (let i = 0; i < keys.length; i++) { const key = keys[i]; const childValue = (value as Record)[key]; + const itemProps = { + key, + className: 'json-tree-view-item-can-wrap', + titleContent: (), + 'aria-level': depth, + }; + if (typeof childValue === 'object' && childValue !== null && Object.keys(childValue).length > 0) { yield } + {...itemProps} children={produceChildren(childValue, depth + 1)} - aria-level={depth} />; } else { - yield } - aria-level={depth} - />; + yield ; } } } @@ -54,22 +53,21 @@ function* produceObjectChildren(value: object, depth: number): IterableIterator< function* produceArrayChildren(value: Array, depth: number): IterableIterator { for (let i = 0; i < value.length; i++) { const childValue = value[i]; + const itemProps = { + key: i, + className: 'json-tree-view-item-can-wrap', + titleContent: (), + 'aria-level': depth, + }; + if (typeof childValue === 'object' && childValue !== null && Object.keys(childValue).length > 0) { yield } + {...itemProps} children={produceChildren(childValue, depth + 1)} - aria-level={depth} />; } else { - yield } - aria-level={depth} - />; + yield ; } } } From e0720ebb506e13b87ed11ecb468a5605525279eb Mon Sep 17 00:00:00 2001 From: Rob Paveza Date: Fri, 22 Jan 2021 15:38:41 -0700 Subject: [PATCH 6/6] Removed unsafe-eval from CORS policy --- packages/devtools-network-console/public/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/devtools-network-console/public/index.html b/packages/devtools-network-console/public/index.html index c4d7f56..475db8b 100644 --- a/packages/devtools-network-console/public/index.html +++ b/packages/devtools-network-console/public/index.html @@ -13,7 +13,7 @@ default-src 'self' blob:; style-src 'self' 'unsafe-inline' https://devtools.azureedge.net; font-src 'self' https://static2.sharepointonline.com https://spoprod-a.akamaihd.net https://devtools.azureedge.net; - script-src 'self' 'unsafe-inline' 'unsafe-eval' https://devtools.azureedge.net; + script-src 'self' 'unsafe-inline' https://devtools.azureedge.net; img-src 'self' data:; worker-src 'self' https://devtools.azureedge.net data:; "