| Index: chrome/common/extensions/docs/examples/api/tabs/zoom/popup.html
|
| diff --git a/chrome/common/extensions/docs/examples/api/tabs/zoom/popup.html b/chrome/common/extensions/docs/examples/api/tabs/zoom/popup.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..1bdbf5ee735e73cd87bfb803c3a07b648c2d06b0
|
| --- /dev/null
|
| +++ b/chrome/common/extensions/docs/examples/api/tabs/zoom/popup.html
|
| @@ -0,0 +1,154 @@
|
| +<script>
|
| +
|
| +// The zoom extension API only allows setting of an arbitrary zoom percent.
|
| +// The following functions provide the logic necessary to imitate the exact
|
| +// zoom in/out behavior of the built-in zoom functions.
|
| +
|
| +// From WebViewImpl.cpp
|
| +
|
| +var textSizeMultiplierRatio = 1.2;
|
| +
|
| +function zoomLevelToZoomFactor(zoomLevel) {
|
| + return Math.pow(textSizeMultiplierRatio, zoomLevel);
|
| +}
|
| +
|
| +function zoomFactorToZoomLevel(factor) {
|
| + // Since factor = 1.2^level, level = log(factor) / log(1.2)
|
| + return Math.log(factor) / Math.log(textSizeMultiplierRatio);
|
| +}
|
| +
|
| +// From render_view.cc
|
| +
|
| +var ZoomFunction = {
|
| + ZoomOut: -1,
|
| + Reset: 0,
|
| + ZoomIn: 1
|
| +}
|
| +
|
| +// Test that a float reperesents an integral zoom level
|
| +function isBasicallyIntegral(zoomLevel) {
|
| + var epsilon = 0.000001;
|
| + var rounded = Math.round(zoomLevel);
|
| + return Math.abs(zoomLevel - rounded) < epsilon;
|
| +}
|
| +
|
| +// Calculate a new zoom level for zoom in/out/reset
|
| +function zoom(oldZoomLevel, zoomFunction) {
|
| + var zoomLevel;
|
| +
|
| + if (zoomFunction == ZoomFunction.Reset) {
|
| + zoomLevel = 0;
|
| + } else if (isBasicallyIntegral(oldZoomLevel)) {
|
| + // Previous zoom level is a whole number, so just increment/decrement.
|
| + zoomLevel = Math.round(oldZoomLevel) + zoomFunction;
|
| + } else {
|
| + // Either the user hit the zoom factor limit and thus the zoom level is now
|
| + // not a whole number, or a plugin changed it to a custom value. We want
|
| + // to go to the next whole number so that the user can always get back to
|
| + // 100% with the keyboard/menu.
|
| + if ((oldZoomLevel > 1 && zoomFunction > 0) ||
|
| + (oldZoomLevel < 1 && zoomFunction < 0)) {
|
| + zoomLevel = parseInt(oldZoomLevel + zoomFunction);
|
| + } else {
|
| + // We're going towards 100%, so first go to the next whole number.
|
| + zoomLevel = parseInt(oldZoomLevel);
|
| + }
|
| + }
|
| +
|
| + return zoomLevel;
|
| +}
|
| +
|
| +
|
| +// Zoom in/out
|
| +
|
| +function incZoomLevel(oldZoomLevel) {
|
| + return zoom(oldZoomLevel, ZoomFunction.ZoomIn);
|
| +}
|
| +
|
| +function decZoomLevel(oldZoomLevel) {
|
| + return zoom(oldZoomLevel, ZoomFunction.ZoomOut);
|
| +}
|
| +
|
| +// Convert zoom percent to zoom level and apply a function,
|
| +// then convert back to zoom percent and return the result
|
| +function applyAsZoomLevel(zoomLevelTransform, zoomPercent) {
|
| + var zoomLevel = zoomFactorToZoomLevel(zoomPercent / 100);
|
| + var newZoomLevel = zoomLevelTransform(zoomLevel);
|
| + var newZoomPercent = zoomLevelToZoomFactor(newZoomLevel) * 100;
|
| + return newZoomPercent;
|
| +}
|
| +
|
| +// Zoom in the current tab, exactly like the built-in zoom
|
| +function zoomIn() {
|
| + chrome.tabs.getSelected(null, function(tab) {
|
| + chrome.tabs.getZoomPercent(tab.id, function(zoomPercent) {
|
| +
|
| + var newZoomPercent = applyAsZoomLevel(incZoomLevel, zoomPercent);
|
| + chrome.tabs.setZoomPercent(tab.id, newZoomPercent, function(finalZoomPercent) {
|
| + displayZoomPercent(finalZoomPercent);
|
| + });
|
| + });
|
| + });
|
| +}
|
| +
|
| +// Zoom out the current tab, exactly like the built-in zoom
|
| +function zoomOut() {
|
| + chrome.tabs.getSelected(null, function(tab) {
|
| + chrome.tabs.getZoomPercent(tab.id, function(zoomPercent) {
|
| +
|
| + var newZoomPercent = applyAsZoomLevel(decZoomLevel, zoomPercent);
|
| + chrome.tabs.setZoomPercent(tab.id, newZoomPercent, function(finalZoomPercent) {
|
| + displayZoomPercent(finalZoomPercent);
|
| + });
|
| + });
|
| + });
|
| +}
|
| +
|
| +function zoomReset() {
|
| + chrome.tabs.getSelected(null, function(tab) {
|
| + chrome.tabs.setZoomPercent(tab.id, 100, function(finalZoomPercent) {
|
| + displayZoomPercent(finalZoomPercent);
|
| + });
|
| + });
|
| +}
|
| +
|
| +function setZoomPercentFromInput() {
|
| + chrome.tabs.getSelected(null, function(tab){
|
| + var zoomPercent = parseFloat(document.getElementById("zoomPercentInput").value);
|
| +
|
| + if (isNaN(zoomPercent)) {
|
| + return;
|
| + }
|
| +
|
| + chrome.tabs.setZoomPercent(tab.id, zoomPercent, function(finalZoomPercent) {
|
| + displayZoomPercent(finalZoomPercent);
|
| + });
|
| + });
|
| +}
|
| +
|
| +function displayZoomPercent(zoomPercent) {
|
| + var intZoomPercent = parseInt(zoomPercent);
|
| + document.getElementById("currentZoom").innerHTML = intZoomPercent;
|
| +}
|
| +
|
| +function getAndDisplayZoomPercent() {
|
| + chrome.tabs.getSelected(null, function(tab){
|
| + chrome.tabs.getZoomPercent(tab.id, function(zoomPercent) {
|
| + displayZoomPercent(zoomPercent);
|
| + });
|
| + });
|
| +}
|
| +
|
| +getAndDisplayZoomPercent();
|
| +
|
| +</script>
|
| +
|
| +<p><a id="zoomInLink" href="#" onclick="zoomIn()">zoom in</a></p>
|
| +<p><a id="zoomOutLink" href="#" onclick="zoomOut()">zoom out</a></p>
|
| +<p><a id="zoomResetLink" href="#" onClick="zoomReset()">reset</a></p>
|
| +<p>Zoom: <span id="currentZoom"></span></p>
|
| +
|
| +<form>
|
| + <input id="zoomPercentInput"/>
|
| + <button id="zoomPercentButton" onclick="setZoomPercentFromInput()" type="button">Set Zoom</button>
|
| +</form>
|
|
|