Skip to content

Commit

Permalink
feat(devtools): adding firefox support (#44952)
Browse files Browse the repository at this point in the history 
* Updating manifest.json to new build structure
* Adding doctype to pages to remove warnings

PR Close #44952
  • Loading branch information
@sumitarora @thePunderWoman
sumitarora authored and thePunderWoman committed Apr 12, 2022
1 parent 9f1bcc7 commit bc0b6fe
Show file tree
Hide file tree
Showing 5 changed files with 270 additions and 277 deletions.
43 changes: 12 additions & 31 deletions devtools/projects/shell-browser/src/manifest/manifest.firefox.json
View file
Expand Up @@ -11,24 +11,16 @@
"128": "assets/icon128.png"
},
"browser_action": {
"default_icon": {
"16": "assets/icon16.png",
"48": "assets/icon48.png",
"128": "assets/icon128.png"
},
"default_popup": "popups/not-angular.html",
"browser_style": true
"default_popup": "popups/not-angular.html"
},
"devtools_page": "devtools.html",
"web_accessible_resources": [
"backend.js",
"runtime.js",
"app/backend_bundle.js",
"devtools.html"
],
"background": {
"scripts": [
"background.js",
"runtime.js"
"app/background_bundle.js"
]
},
"permissions": [
Expand All @@ -37,24 +29,13 @@
"https://*/*",
"file:///*"
],
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"runtime.js"
],
"run_at": "document_start"
},
{
"matches": [
"<all_urls>"
],
"js": [
"ng-validate.js"
],
"run_at": "document_idle"
}
]
"content_scripts": [{
"matches": [
"<all_urls>"
],
"js": [
"app/ng_validate_bundle.js"
],
"run_at": "document_idle"
}]
}
115 changes: 59 additions & 56 deletions devtools/projects/shell-browser/src/popups/not-angular.html
View file
@@ -1,57 +1,60 @@
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<style>
* {
margin: 0;
padding: 0;
}

.header-text {
margin: 0px;
text-align: center;
padding-bottom: 8px;
}

.modal-content {
min-width: 300px;
padding: 10px;
}

.icon {
width: 20px;
margin-right: 16px;
}

.message {
display: flex;
align-items: center;
padding: 5px;
}

code {
font-size: 1em;
font-family: monospace;
}

p:not(:last-child) {
margin-bottom: 10px;
}

.material-icons {
color: rgb(107, 107, 107);
margin-right: 7px;
}
</style>
</head>

<body>
<div class="modal-content">
<h4 class="header-text">Angular DevTools</h4>
<div class="message">
<span class="material-icons md-48">cancel</span>
<p>This page is not using Angular, or it has a strict extension policy.</p>
</div>
<!DOCTYPE html>

<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<style>
* {
margin: 0;
padding: 0;
}

.header-text {
margin: 0px;
text-align: center;
padding-bottom: 8px;
}

.modal-content {
min-width: 300px;
padding: 10px;
}

.icon {
width: 20px;
margin-right: 16px;
}

.message {
display: flex;
align-items: center;
padding: 5px;
}

code {
font-size: 1em;
font-family: monospace;
}

p:not(:last-child) {
margin-bottom: 10px;
}

.material-icons {
color: rgb(107, 107, 107);
margin-right: 7px;
}
</style>
</head>

<body>
<div class="modal-content">
<h4 class="header-text">Angular DevTools</h4>
<div class="message">
<span class="material-icons md-48">cancel</span>
<p>This page is not using Angular, or it has a strict extension policy.
</p>
</div>
</body>
</html>
</div>
</body>

</html>
122 changes: 63 additions & 59 deletions devtools/projects/shell-browser/src/popups/production.html
View file
@@ -1,62 +1,66 @@
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<style>
* {
margin: 0;
padding: 0;
}
<!DOCTYPE html>

.header-text {
margin: 0px;
text-align: center;
padding-bottom: 8px;
}
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<style>
* {
margin: 0;
padding: 0;
}

.header-text {
margin: 0px;
text-align: center;
padding-bottom: 8px;
}

.modal-content {
min-width: 300px;
padding: 10px;
}

.icon {
width: 20px;
margin-right: 16px;
}

.message {
display: flex;
align-items: center;
padding: 5px;
}

code {
font-size: 1em;
font-family: monospace;
}

p:not(:last-child) {
margin-bottom: 10px;
}

.material-icons {
color: rgb(107, 107, 107);
margin-right: 10px;
}
</style>
</head>

.modal-content {
min-width: 300px;
padding: 10px;
}

.icon {
width: 20px;
margin-right: 16px;
}

.message {
display: flex;
align-items: center;
padding: 5px;
}

code {
font-size: 1em;
font-family: monospace;
}

p:not(:last-child) {
margin-bottom: 10px;
}

.material-icons {
color: rgb(107, 107, 107);
margin-right: 10px;
}
</style>
</head>

<body>
<div class="modal-content">
<h4 class="header-text">Angular DevTools</h4>
<div class="message">
<span class="material-icons md-48">settings</span>
<section>
<p>
Angular application running in <a href="https://angular.io/api/core/enableProdMode">production mode</a>.
</p>
<p>We recommend using DevTools with apps in dev mode, running <code>ng serve</code>.</p>
</section>
</div>
<body>
<div class="modal-content">
<h4 class="header-text">Angular DevTools</h4>
<div class="message">
<span class="material-icons md-48">settings</span>
<section>
<p>
Angular application running in <a href="https://angular.io/api/core/enableProdMode">production
mode</a>.
</p>
<p>We recommend using DevTools with apps in dev mode, running
<code>ng serve</code>.</p>
</section>
</div>
</body>
</html>
</div>
</body>

</html>

0 comments on commit bc0b6fe

Please sign in to comment.