mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 386163 - 'Set Desktop Background' refactoring: use canvas in all cases, support widescreen previews p=Dao Gottwald <dao@design-noir.de> r=mano, ui-r=mconnor

This commit is contained in:
asqueella@gmail.com 2007-09-02 15:33:21 -07:00
Родитель 7abb20c1ac
Коммит 81567308b2
9 изменённых файлов: 125 добавлений и 176 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

236
browser/components/shell/content/setDesktopBackground.js
Просмотреть файл

@ -21,7 +21,7 @@
# Contributor(s):
# Blake Ross <blake@blakeross.com>
# Ben Goodger <ben@mozilla.org>
# Dao Gottwald <dao@design-noir.de>
# Dão Gottwald <dao@design-noir.de>
#
# Alternatively, the contents of this file may be used under the terms of
# either the GNU General Public License Version 2 or later (the "GPL"), or
@ -37,79 +37,68 @@
#
# ***** END LICENSE BLOCK *****
const kXUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
const kHTML_NS = "http://www.w3.org/1999/xhtml";
const kIShellService = Components.interfaces.nsIShellService;
#ifdef XP_MACOSX
const kIMacShellService = Components.interfaces.nsIMacShellService;
#endif
var Ci = Components.interfaces;
var gSetBackground = {
_position : kIShellService.BACKGROUND_STRETCH,
_monitor : null,
_image : null,
_backgroundColor : 0,
#ifndef XP_MACOSX
// Converts a color string in the format "#RRGGBB" to an integer.
_hexStringToLong: function (aString)
{
return parseInt(aString.substring(1,3), 16) << 16 |
parseInt(aString.substring(3,5), 16) << 8 |
parseInt(aString.substring(5,7), 16);
},
_rgbToHex: function(aR, aG, aB)
{
var rHex = aR.toString(16).toUpperCase();
var gHex = aG.toString(16).toUpperCase();
var bHex = aB.toString(16).toUpperCase();
if (rHex.length == 1) rHex ='0' + rHex;
if (gHex.length == 1) gHex ='0' + gHex;
if (bHex.length == 1) bHex ='0' + bHex;
return '#' + rHex + gHex + bHex;
},
_position : "",
_backgroundColor : 0,
#else
_position : "STRETCH",
#endif
_screenWidth : 0,
_screenHeight : 0,
_image : null,
_canvas : null,
get _shell()
{
return Components.classes["@mozilla.org/browser/shell-service;1"]
.getService(Components.interfaces.nsIShellService);
.getService(Ci.nsIShellService);
},
load: function ()
{
this._monitor = document.getElementById("monitor");
this._canvas = document.getElementById("screen");
this._screenWidth = screen.width;
this._screenHeight = screen.height;
#ifdef XP_MACOSX
document.documentElement.getButton("accept").hidden = true;
#endif
this.init(window.arguments[0]);
if (this._screenWidth / this._screenHeight >= 1.6)
document.getElementById("monitor").setAttribute("aspectratio", "16:10");
// make sure that the correct dimensions will be used
setTimeout(function(self) {
self.init(window.arguments[0]);
}, 0, this);
},
init: function (aImage)
{
this._image = aImage;
// set the size of the coordinate space
this._canvas.width = this._canvas.clientWidth;
this._canvas.height = this._canvas.clientHeight;
var ctx = this._canvas.getContext("2d");
ctx.scale(this._canvas.clientWidth / this._screenWidth, this._canvas.clientHeight / this._screenHeight);
#ifndef XP_MACOSX
this._initColor();
var position = parseInt(document.getElementById("menuPosition").value);
#else
// Make sure to reset the button state in case the user has already
// set an image as their desktop background.
// set an image as their desktop background.
var setDesktopBackground = document.getElementById("setDesktopBackground");
setDesktopBackground.hidden = false;
var bundle = document.getElementById("backgroundBundle");
setDesktopBackground.label = bundle.getString("DesktopBackgroundSet");
setDesktopBackground.disabled = false;
var showDesktopPreferences = document.getElementById("showDesktopPreferences");
showDesktopPreferences.hidden = true;
var position = kIShellService.BACKGROUND_STRETCH;
document.getElementById("showDesktopPreferences").hidden = true;
#endif
this.updatePosition(position);
this.updatePosition();
},
#ifndef XP_MACOSX
@ -128,126 +117,87 @@ var gSetBackground = {
var colorpicker = document.getElementById("desktopColor");
colorpicker.color = this._backgroundColor;
},
#endif
updateColor: function (aColor)
{
this._backgroundColor = aColor;
this._canvas.style.backgroundColor = aColor;
},
// Converts a color string in the format "#RRGGBB" to an integer.
_hexStringToLong: function (aString)
{
return parseInt(aString.substring(1,3), 16) << 16 |
parseInt(aString.substring(3,5), 16) << 8 |
parseInt(aString.substring(5,7), 16);
},
_rgbToHex: function (aR, aG, aB)
{
return "#" + [aR, aG, aB].map(function(aInt) aInt.toString(16).replace(/^(.)$/, "0$1"))
.join("").toUpperCase();
},
#else
observe: function (aSubject, aTopic, aData)
{
if (aTopic == "shell:desktop-background-changed") {
var setDesktopBackground = document.getElementById("setDesktopBackground");
setDesktopBackground.hidden = true;
document.getElementById("setDesktopBackground").hidden = true;
document.getElementById("showDesktopPreferences").hidden = false;
var showDesktopPreferences = document.getElementById("showDesktopPreferences");
showDesktopPreferences.hidden = false;
var os = Components.classes["@mozilla.org/observer-service;1"]
.getService(Components.interfaces.nsIObserverService);
os.removeObserver(this, "shell:desktop-background-changed");
Components.classes["@mozilla.org/observer-service;1"]
.getService(Ci.nsIObserverService)
.removeObserver(this, "shell:desktop-background-changed");
}
},
#ifdef XP_MACOSX
setDesktopBackground: function()
showDesktopPrefs: function()
{
var os = Components.classes["@mozilla.org/observer-service;1"]
.getService(Components.interfaces.nsIObserverService);
os.addObserver(this, "shell:desktop-background-changed", false);
this._shell.openApplication(Ci.nsIMacShellService.APPLICATION_DESKTOP);
},
#endif
setDesktopBackground: function ()
{
#ifndef XP_MACOSX
document.persist("menuPosition", "value");
this._shell.desktopBackgroundColor = this._hexStringToLong(this._backgroundColor);
#else
Components.classes["@mozilla.org/observer-service;1"]
.getService(Ci.nsIObserverService)
.addObserver(this, "shell:desktop-background-changed", false);
var bundle = document.getElementById("backgroundBundle");
var setDesktopBackground = document.getElementById("setDesktopBackground");
setDesktopBackground.disabled = true;
setDesktopBackground.label = bundle.getString("DesktopBackgroundDownloading");
this._shell.setDesktopBackground(this._image, this._position);
},
showDesktopPrefs: function()
{
this._shell.openApplication(kIMacShellService.APPLICATION_DESKTOP);
},
#else
setDesktopBackground: function ()
{
this._shell.setDesktopBackground(this._image, this._position);
this._shell.desktopBackgroundColor = this._hexStringToLong(this._backgroundColor);
document.persist("menuPosition", "value");
},
#endif
this._shell.setDesktopBackground(this._image,
Ci.nsIShellService["BACKGROUND_" + this._position]);
},
updateColor: function (color)
updatePosition: function ()
{
var ctx = this._canvas.getContext("2d");
ctx.clearRect(0, 0, this._screenWidth, this._screenHeight);
#ifndef XP_MACOSX
this._backgroundColor = color;
this._monitor.style.backgroundColor = color;
this._position = document.getElementById("menuPosition").value;
#endif
},
updatePosition: function (aPosition)
{
if (this._monitor.hasChildNodes())
this._monitor.removeChild(this._monitor.firstChild);
this._position = aPosition;
if (this._position == kIShellService.BACKGROUND_TILE)
this._tileImage();
else if (this._position == kIShellService.BACKGROUND_STRETCH)
this._stretchImage();
else
this._centerImage();
},
_createImage: function ()
{
const nsIImageLoadingContent = Components.interfaces.nsIImageLoadingContent;
if (!(this._image instanceof nsIImageLoadingContent))
return false;
var request = this._image.QueryInterface(nsIImageLoadingContent)
.getRequest(nsIImageLoadingContent.CURRENT_REQUEST);
if (!request)
return false;
var imgURI = this._image.currentURI;
if (imgURI.schemeIs("javascript"))
return false;
var img = document.createElementNS(kXUL_NS, "image");
img.setAttribute("src", imgURI.spec);
return img;
},
_stretchImage: function ()
{
var img = this._createImage();
img.width = this._monitor.boxObject.width;
img.height = this._monitor.boxObject.height;
this._monitor.appendChild(img);
},
_tileImage: function ()
{
var canvas = document.createElementNS(kHTML_NS, "canvas");
var width = this._monitor.boxObject.width;
var height = this._monitor.boxObject.height;
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.fillStyle = ctx.createPattern(this._image, "repeat");
ctx.scale(width / screen.width, height / screen.height);
ctx.fillRect(0, 0, screen.width, screen.height);
this._monitor.appendChild(canvas);
},
_centerImage: function ()
{
var img = this._createImage();
// Use naturalHeight/Width here so we don't scale an image improperly in
// the preview window if the image is resized in the browser window.
var width = this._image.naturalWidth * this._monitor.boxObject.width / screen.width;
var height = this._image.naturalHeight * this._monitor.boxObject.height / screen.height;
img.width = Math.floor(width);
img.height = Math.floor(height);
this._monitor.appendChild(img);
switch (this._position) {
case "TILE":
ctx.save();
ctx.fillStyle = ctx.createPattern(this._image, "repeat");
ctx.fillRect(0, 0, this._screenWidth, this._screenHeight);
ctx.restore();
break;
case "STRETCH":
ctx.drawImage(this._image, 0, 0, this._screenWidth, this._screenHeight);
break;
case "CENTER":
var x = (this._screenWidth - this._image.naturalWidth) / 2;
var y = (this._screenHeight - this._image.naturalHeight) / 2;
ctx.drawImage(this._image, x, y);
}
}
};

34
browser/components/shell/content/setDesktopBackground.xul
Просмотреть файл

@ -23,6 +23,7 @@
# Contributor(s):
# Blake Ross <blake@blakeross.com>
# Ben Goodger <ben@mozilla.org>
# Dão Gottwald <dao@design-noir.de>
#
# Alternatively, the contents of this file may be used under the terms of
# either the GNU General Public License Version 2 or later (the "GPL"), or
@ -47,9 +48,8 @@
<?xul-overlay href="chrome://browser/content/macBrowserOverlay.xul"?>
#endif
<dialog xmlns:html="http://www.w3.org/1999/xhtml"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
id="aboutDialog"
<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml"
windowtype="Shell:SetDesktopBackground"
#ifndef XP_MACOSX
buttons="accept,cancel"
@ -60,27 +60,24 @@
onload="gSetBackground.load();"
ondialogaccept="gSetBackground.setDesktopBackground();"
title="&setDesktopBackground.title;"
style="width: 30em;">
style="width: 30em;">
<stringbundle id="backgroundBundle"
src="chrome://browser/locale/shellservice.properties"/>
<script type="application/x-javascript"
src="chrome://browser/content/utilityOverlay.js"/>
<script type="application/x-javascript"
src="chrome://browser/content/setDesktopBackground.js"/>
<script type="application/x-javascript"
src="chrome://global/content/contentAreaUtils.js"/>
<script type="application/javascript" src="chrome://browser/content/utilityOverlay.js"/>
<script type="application/javascript" src="chrome://browser/content/setDesktopBackground.js"/>
<script type="application/javascript" src="chrome://global/content/contentAreaUtils.js"/>
#ifndef XP_MACOSX
<hbox align="center" id="foo">
<hbox align="center">
<label value="&position.label;"/>
<menulist id="menuPosition"
label="&position.label;"
oncommand="gSetBackground.updatePosition(parseInt(this.value));">
oncommand="gSetBackground.updatePosition();">
<menupopup>
<menuitem label="&center.label;" value="3"/>
<menuitem label="&tile.label;" value="1"/>
<menuitem label="&stretch.label;" value="2"/>
<menuitem label="&center.label;" value="CENTER"/>
<menuitem label="&tile.label;" value="TILE"/>
<menuitem label="&stretch.label;" value="STRETCH"/>
</menupopup>
</menulist>
<spacer flex="1"/>
@ -93,8 +90,9 @@
<groupbox align="center">
<caption label="&preview.label;"/>
<stack>
<vbox id="monitor" align="center" pack="center"/>
<image id="monitorImage"/>
<!-- if width and height are not present, they default to 300x150 and stretch the stack -->
<html:canvas id="screen" width="1" height="1"/>
<image id="monitor"/>
</stack>
</groupbox>

1
browser/themes/pinstripe/browser/jar.mn
Просмотреть файл

@ -32,6 +32,7 @@ classic.jar:
skin/classic/browser/feeds/feedIcon16.png (feeds/feedIcon16.png)
skin/classic/browser/setDesktopBackground.css
skin/classic/browser/monitor.png
skin/classic/browser/monitor_16-10.png
skin/classic/browser/places/places.css (places/places.css)
skin/classic/browser/places/query.png (places/query.png)
skin/classic/browser/places/livemarkItem.png (places/livemarkItem.png)

Двоичные данные
browser/themes/pinstripe/browser/monitor.png
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом" Свайп Оверлей

До

Ширина:  |  Высота:  |  Размер: 7.9 KiB

После

Ширина:  |  Высота:  |  Размер: 7.6 KiB

Двоичные данные
browser/themes/pinstripe/browser/monitor_16-10.png Normal file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 6.6 KiB

16
browser/themes/pinstripe/browser/setDesktopBackground.css
Просмотреть файл

@ -1,12 +1,14 @@
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
html|canvas#screen {
margin: 12px 11px 38px;
}
#monitor {
margin: 18px 20px 38px 13px;
width: 153px;
height: 114px;
overflow: hidden;
}
#monitorImage {
list-style-image: url("chrome://browser/skin/monitor.png");
}
#monitor[aspectratio="16:10"] {
list-style-image: url("chrome://browser/skin/monitor_16-10.png");
}

1
browser/themes/winstripe/browser/jar.mn
Просмотреть файл

@ -40,6 +40,7 @@ classic.jar:
skin/classic/browser/Search-provider-mid-bottom.png
skin/classic/browser/setDesktopBackground.css
skin/classic/browser/monitor.png
skin/classic/browser/monitor_16-10.png
skin/classic/browser/feeds/feedIcon.png (feeds/feedIcon.png)
skin/classic/browser/feeds/feedIcon16.png (feeds/feedIcon16.png)
skin/classic/browser/feeds/subscribe.css (feeds/subscribe.css)

Двоичные данные
browser/themes/winstripe/browser/monitor_16-10.png Normal file
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 8.8 KiB

13
browser/themes/winstripe/browser/setDesktopBackground.css
Просмотреть файл

@ -1,17 +1,14 @@
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
#monitor {
html|canvas#screen {
margin: 12px 11px 32px;
width: 153px;
height: 114px;
overflow: hidden;
}
#monitorImage {
#monitor {
list-style-image: url("chrome://browser/skin/monitor.png");
}
#noPreviewAvailable {
background-color: white !important;
font-size: 12px !important;
#monitor[aspectratio="16:10"] {
list-style-image: url("chrome://browser/skin/monitor_16-10.png");
}