felixfoertsch/webextensions-examples
1
0
Fork 0
mirror of https://github.com/mdn/webextensions-examples.git synced 2026-04-17 14:59:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #112 from freaktechnik/master

Browse Source 
Use browser_style in webpack example
This commit is contained in:
wbamberg
2016-10-17 11:28:50 -07:00
committed by GitHub
parent ea49ad0f60 2b4b64c4a3
commit 06195f2e2f
3 changed files with 69 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
webpack-modules/addon/manifest.json
View File

@@ -9,7 +9,8 @@
"browser_action": { "browser_action": {
"default_icon": "icons/leftpad-32.png", "default_icon": "icons/leftpad-32.png",
"default_title": "Left Pad", "default_title": "Left Pad",
"default_popup": "popup/left-pad.html" "default_popup": "popup/left-pad.html",
"browser_style": true
}, },
"background": { "background": {
"scripts": ["background_scripts/index.js"] "scripts": ["background_scripts/index.js"]

32
webpack-modules/addon/popup/left-pad.html
View File

@@ -2,15 +2,33 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head> </head>
<body> <body class="panel">
<form id="leftpad-form"> <form id="leftpad-form">
<label for="text">Text:</label><input type="text" id="text" required><br> <section class="panel-section panel-section-formElements">
<label for="amount">Result length:</label><input type="number" id="amount" min="0" step="1" required><br> <div class="panel-formElements-item">
<label for="with">Pad with:</label><input type="text" required value="_" id="with"><br> <label for="text">Text:</label>
<label for="result">Result:</label><output id="result"></output><br> <input type="text" id="text" required>
<button type="submit">Pad!</button> </div>
<button id="pad-bg">Pad in background script</button> <div class="panel-formElements-item">
<label for="amount">Result length:</label>
<input type="number" id="amount" min="0" step="1" required>
</div>
<div class="panel-formElements-item">
<label for="with">Pad with:</label>
<input type="text" required value="_" id="with">
</div>
<div class="panel-formElements-item">
<label for="result">Result:</label>
<output id="result"></output>
</div>
</section>
<footer class="panel-section panel-section-footer">
<button type="submit" class="panel-section-footer-button default">Pad!</button>
<div class="panel-section-footer-separator"></div>
<button id="pad-bg" class="panel-section-footer-button">Pad in background script</button>
</footer>
</form> </form>
<script src="index.js"></script> <script src="index.js"></script>
</body> </body>

42
webpack-modules/addon/popup/style.css Normal file
View File

@@ -0,0 +1,42 @@
/*
* These styles extend the styles from browser_styles, see https://firefoxux.github.io/StyleGuide.
*/
/* For some reason the footer creates a horizontal overflow */
body {
overflow-x: hidden;
}
.panel-formElements-item label {
width: 80px;
}
.panel-formElements-item output,
.panel-formElements-item input[type="number"] {
flex-grow: 1;
}
input[type="number"] {
background-color: #fff;
border: 1px solid #b1b1b1;
box-shadow: 0 0 0 0 rgba(97, 181, 255, 0);
font: caption;
padding: 0 6px 0;
transition-duration: 250ms;
transition-property: box-shadow;
height: 24px;
}
input[type="number"]:hover {
border-color: #858585;
}
input[type="number"]:focus {
border-color: #0996f8;
box-shadow: 0 0 0 2px rgba(97, 181, 255, 0.75);
}
/* Reset the default styles for buttons if it's a footer button */
button.panel-section-footer-button {
padding: 12px;
}