felixfoertsch/webextensions-examples
1
0
Fork 0
mirror of https://github.com/mdn/webextensions-examples.git synced 2026-04-17 23:08:33 +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; display: none;
} }
.button { button {
border: none;
width: 100%;
margin: 3% auto; margin: 3% auto;
padding: 4px; padding: 4px;
text-align: center; text-align: center;
font-size: 1.5em; font-size: 1.5em;
cursor: pointer; cursor: pointer;
}
.beast:hover {
background-color: #CFF2F2;
}
.beast {
background-color: #E5F2F2; background-color: #E5F2F2;
} }
.reset { button:hover {
background-color: #CFF2F2;
}
button[type="reset"] {
background-color: #FBFBC9; background-color: #FBFBC9;
} }
.reset:hover { button[type="reset"]:hover {
background-color: #EAEA9D; background-color: #EAEA9D;
} }

8
beastify/popup/choose_beast.html
View File

@@ -8,10 +8,10 @@
<body> <body>
<div id="popup-content"> <div id="popup-content">
<div class="button beast">Frog</div> <button>Frog</button>
<div class="button beast">Turtle</div> <button>Turtle</button>
<div class="button beast">Snake</div> <button>Snake</button>
<div class="button reset">Reset</div> <button type="reset">Reset</button>
</div> </div>
<div id="error-content" class="hidden"> <div id="error-content" class="hidden">
<p>Can't beastify this web page.</p><p>Try a different page.</p> <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, * Get the active tab,
* then call "beastify()" or "reset()" as appropriate. * then call "beastify()" or "reset()" as appropriate.
*/ */
if (e.target.classList.contains("beast")) { if (e.target.type === "reset") {
browser.tabs.query({active: true, currentWindow: true})
.then(beastify)
.catch(reportError);
}
else if (e.target.classList.contains("reset")) {
browser.tabs.query({active: true, currentWindow: true}) browser.tabs.query({active: true, currentWindow: true})
.then(reset) .then(reset)
.catch(reportError); .catch(reportError);
} else {
browser.tabs.query({active: true, currentWindow: true})
.then(beastify)
.catch(reportError);
} }
}); });
} }