Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adapting bookmarks to allow rendering blobs #2

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Adapting bookmarks to allow rendering blobs #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
# gaia-app-icon
# gaia-site-icon

> A web component to show an icon for an application.

## Basic usage

With web components enabled, source the script and add a gaia-app-icon element to your document, like so:
With web components enabled, source the script and add a gaia-site-icon element to your document, like so:

```html
<head>
<script src="gaia-app-icon/script.js"></script>
<script src="gaia-site-icon/script.js"></script>
<script>
var gaiaAppIcon = document.createElement('gaia-app-icon');
document.body.appendChild(gaiaAppIcon);
var gaiaSiteIcon = document.createElement('gaia-site-icon');
document.body.appendChild(gaiaSiteIcon);
</script>
</head>
```
Expand All @@ -20,19 +20,19 @@ With web components enabled, source the script and add a gaia-app-icon element t

### Properties

#### gaiaAppIcon.app
#### gaiaSiteIcon.app

#### gaiaAppIcon.entryPoint
#### gaiaSiteIcon.entryPoint

#### gaiaAppIcon.bookmark
#### gaiaSiteIcon.bookmark

#### gaiaAppIcon.icon
#### gaiaSiteIcon.icon

### Methods

#### gaiaAppIcon.launch()
#### gaiaSiteIcon.launch()

#### gaiaAppIcon.refresh()
#### gaiaSiteIcon.refresh()

### Events

Expand Down
4 changes: 2 additions & 2 deletions examples/basic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@
<script src="../script.js"></script>

<style>
gaia-app-icon {
gaia-site-icon {
width: 256px;
}
</style>
</head>

<body>
<gaia-app-icon id="icon"></gaia-app-icon>
<gaia-site-icon id="icon"></gaia-site-icon>
</body>

<script>
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "gaia-app-icon",
"name": "gaia-site-icon",
"version": "0.0.0",
"description": "A web component to show an icon for an application.",
"main": "script.js",
Expand All @@ -12,7 +12,7 @@
},
"repository": {
"type": "git",
"url": "git@gitlab.com:Cwiiis/gaia-app-icon.git"
"url": "https://github.com/gaia-components/gaia-site-icon"
},
"devDependencies": {
"karma": "^0.12.37",
Expand Down
104 changes: 60 additions & 44 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ window.GaiaAppIcon = (function(exports) {
var proto = Object.create(HTMLElement.prototype);

// Allow the base URL to be overridden
var baseurl = window.GaiaAppIconBaseurl || 'gaia-app-icon/';
var baseurl = window.GaiaAppIconBaseurl || 'gaia-site-icon/';

proto.createdCallback = function() {
this._template = template.content.cloneNode(true);
Expand Down Expand Up @@ -389,7 +389,8 @@ window.GaiaAppIcon = (function(exports) {
};

proto._relayout = function() {
this._size = this.clientWidth;
var bookmarkIcon = this.bookmark && this.bookmark.icon;
this._size = this.clientWidth || (bookmarkIcon && bookmarkIcon.size);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not certain this change makes sense - the component is designed to be added to the DOM before it gets refreshed so it can know its size (alternatively, a size can be set on it via style, I suppose?) - this just means we may end up with badly scaled icons when it does get added to the DOM (even if bookmarkIcon.size ends up larger than clientWidth, down-scaling can also look bad and wastes memory).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The problem is that we are not appending the element to the DOM in the case of the chrome. We just replace the backgroundImage with the one created by the component. I tried to set the size via style without adding it to the DOM and didn't seem to work for me...

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah, I see - why don't we use the component instead of taking its background image? The problem is this will break that optimisation for bookmarks when the component is being used normally.

this._container.style.width = this._container.style.height =
this._size + 'px';
this._size *= window.devicePixelRatio;
Expand Down Expand Up @@ -476,47 +477,7 @@ window.GaiaAppIcon = (function(exports) {
// Handle icon loading for bookmarks, app icon loading is more involved
// and handled below this block.
if (this.bookmark) {
if (this.bookmark.icon) {
// It'd be great to just set the src here, but we need to be able
// to read-back the image, so use system XHR.
var xhr = new XMLHttpRequest({ mozAnon: true, mozSystem: true });

xhr.open('GET', this.bookmark.icon, true);
xhr.responseType = 'blob';
xhr.timeout = ICON_FETCH_TIMEOUT;

this._pendingIconUrl = this.bookmark.icon;

xhr.onload = function load(image) {
if (!image.onload) {
return;
}

if (xhr.status !== 0 && xhr.status !== 200) {
image.onerror(xhr.status);
} else {
image.src = URL.createObjectURL(xhr.response);
}
}.bind(this, this._image);

xhr.onerror = function error(image, e) {
if (image.onload) {
image.onerror(e);
}
}.bind(this, this._image);

try {
xhr.send();
return;
} catch(e) {
console.error('Error loading bookmark icon', e);
}
}

// Fallback to the default icon
if (!this._hasIcon) {
this._setPredefinedIcon('default');
}
this._renderBookmark();
return;
}

Expand Down Expand Up @@ -561,6 +522,61 @@ window.GaiaAppIcon = (function(exports) {
}
};

proto._renderBookmark = function() {
if (this.bookmark.icon) {
if (typeof this.bookmark.icon === 'string') {
this._fetchIcon(this.bookmark.icon);
} else {
var blob = this.bookmark.icon.blob;
var url = URL.createObjectURL(blob);
this._image.src = url;
}
return;
}

// Fallback to the default icon
if (!this._hasIcon) {
this._setPredefinedIcon('default');
}
};

proto._fetchIcon = function(url) {
// It'd be great to just set the src here, but we need to be able
// to read-back the image, so use system XHR.
var xhr = new XMLHttpRequest({ mozAnon: true, mozSystem: true });

xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.timeout = ICON_FETCH_TIMEOUT;

this._pendingIconUrl = this.bookmark.icon;

xhr.onload = function load(image) {
if (!image.onload) {
return;
}

if (xhr.status !== 0 && xhr.status !== 200) {
image.onerror(xhr.status);
} else {
image.src = URL.createObjectURL(xhr.response);
}
}.bind(this, this._image);

xhr.onerror = function error(image, e) {
if (image.onload) {
image.onerror(e);
}
}.bind(this, this._image);

try {
xhr.send();
return;
} catch(e) {
console.error('Error loading bookmark icon', e);
}
};

proto.handleEvent = function(e) {
switch(e.type) {
case 'progress':
Expand All @@ -584,5 +600,5 @@ window.GaiaAppIcon = (function(exports) {
<div id='image-container'><div id="spinner"></div></div>
<div><div id='subtitle'></div></div>`;

return document.registerElement('gaia-app-icon', { prototype: proto });
return document.registerElement('gaia-site-icon', { prototype: proto });
})(window);
2 changes: 1 addition & 1 deletion style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
gaia-app-icon {
gaia-site-icon {
display: flex;
flex-direction: column;
font-size: 0;
Expand Down
2 changes: 1 addition & 1 deletion test/test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ suite('GaiaAppIcon', () => {

// DOM container to put test cases
dom = document.createElement('div');
dom.innerHTML = '<gaia-app-icon></gaia-app-icon>';
dom.innerHTML = '<gaia-site-icon></gaia-site-icon>';
el = dom.firstElementChild;
document.body.appendChild(dom);
});
Expand Down