Skip navigation.

IceArdor's Blog

The Search for InterOperability

Timeline of Opera Releases

Thursday, 16. August 2007, 02:07:43

A month ago, I wanted a vector image that showed Opera's branching. It's definately still a work in progress, but I've got the essential elements there. Check it out. Timeline of Opera.svg Yay for SVG!

If you want to help me with it, it'll be on Wikipedia shortly. To add dates, I made a little javascript tool, so I didn't have to break my mouse using the Windows calculator. date2pixel.html and date2pixel.js


Note: 1.0-1.6 were made on a Merlin build. Because Kestrel's implementation is different (and better), 1.7 and onward were designed for Kestrel. Logically, 1.0-1.6 don't look very good in Kestrel, and 1.7 onward doesn't look very good in Merlin.





My Wishlist5 Reasons Why I Can Wait For Kestrel

Comments

mabdul 27. August 2007, 10:59

hey! this timeline is super!
in version 1.5 the versionnumbers are shown better, but it is still hard to watch them / to difference them. maybe the timeline should be longer (for the same time!)
how about to add the builds for linux/mac?

mfg
mabdul

IceArdor 29. August 2007, 01:53

The build numbers are already kinda cluttered, but if I can figure out a way to make it work, I'd do it. Maybe each build should be like "88808 / 3695 / 660". I kinda wanted to only show the build when the circle is hovered over, but I haven't figured out how to do that yet.

Thanks for the feedback. I'm considering including this on Wikipedia so that other people can edit it. Feel free to look at the source code; it's pretty simple. If you know any SVG or JS, please give me some feedback on how to make it better.

IceArdor 29. August 2007, 02:01

Note to self:

I need to edit this: http://my.opera.com/desktopteam/blog/show.dml/759403 Peregrine and Kestrel both existed before Friday February 16 2007. Peregrine became the working Opera copy, and Kestrel branched off of that.

Kestrel's been in the working for a little over a year now.

Anonymous 29. August 2007, 17:12

David writes:

Hej,


The transparency makes rendering slower on Opera.
Remove .weekly opacity and it'll be superfast again.



http://www.opera.com/docs/specs/ says :

Performance

These features are particularly processor expensive and should be used with care when targetting machines with slower processors: filters, transparency layers (group opacity), and masks.



cheers

IceArdor 1. September 2007, 08:01

Note to self: Official date of Kestrel branching off from Opera core: June 20, 2006 (http://my.opera.com/desktopteam/blog/2007/08/31/focus-areas-during-kestrel-development), Which is the same day that Opera 9.00 Final was released, and the same day that v1.6.svg uses.

Anonymous 1. September 2007, 11:48

David writes:

Hi Ice,

if you add this script section (based on your date2pixel) :



...then you can replace all your x="" anc cx="" by (for example) onload="initXPos(evt)" year="2007" month="9" day="4". Which is more easy to maintain.


And if you want to add simplicity, try removing all text.dx and using a "text-anchor: middle;" style instead.

Hope this helps;
you've done a great job!


David

IceArdor 1. September 2007, 19:07

Yeah, I was thinking about making x="date2pixel(2007,9,4)", and then I could easily stretch it by a factor of 1.2 or 1.5 so that the build numbers don't overlap. Then it'd be worth my time to added in builds for the different platforms.

Another problem I had run into was that by starting the timeline at 2005, this timeline doesn't include any releases before that date, because they are negative values, which can't be displayed. I suppose I could do a horrible javascript hack to add 1000 to every x="" and cx="" value, but by implementing the dynamic system you wrote about, it'll be really easy to change the starting date.

I was thinking like making an xml file with all the data and doing xslt to write the svg page. But I guess I can do the same with JavaScript. So should I just put all of the data in attributes?

Thanks a ton! I'll start rewriting the image when I get back from vacation.

Anonymous 1. September 2007, 22:17

David writes:

Hey,

Yes you can use xslt to transform your data. It depends if you want the svg code to be "understandable" (ie. the dates readable).
The full-svg approach may be to define the build icons as s and them later in the code. You can see a few examples here : http://www.w3.org/TR/SVG11/struct.html#UseElement. But I wonder how to pass the parameters (build numbers,..) to the symbol instances... ?

Note that if you want to extend your svg without rewriting all the coordinates (ie showing negative coordinates), you can use the viewBox attribute on the root :
viewBox="-100 0 2265 820"
width="2265"
This example will extend your viewport by 100 pixels left.

have a great time on holiday. don't think too much about coding ;-)

IceArdor 7. September 2007, 06:27

Thanks David.

I've got a lot of reworking to do on the files anyways because Merlin has a minimum font size allowed, and Kestrel can make fonts infinitely small. SVG support is a lot faster on Kestrel too.

Note to self: Add build 9500 to 9.5 Alpha.
Add build 8762 to Kestrel Branch, which is experimental build from Hakon featuring the <video> html5 element. (http://people.opera.com/howcome/2007/video/) - 2007-03-29

IceArdor 8. September 2007, 05:15

version 1.7 is released with a couple updates. Thanks for the recommendations, David. I'm currently debating whether I should use javascipt or xml/xslt to make a more dynamic image (make it easier to manage, show/hide windows, mac, or unix builds, graph the frequency of weeklies being published on a friday vs other day of the week, horizontally stretch the graph, etc).

Will it be faster to render js or xml?

I wanted to see how the xml route would look, so here's a piece of the xml file.

<major id="9Kestrel">
<branch id="9.5x">
<release longname="9.5 Alpha 1" shortname="9.5a1" type="alpha" />
<date year="2007" month="9" day="4" dotw="tuesday" />
<build win="9500" mac="4404" unix="1567" />
</branch>
</major>

Basically, I'd be using XML as a database and XSLT to convert the XML into SVG. While this is more readable, your solution is more elegant. I've never worked with XSLT before, so I'd be better off with the JavaScript.

mabdul 8. September 2007, 10:51

please: no js! i have it basically turned off! please not one more page in my spezific site list p:

mfg
mabdul

IceArdor 10. September 2007, 01:20

David, is there anyway that I can loop through all of the x="" values and apply a multiplier on them using javascript, and manipulate the horizontal spacing at runtime? I want to be able to make this file available for people who have javascript enabled and disabled, if possible.

I'm worried that by computing all of the x="" values onLoad, that it'll slow down the rendering of the file severely.

Here's a working copy of what I have. The 9.5a1 has the build (9500) implemented in your javascript system. v1.8a. Best viewed on Kestrel (Merlin evaluated the dx before rotating the text sideways, turning the dx into a dy, essentially. Kestrel fixed this problem)

mabdul 10. September 2007, 11:28

why on earth is build 8762 not in the right position?!? (it has his own /no branch ^^)

dahulevogyre 10. September 2007, 21:18

Hej Ice,

I guess so. I'm not an ECMAScript expert, but -without getElementByClassName()-, I'd getElementsByTagName("*"), loop and compute. something like :


elems = getElementsByTagName("*");
for(int i=0; i<elems.length ;i++) {
  if(/* elems[i] is of class "date" */) {
    rePosition(elems[i], ratio);
  }
}


date2pixel is pretty straightforward. I guess it would not consume much.


About the new attributes, I see you're trying to do it right : extending the DTD. :up:
You have to use a custom namespace also :
http://www.w3.org/TR/SVG11/extend.html#PrivateElementsAndAttribute


Mabdul, I always wondered : why do people disable javascript ?

David

IceArdor 10. September 2007, 23:17

Thanks David! Your help is greatly appreciated. I was trying to figure out the namespace dtd stuff last night, totally confused because I've never done any of that before (and if you don't know your way around the w3's site, it's VERY confusing and most certainly unhelpful to anyone without a PhD in Legal Documentation.

The other thing I wanted to know is how I can use the current year="" month="" day="" implementation without having an onLoad event on EVERY single tag. If I could call the onLoad event at the top, or even at the beginning of every <g> or <use>, it'd be a lot easier. What code would I need for that?

Lastly, I need to figure out how to use <symbol>s and <use> them later in the code. I'll work on learning that later. I might need help. I might not even need to use symbols if I use attributes to describe win="" mac="" unix="" and then use javascript to write that data. The problem then would be the positioning of the elements. I can't figure out how to use css to position elements. That'd make it a lot easier to say text.build (y: 10;}, but that isn't supported in SVG.



Mabdul, I wasn't sure where to put 8762. 8762 was the experimental build that Hakon Wium Lie gave to us on his blog (not posted on Desktop Team), giving us a technical preview of using the <video> element to embed ogg videos within a document instead of using proprietary codecs like flash or windows media player using the <embed> tag. I never downloaded it, but feature-wise it was probably very similar to Merlin. I would have been happy putting it in with the 9.2x branch, but the filename of the exe he released was http://people.opera.com/howcome/2007/video/op950_8762_video_repack_with_lgpl_signed.exe, making me assume that it was not from the 9.2x branch, but rather the 9.5x branch. However, Kestrel probably had active development at the time and was probably very buggy, and so I doubt that it would have come from the buggy Kestrel branch. In confusion, I put it in the only place where it doesn't satisfy logic. To be even further incorrect, the build really should be called a technical preview, as that's what it is. But it was never called that by Hakon.

IceArdor 10. September 2007, 23:52

I figured out how to make it display in both javascript-enabled browsers and js-disabled. In each tag, I'll include the x="" (for js-disabled) and year="" month="" day="", which will update the x="" value.

By adding in a year="" month="" day="", I can also alter the formula to horizontally stretch the page. How can I embed a slider on the page so the user can choose what factor to horizontally stretch everything by?

I might make a calculator to accomodate for some days having 30 days, others having 31, and February having 28/29. I could also feed the year, month, date values into a function which evaluates what day of the week each build was released on. That was one of my initial hopes, and I think that's finally a possibility. I'm so happy. Thanks.

v1.8a v1.8b v1.8c v1.8d

mabdul 11. September 2007, 12:09

@leunen.d because of bad ads!
@IceArdor ah this build is that! then it is the right position (i think) you should mark it as tp with the note of the <video>-element (or with a hotlink or somethink else that explains why this build is there - otherwise there will be more questitions about this build o.O )

dahulevogyre 11. September 2007, 20:20

Did you try to add a single onload attribute on the root ?


About <symbol>s, I can't see how to parametrize the instances (how to pass the build numbers). You can change the x, y, width, height, add a transform... But how do you change text inside it ?
I've found this : http://www.keystoneframework.org/doc_svgddg.html But I don't understand how they do it. It seems I'm more comfortable with w3c specs :wink:


For the slider, maybe you can start by adding two zoom (in/out) buttons. Then you can build a draggable slider between them. (See examples called Events1 and Events2 on http://www.croczilla.com/svg/samples/)

dahulevogyre 12. September 2007, 17:49

Have a look at this great example : http://www.codedread.com/displayWebStats.php
Jeff does know a bit in SVG !

IceArdor 18. September 2007, 06:25

I've extended the timeline to go all the way back to Opera 2. However, I want to start the initial viewpoint from x=0 to emphasize the work that has been put into this as being Opera 8.x and beyond.

Would I want to use javascript (something like focus()?) or could I use an anchor name (index.html#top)

Update: v1.8 is posted, v1.9a is in progress. date2pixel tool updated as well.

mabdul 18. September 2007, 13:50

great release! maybe adding a feature to get the exact date (if it is known) by hoovering over the build(or some different opportunities)

IceArdor 18. September 2007, 17:49

I'm trying to figure out how to make hover events work either by using css or javascript
circle:hover {content: attr(year)}
onMouseOver="displayToolTip(evt)" onMouseOut="hideToolTip(evt)"

Could I get some help, David?

I also want to incorporate a utility that can calculate the probability of a release occuring on each day of the week, among other stuff. (Open up the svg image (1.9a) in a text editor and look at the changelog).

IceArdor 18. September 2007, 18:25

circle:hover for some reason won't fire. I can do *:hover circle, but then that makes every single circle fire when I hover over the svg document. Why isn't it working?

dahulevogyre 18. September 2007, 21:58

Hi,

It's very modest of you to ask me for help. I think you have much to teach me when it comes to SVG. :-)

I've never used CSS in SVG. I really don't know. Maybe it's not implemented.
These tooltip scripts look like they work :
http://www.mecxpert.de/svg/tooltips.html and
http://svg-whiz.com/samples.html (very interesting Q&A)
Look at the question "How do I show a tooltip in SVG?". And if you want to avoid scripting, look at the last question : "Is it possible to display element metadata without using scripting?". Both solutions seem to work in Opera 9.21 for me.


A statistics utility ? wow. did you find a function to convert a date into a week day ?

IceArdor 20. September 2007, 00:34

Version 1.9 will display Windows, Mac, and Unix builds. It'll also allow you to hover over a circle and display the year, month, day, and day of the week. I've got everything implemented in parts, and just need to put it together and debug. I'm using the onmouseover and onmouseout events to make the popup. I'm going to hide all of the builds unless you hover over the circle to solve the problem with all the builds running on top of each other. I decided to make this change because adding mac and unix builds will only make it more crowded.

If anyone can find the build numbers for releases prior to 7.5tp1, it'd be greatly appreciated. I can do the formatting, I just have had limited luck on Google, though I have found some build numbers. If you can find windows, mac, and unix build numbers, that'd be even better. Thanks.

Edit: I'm having some troubles with the SVG DOM. I don't know enough. Help? Search through the javascript section to find showBuild(evt) and hideBuild(evt). I'm using the circle for 9.23 as my testcase, so hover over 9.23 to get it to work. 1.9b

Edit2: Build + Day of the Week demo script

I suppose I could just give every tag an id and then reference them by their tag id, but I should be able to access them through the DOM without having to assign individual id's to everyone.

Anonymous 20. September 2007, 09:02

David writes:

wierd : evt.target is a SVGElementInstance (http://www.w3.org/TR/SVG11/struct.html#InterfaceSVGElementInstance) as it was a !?
Looks like a bug to me ...
You'll have access to the attributes of its .correspondingElement.

IceArdor 26. November 2007, 05:04

http://www.howtocreate.co.uk/tutorials/jsexamples/movetooltip.html

(When I get time, I'll add in a tooltip like this one to the SVG file for build number and release date)

mabdul 26. November 2007, 19:03

what do you want to say us with this link? *G*

mabdul 13. February 2008, 20:23

oh, nothing new since em a long time ago!
very bad :wink:

today i recently updated the wishlist of the collected "5-things"-tagged-game

(i striked a few thinks which have already been done by the myopera and the desktop team)

IceArdor 14. February 2008, 07:38

yeah.... I've been crazy busy, but I'll try to keep working on this. I have been adding in weekly releases. I just haven't changed the layout, thus no new version number. Nonetheless, you'll notice the image for version 1.9 points to 1.9.9 (as it asymptotically approaches 2.0!) Maybe I'll have to celebrate with a new version when Kestrel's released. No promises.

EMeczKa 13. May 2008, 18:27

Hey! I updated the Timeline of Opera Releases.svg on Wikimedia Commons to v1.9.11 :smile: What about 2.0? Regards.

IceArdor 14. May 2008, 00:04

It's looking like these releases are going to asymptotically approach 2.0. I really ought to find more time, but school's more important. It is my plan that sometime in the future, I will learn how to use js and svg and css to make this an interactive document, rather than just an over-sized image. Unfortunately, I know very little javascript, basic CSS, and limited SVG, so I'll have to teach myself that stuff before I can even begin to write a 2.0.

Thanks for updating it, btw.

IceArdor 31. May 2008, 05:47

I uploaded v1.9.12 and fixed the date2pixel html tool (apparently <textarea> isn't a self-closable tag). Thanks a ton, EMeczKa. I've also posted this update on Wikipedia.

Judging by the frequency of releases, and noticing the pattern before Opera 9.0 came out, it looks like Kestrel will take flight within the next 2 months.

IceArdor 28. August 2008, 01:56

1.9.17

mabdul 30. August 2008, 19:30

you forgot th experimental build with Video, 3D, File access on labs.op ...

IceArdor 1. September 2008, 06:23

oops. I was going to do that. Thanks, I'll get it fixed.

mabdul 3. November 2008, 13:54

hugh?!? wasn't that timeline uploaded in the english wikipedia? i can't find it any more. where is it? wasn't it embed in any article?

IceArdor 4. November 2008, 01:40

http://en.wikipedia.org/wiki/Image:Timeline_of_Opera_Releases.svg

I've really been slacking off on updating this. Sorry about that.

It is embedded in http://en.wikipedia.org/wiki/History_of_the_Opera_web_browser

IceArdor 30. January 2009, 09:36

Update! One of these days when I get motivated, I'll teach myself JavaScript. Knowing me, that'll be a couple years down the road, so don't keep your hopes up. In the mean time, I've put in the last 3 pages of weeklies from the desktop team blog, plus made a couple tiny changes. This project is mostly for me me learning how to use SVG and ultimately JavaScript.

IceArdor 5. February 2009, 08:23

There are two types of people in this world. There are those who are like Tamil and contribute to Opera when they could be sleeping or relaxing. And there's people like me who snatch every moment to relax when not diligently studying.

Be the Tamil. You'll get much more done, everyone will like you and you might get banned by Opera for a day.

How to use Quote function:

  1. Select some text
  2. Click on the Quote link

Write a comment

Comment
(BBcode and HTML is turned off for anonymous user comments.)

Type the two words displayed in the image below:


Smilies

Download Opera, the fastest and most secure browser

Photos

IMG_2861.jpgtum water dam.jpgaIMG_2850.jpgaIMG_2831.jpgIMG_2839.jpg
July 2009
S M T W T F S
June 2009August 2009
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31