felixfoertsch/webextensions-examples
1
0
Fork 0
mirror of https://github.com/mdn/webextensions-examples.git synced 2026-04-16 06:18:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

Don't use <div /> as a button (#502)

Browse Source 
* Don't use <div /> as a button

Addition to https://github.com/mdn/content/pull/21410

* stick to old styling

* Update beastify/popup/choose_beast.html

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

* Update beastify/popup/choose_beast.css

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

* fix: check for button type at event listener

* fix: align css selectors to changes

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
This commit is contained in:
Eike Mücksch
2022-11-24 03:07:49 +01:00
committed by GitHub
parent 0260139efe
commit 6d8f07243a
3 changed files with 18 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
beastify/popup/choose_beast.css
View File

@@ -6,26 +6,25 @@ html, body {
display: none;
}
.button {
button {
border: none;
width: 100%;
margin: 3% auto;
padding: 4px;
text-align: center;
font-size: 1.5em;
cursor: pointer;
}
.beast:hover {
background-color: #CFF2F2;
}
.beast {
background-color: #E5F2F2;
}
.reset {
button:hover {
background-color: #CFF2F2;
}
button[type="reset"] {
background-color: #FBFBC9;
}
.reset:hover {
button[type="reset"]:hover {
background-color: #EAEA9D;
}

8
beastify/popup/choose_beast.html
View File

@@ -8,10 +8,10 @@
<body>
<div id="popup-content">
<div class="button beast">Frog</div>
<div class="button beast">Turtle</div>
<div class="button beast">Snake</div>
<div class="button reset">Reset</div>
<button>Frog</button>
<button>Turtle</button>
<button>Snake</button>
<button type="reset">Reset</button>
</div>
<div id="error-content" class="hidden">
<p>Can't beastify this web page.</p><p>Try a different page.</p>

11
beastify/popup/choose_beast.js
View File

@@ -65,15 +65,14 @@ function listenForClicks() {
* Get the active tab,
* then call "beastify()" or "reset()" as appropriate.
*/
if (e.target.classList.contains("beast")) {
browser.tabs.query({active: true, currentWindow: true})
.then(beastify)
.catch(reportError);
}
else if (e.target.classList.contains("reset")) {
if (e.target.type === "reset") {
browser.tabs.query({active: true, currentWindow: true})
.then(reset)
.catch(reportError);
} else {
browser.tabs.query({active: true, currentWindow: true})
.then(beastify)
.catch(reportError);
}
});
}