Epiphany WebKit II.

Because there were some improvements lately both in epiphany and in WebKit-gtk I decided to write another post about it.

So far I can say it behaves quite nicely and seems subjectively faster than epiphany with gecko backend. Also due to epiphany-gecko instantly crashing after upgrade to xulrunner-1.9 it's also my default browser for the time being, so I guess I am quite acquainted with it already...

Since my last post I noticed especially these improvemets:

• zoom-text is now implemented and works, webkit-gtk also supports full zoom, so if anyone is interested, he's welcome to open new bug with necessary patch with relevant config option to epiphany at gnome bugzilla
  
  
• scrolling seems smoother, only when there are a lot of big images on the page or flash movie, it remains in old "non-smooth" mode. But with text only it is as smoth as it can be :-)
  
  
• and the most awesome is: find. Now finding text inside page is working flawlessly and it's damn fast, I remember in epiphany-gecko it's a bit laggy, but here as soon as you type one letter, you have half of the page content highlighted (in addition to selecting the first found matching text on the page, it also highlights all found matches) ;-)
  

And now the thing that bugs me most: the font fallback with either pango or fontconfig backend (fedora uses pango) is still crapy - and as a result I cannot read Japanese pages - in place of kanji or kana there is only white space :'(
The webkit guys seems to be aware of the problem but not quite apt to fix it, so if anyone with pango knowledge would help fix this bug he'd be praised by all japanese, chinese, korean, ... webkit-gtk users (and me) :-)

EDIT:
Irregular builds of webkit-gtk can be get at my fedora people page: http://mso.fedorapeople.org/packages/RPMS/i386/

Because debuginfo is a little too big, I do not ship it, but you can get it if you rpmbuild --rebuild the source rpm.

subtitleeditor in repos now

I have good news for all the people using Fedora to create/edit subtitles. Recently I wanted to edit some subtitles for a certain movie so I looked for nice GTK applications suited for the work. I've found two

• Gnome Subtitles
• subtitleeditor

While the former had been in Fedora repos already and has the very kind of interface I am used to (it is gnome app from the bottom to the top, so I felt like I knew already how to work with it), it lacks some interesting features subtitleeditor has (and it's written in mono, unlike subtitleeditor...). Since subtitle editor was not in fedora yet and did not depend on any non-free/patented stuff, I decided to package it.

I was quite suprised by the speed of the Package Review, since with all my previous packages it was like forever before someone noticed it... So the review had been done quite fast and I had built it to rawhide and submitted for updates-testing in F-8/9. And today it got pushed to stable updates in F-8/9 so I might consider it being in the repos, now officialy :-)

Echo Icons - Working with Git

I've successfully finished another two exams (English and Mathematical Analysis for Physicists III [complex analysis]) so I had some time to finish another tutorial for the echo icon theme. This time I tried to explain how to work with the git SCM we use. Again for convenience I paste the tutorial here as well ;-)

Working with Git ¶

Proword ¶

Echo utilises a modern Source Control Management (further only SCM) tool called git. It's quite powerful and has a lot of futures and thus may seem a little hard to work with from the start. That's why we provide this simple guide how-to work with echo-icon-theme's git repository.

Some basics ¶

Unlike some other SCM like cvs or svn, git is sort of decentralised since you work locally with full-featured repository in which you can even have local development branches, etc. That means you can do many changes to the repository when working offline and than just push the changes to the master repository, but it also means that

git commit

will make changes only to the local repository, unlike cvs.

Installing git ¶

This is the easiest step, since all you need to do (as root) is

yum install git-all

which will install the basic git commands as well as some useful extras (like simple gui that helps managing your git repository).

Copying the master repository ¶

Now that you've set up git, you need to copy the master repository so that you can make changes locally. In order to do so, navigate into a folder you'd like to keep your echo-icon-theme git repository in and issue

git clone ssh://git.fedorahosted.org/git/echo-icon-theme

which will make a exact copy of the master repository in your disk. After the repository is cloned, you can start browsing - it has normal directory structure and the only directory that has something to do with git, is the hidden .git directory.

Note: The command above expects that you have a working fedora account and you are member of gitecho-icon-theme group. We use this one, because it simplifies life a little more after you want to push your changes back to master repository - the ssh access is read & write. If you don't need to push your changes back or you don't have ssh access, you can use

git clone git://git.fedoraproject.org/echo-icon-theme

Setting up local branches ¶

Apart from master branch we also keep stable branches (for updates to stable echo-icon-theme releases) that can have different conent than the master branch. One of such branches is 0.3.x. On it we will show you an example how to set up a local branch that's keeped in sync with the remote one.

First go to the echo-icon-theme directory you just git-cloned and issue

git gui

A not so nice, but pretty usable app shows up ;-) You can even do your commits from there. But not yet. Now go to Repository -> Visualise All Branch History. Another window shows up. Try to play with it a little, if you screw up your repository, you can always start from scratch by deleting it and cloning it again (or restoring it from a backup copy, if you had done any). After you feel comfortable with it, find a branch you want to track localy (master branch is already tracked by default) - as an example we use 0.3.x. Right-click on the commit message and select Create new branch, as shown in the example image.

A pup-up windows appear. Fill in the branch name. It does not necessary need to be same like the remote branch name, but it is more convenient. See the example image.

Now you need to tell git to synchronise your branch with the remote one. Go to .git folder and open the config file in there. It should look similar to that:

[core]
 repositoryformatversion = 0
 filemode = true
 bare = false
 logallrefupdates = true
[remote "origin"]
 url = ssh://git.fedorahosted.org/git/echo-icon-theme
 fetch = +refs/heads/*:refs/remotes/origin/*
[branch "master"]
 remote = origin
 merge = refs/heads/master

Now add there a new branch section following the example of master branch. In our example the final config file will look like this:

[core]
 repositoryformatversion = 0
 filemode = true
 bare = false
 logallrefupdates = true
[remote "origin"]
 url = ssh://git.fedorahosted.org/git/echo-icon-theme
 fetch = +refs/heads/*:refs/remotes/origin/*
[branch "master"]
 remote = origin
 merge = refs/heads/master
[branch "0.3.x"]
 remote = origin
 merge = refs/heads/0.3.x

Switching between branches ¶

There are more ways how to switch between branches, we'll explain two of them which we think are most convenient. The first one is pretty straightforward, as it's done by simple git command:

git checkout

If you do not remember how you named the branch you'd like to switch to, another git command might be handy:

$ git branch
 0.3.x
* master

As you can see in the example output, we have two branches - 0.3.x and master branch. The star notes which is the branch you are in now, in our case master. If you'd like now to switch to the 0.3.x branch use the git command mentioned above with the correct branch name:

git checkout 0.3.x

The second way is for command line haters ;-) Open again git-gui and let it visualise All branch history. Now find the branch you'd like to switch to, right-click on its label and select Checkout branch as shown in the example image.

Keeping your local repo in sync ¶

Before you make changes to your repository, it's good thing to sync it with master repository so that your local copy is up-to-date. Navigate to the main folder of your repository and issue

git pull origin

This should put your local repository to be up-to-date with the one on fedorahosted.org.

Commiting your changes ¶

Now you've got to the step when you want to commit your changes to your local git repository. First switch to the branch you want your changes to make to, then make your changes to the content of the repository (modifying/removing/adding files/directiories) and issue

git commit -a

Examine if everything is OK. If there are any untracked files which you want to commit, abort the commit (press :q! and hit enter to quit the vim editor) and issue

git add *

which would add the new files into git index. Try to commit once again, now everything should be OK. The default editor used for commit messages is vim. The basics you need to know in order to be able to easily make those messages are these:

• press i to enter into edditing mode
• press escape to quit edditing mode
• if not in edditing mode, press : to start command mode
• in command mode press q! and hit enter to exit without changes (in this case it means that you'll abort the commit)
• in command mode press wq and hit enter to save the changes (in this case it means you'll finish the commit)

You can later review the chages in the gui again, this time you don't need all branches history though, so issuing only

gitk

is just enough to visualise the current branch history.

Pushing your changes to fedorahosted.org ¶

Now this step should be again one of the easier ones. If you cloned the repository originaly using the ssh access, or had set up the origin (in .git/config) to the ssh address, simple

git push origin

is enough. If not, but have the ssh access, substitute the origin with the ssh address:

git push ssh://git.fedorahosted.org/git/echo-icon-theme

Learning more ¶

If you feel like learing more about git you can:

• play around a little with the gui's
• git help
• man git
• Official Git Tutorial

Echo Icons Tips - Creating Echo Icons with On the Table Perspective

I've just finished a (hopefully) simple how-to on creating Echo icons with on the table perspective. For convenience I paste the content here as well. Comments are welcome :)

Creating Echo Icons with On the Table Perspective ¶

Since creating on-the-table-prespective echo icons can be a little tricky, we provide a step by step guideline for creating most of the action icons.

Step 0 - create grid ¶

On-the-table-prespective echo icons are similar in creating to flat icons, which means it is useful to create rectangular grid. You need create pixel grid, because we use it to help us in creating crisp icons. That means, you need to set the Origin X/Y to 0 px and Spacing X/Y to 1 px. Also, because we use this perspective for creating 32x32 and bigger icons it is useful to also set Major grid lines so that it divides our image into sections. Good values to use are 4 lines for 32x32 icons and 6 lines for 48x48 icons, but if you feel that bigger/lesser setting is better for you, use that. In the example pictures we show the grid setting and grid display in inkscape for 48x48 icon.

Step 1 - create the basic shape ¶

Now one of the most important things comes - creating a metaphor for your icon. The metaphor should be self descriptive and it should have easily recognisable shape. We advise to use same/similar metaphors like gnome-icon-theme as much as possible. In our example, we create the go-forward icon, which is usualy drawn like an arrow pointing to the right. In this part of process it is good to make use of the grid created in the Step 0 and it is not necessary to add gradients yet. It is also good to have in mind that you'll add outline and depth to the icon so you need to make it a little smaller so that the other parts also fit into drawing canvas and move it a little to the left to keep it opticaly in the centre. Look at the example image for reference.

Step 2 - create inner outline ¶

This step is one of the easier ones - you just add a 1 or 2 px wide outline to the shape you created in Step 1. It's useful to fill it temporarily with e.g. yellow colour to make it visible (white picture on white background is not visible at all), you'll fix the colour later in the process. Also make sure to align it to the pixel grid to keep the image crisp. Take a look at the example image.

Step 3 - add depth ¶

In this step we use a small trick to be able to both have the correct perspective and crisp icon. First we move the already created objects -0.2 px along the Y axis (to the bottom). Now we duplicate the whole shape of the created icons and move the duplicate 2 px to the right and 1.5 px along Y axis (to the top). Next we duplicate the original objects once more and union (Path > Union) all the duplicates. Next we put the newly created object to the bottom in Z direction (Object > Lower to Bottom) and edit the shape so that it looks like a side of the icon (it usually means that we remove some points). The resultant image should look like this:

Step 4 - add stroke ¶

In this step we add a simple stroke to the created objects. First duplicate whole object once more and union the duplicates. Move the newly created object to the bottom in Z direction, remove fill and add stroke to it. The stroke should have rounded corners and 1.5 px width (which results visualy in 0.75 px width stroke). The settings we used and the resultant image can be seen bellow.

Step 5 - finalise colours ¶

Next, we set correct colours and add gradients. There is not much to say about this section, only that linear gradients are usually preferred to radial ones and the gradients should not be too strong (e.g. going from mid-bright blue to [near] white). The resultant image might look like this:

Step 6 - add shadow ¶

Next, we add a simple shadow to the icon. First, create the desired shape of the shadow, in the on-the-table-perspective Echo icons it is usually an ellipse. If needed add a simple gradient, as shown in the example:

Next, modify the amount of Blur and Opacity so that the shadow is subtle, but easily visible. The values we used in this example and the resultant image are shown bellow:

Step 7 - check the result, fix problems ¶

Finally we'll check how the icon looks in the target size. Inkscape is very helpful in this by providing an Icon Preview function. Open it, select your target size (in our example 48x48) and on the right you'll see how the icon will look like, on the left you can see the details. As you might noticed, the trick used in Step 3 together with 1.5 px wide stroke led to crisp icon with correct perspective, only with tiny "misrenderings" that are visible only when zoomed. In case there are any other artifacts or misrenders play a little more with the icon while checking the preview (you need to click Refresh in order to see the changes you made) until you are completely satisfied with your work.

The Result ¶

Get SVG source

Echo Icon Common Mistakes - Blurry Icons

I've just written first and most needed part of the Common Mistakes done when creating Echo Icons. And that is blurry icons. Let me know what you think about it :-) For convenience I paste the relevant section here as well:

One of the most common mistakes is an icon design which does not take pixel grid into account. Here's an example picture of this mistake (on the left) and the same without this mistake (on the right):



Do you see the difference? Many people do. It depends on how sharp your eyes are, what DPI your display has, how sharp it is, on the used technology and many other various things. If you don't see the difference, don't worry, we have means to show it to you. We zoom the picture, in this case 10x. Now you should be definitely able to tell the difference between the two icons, again the wrong one is on the left and the correct one on the right:



But how are you supposed to make it correct if you don't see the difference in 1:1 and inkscape zooms it other way than we did? Again, don't worry. Inkscape can show the pixel grid for you, so you can check if anything is aligned as supposed. Go to File > Document Properties, and there click on the Grid tab. Add new rectangular grid and make sure Spacing X/Y is set to 1 px and Origin X/Y is set to 0 px. Now the pixel grid lines appear in the document.

However, you need to keep in mind that the grid lines are actually what you can call "lines between pixels" so the real pixels are inbetween the lines. That means, that every line you have in your icon needs to be between the grid lines - not cross them. Again here's the example what the wrong (on the left) and correct (on the right) case look like:



Now you have nearly everything you need in order to make your icon crisp. However, inkscape has prepared one another "trap" for you - if the grid is displayed it automaticaly aligns everything on it - which means your lines will be just in between two pixels (note that sometimes this might be intentional in order to easily create various effects) which in the result image will look blurry because the line would be divided into two pixels. But how to workaround that? There are multiple ways to do it:

• Set the grid Origin X/Y to 0.5 px and draw the lines on the grid lines, or


• Disable the snapping - View > Snap - and draw the lines inbitween the grid lines, or


• Leave the grid Origin X/Y to 0.0 px, draw the lines on the grid lines and when you are finished, move the resultant icon by half a pixel both in x and y direction

Now you know everything you need to be able to create crisp icons :-)

Epiphany WebKit I.

Because Epiphany is my favourite browser I am interested a lot in it's switch to WebKit backend in next release (2.24). So I decided to give it a go a watch how it improves along the road. First let me say, that the WebKit-gtk package available in repos is way too old to test cool new stuff, second it's still not in a state to be used as primary browser.

So I rebuild the WebKit-gtk rpms quite regularly when new release of WebKit snapshot happens. If anyone is interested, I can upload it to my fedora people page... Also from time to time I rebuild a local copy of epiphany - it does not have so fast development like WebKit, but I also want to keep my epiphany with gecko backend working...

And why I decided to blog about it? There are several reasons:

• To draw attention to WebKit and epiphany development


• It's cool


• Recently there were some radical improvements

So, what are the improvements I talk about? Mozilla plugins work now in WebKit as well which is cool. I can browse youtube videos without the need for gecko based browser with swfdec. It has one drawback though. Seems like epiphany keeps crashing when trying to load gcj web plugin, so I temporarily removed it, since I really don't need it ATM.

Another radical improvment (from user point of view) is fixed focus behaviour. Not so long ago, filling an entry on webpage, switching focus from web content to adress bar, creating new tabs or switching between tabs was sort of pain in the ass. Not any longer. Now it works just as expected.

Under the hood, they improved java script. People say it's about 4x faster than the older code and tests show that its also faster then Firefox's java script code. Kudos for that!

Last, but not least, I noticed that zoom function has been implemented. Finally, I can zoom text on pages (although, I don't use that function)...

And what are the currently most painful bugs/shortcomings of WebKit? For me it's those

• Broken font fallback (when font is supposed to be from sans-serif family, CJK glyphs are not displayed)


• Missing/Not working open in new window/tab actions


• Missing mimetype handling (i.e. unable to directly download anything)


• Missing features for ftp browsing (only some sort of unformated ls is showed)


• Does not remember passwords/unable to login when page uses pop-up window for authentication

With that said, I think WebKit is really powerful backend and when the gtk port, together with new epiphany version, is finished it will be great competitor for firefox, which does not seem to fit well into linux (from every POV I try to look at it, it always seem like windows oriented app), in the *nix field... Aaah, cannot wait for the time when I would be finally able remove gecko from my Fedora :-D

I hope to post more or less regularly about the improvements in Ephy-WebKit, so stay in touch :-)

BTW: this post was written from epiphany using webkit backend ;-)

Oh, and I just noticed that I can manage my blog when using webkit while gecko always thinks I am signed out. Hillarious. :-D