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

Customizing the panel style to make it fancy

Browse Source 
Used the browser style property to make it possible to use the firefox style guide. more info on the guide, see the link: https://firefoxux.github.io/StyleGuide/#/controls
This commit is contained in:
Flávio Rodrigues
2016-10-20 10:58:41 -02:00
parent 67451bba0f
commit 0a79d1c7a8
4 changed files with 48 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
tabs-tabs-tabs/manifest.json
View File

@@ -6,6 +6,7 @@
}
},
"browser_action": {
"browser_style": true,
"default_title": "Tabs, tabs, tabs",
"default_popup": "tabs.html"
},

13
tabs-tabs-tabs/tabs.css
View File

@@ -1,3 +1,16 @@
html, body {
width: 350px;
}
a {
margin: 10px;
display: inline-block;
}
button {
margin:10px;
}
.panel {
margin: 5px;
}

38
tabs-tabs-tabs/tabs.html
View File

@@ -7,16 +7,34 @@
</head>
<body>
<a href="#" id="tabs-move-beginning">Move active tab to the beginning of the window</a><br>
<a href="#" id="tabs-move-end">Move active tab to the end of the window</a><br>
<a href="#" id="tabs-duplicate">Duplicate active tab</a><br>
<a href="#" id="tabs-reload">Reload active tab</a><br>
<a href="#" id="tabs-remove">Remove active tab</a><br>
<a href="#" id="tabs-create">Create a tab</a><br>
<a href="#" id="tabs-alertinfo">Alert active tab info</a><br>
<a href="#" id="tabs-add-zoom">Zoom in</a><br>
<a href="#" id="tabs-decrease-zoom">Zoom out</a><br>
<a href="#" id="tabs-default-zoom">Reset zoom</a><br>
<div class="panel">
<div class="panel-section panel-section-header">
<div class="text-section-header">Tabs-tabs-tabs</div>
</div>
<a href="#" id="tabs-move-beginning">Move active tab to the beginning of the window</a><br>
<a href="#" id="tabs-move-end">Move active tab to the end of the window</a><br>
<div class="panel-section-separator"></div>
<a href="#" id="tabs-duplicate">Duplicate active tab</a><br>
<a href="#" id="tabs-reload">Reload active tab</a><br>
<a href="#" id="tabs-alertinfo">Alert active tab info</a><br>
<div class="panel-section-separator"></div>
<a href="#" id="tabs-create">Create a tab</a><br>
<a href="#" id="tabs-remove">Remove active tab</a><br>
<div class="panel-section-separator"></div>
<button id="tabs-add-zoom" class="normal">Zoom in</button>
<button href="#" id="tabs-default-zoom" class="default">Reset zoom</button>
<button href="#" id="tabs-decrease-zoom" class="normal">Zoom out</button>
</div>
<script src="tabs.js"></script>
</body>

6
tabs-tabs-tabs/tabs.js
View File

@@ -84,6 +84,9 @@ document.addEventListener("click", function(e) {
alert("Tab zoom factor is already at max!");
} else {
var newZoomFactor = zoomFactor + ZOOM_INCREMENT;
//if the newZoomFactor is set to higher than the max accepted
//it won't change, and will never alert that it's at maximum
newZoomFactor = newZoomFactor > MAX_ZOOM ? MAX_ZOOM : newZoomFactor;
chrome.tabs.setZoom(tab.id, newZoomFactor);
}
});
@@ -98,6 +101,9 @@ document.addEventListener("click", function(e) {
alert("Tab zoom factor is already at minimum!");
} else {
var newZoomFactor = zoomFactor - ZOOM_INCREMENT;
//if the newZoomFactor is set to lower than the min accepted
//it won't change, and will never alert that it's at minimum
newZoomFactor = newZoomFactor < MIN_ZOOM ? MIN_ZOOM : newZoomFactor;
chrome.tabs.setZoom(tab.id, newZoomFactor);
}
});