Miriam Ruiz
random thoughts on technology and life











{September 01, 2009}   Adding a new HTML tag to Mozilla: mark

Starting from the patch included in bug report #485377 (” Implement HTML5′s <mark> tag”), it is easy to see the steps for adding a new tag to Mozilla. In this case the new HTML 5 tag mark, used for indicating text as marked or highlighted for reference purposes, due to its relevance in another context.

Lets start by adding the tag to the tag dictionary:

--- src.orig/content/base/src/nsGkAtomList.h
+++ src/content/base/src/nsGkAtomList.h
@@ -518,6 +518,7 @@
 GK_ATOM(manifest, "manifest")
 GK_ATOM(marginheight, "marginheight")
 GK_ATOM(marginwidth, "marginwidth")
+GK_ATOM(mark, "mark")
 GK_ATOM(marquee, "marquee")
 GK_ATOM(match, "match")
 GK_ATOM(max, "max")
--- src.orig/parser/htmlparser/public/nsHTMLTagList.h
+++ src/parser/htmlparser/public/nsHTMLTagList.h
@@ -128,6 +128,7 @@
 HTML_TAG(link, Link)
 HTML_TAG(listing, Span)
 HTML_TAG(map, Map)
+HTML_TAG(mark, Span)
 HTML_TAG(marquee, Div)
 HTML_TAG(menu, Shared)
 HTML_TAG(meta, Meta)
--- src.orig/parser/htmlparser/src/nsElementTable.cpp
+++ src/parser/htmlparser/src/nsElementTable.cpp
@@ -767,6 +767,15 @@
 /*special parents,kids*/            0,&gMapKids,
 },
 {
+    /*tag*/                             eHTMLTag_mark,
+    /*req-parent excl-parent*/          eHTMLTag_unknown,eHTMLTag_unknown,
+    /*rootnodes,endrootnodes*/          &gRootTags,&gRootTags,
+    /*autoclose starttags and endtags*/ 0,0,0,0,
+    /*parent,incl,exclgroups*/          kSpecial, (kInlineEntity|kSelf|kFlowEntity), kNone,
+    /*special props, prop-range*/       0,kDefaultPropRange,
+    /*special parents,kids*/            0,0,
+  },
+  {
 /*tag*/                             eHTMLTag_marquee,
 /*req-parent excl-parent*/          eHTMLTag_unknown,eHTMLTag_unknown,
 /*rootnodes,endrootnodes*/          &gRootTags,&gRootTags,
--- src.orig/parser/htmlparser/src/nsHTMLTags.cpp
+++ src/parser/htmlparser/src/nsHTMLTags.cpp
@@ -175,6 +175,8 @@
 {'l', 'i', 's', 't', 'i', 'n', 'g', '\0'};
 static const PRUnichar sHTMLTagUnicodeName_map[] =
 {'m', 'a', 'p', '\0'};
+static const PRUnichar sHTMLTagUnicodeName_mark[] =
+  {'m', 'a', 'r', 'k', '\0'};
 static const PRUnichar sHTMLTagUnicodeName_marquee[] =
 {'m', 'a', 'r', 'q', 'u', 'e', 'e', '\0'};
 static const PRUnichar sHTMLTagUnicodeName_menu[] =

Now for the second part, adding the style that the tag will have by default:

--- src.orig/dist/firefox/res/html.css
+++ src/dist/firefox/res/html.css
@@ -61,7 +61,7 @@
 * inherited value) to the transformed element." */

 address, blockquote, body, caption, center, col, colgroup, dd, dir, div, dl, dt,
-fieldset, form, h1, h2, h3, h4, h5, h6, hr, html, isindex, li, listing, map, 
+fieldset, form, h1, h2, h3, h4, h5, h6, hr, html, isindex, li, listing, map, mark,
 marquee, menu, noframes, ol, p, plaintext, pre, table, tbody, td, tfoot, th,
 thead, tr, ul, xmp {
 unicode-bidi: embed;
@@ -335,6 +335,11 @@
 white-space: nowrap;
 }

+mark {
+  background-color: #ff9;
+  font-weight: bolder;
+}
+
 /* titles */
 abbr[title], acronym[title] {
 border-bottom: dotted 1px;
@@ -488,8 +493,8 @@
 center:focus, cite:focus, code:focus, col:focus, colgroup:focus, dd:focus,
 del:focus, dfn:focus, dir:focus, div:focus, dl:focus, dt:focus, em:focus,
 fieldset:focus, font:focus, form:focus, h1:focus, h2:focus, h3:focus, h4:focus,
-h5:focus, h6:focus, hr:focus, i:focus, img:focus, ins:focus,
-kbd:focus, label:focus, legend:focus, li:focus, link:focus, menu:focus,
+h5:focus, h6:focus, hr:focus, i:focus, img:focus, ins:focus, kbd:focus,
+label:focus, legend:focus, li:focus, link:focus, mark:focus, menu:focus,
 object:focus, ol:focus, p:focus, pre:focus, q:focus, s:focus, samp:focus,
 small:focus, span:focus, strike:focus, strong:focus, sub:focus, sup:focus,
 table:focus, tbody:focus, td:focus, tfoot:focus, th:focus, thead:focus,
--- src.orig/layout/style/html.css
+++ src/layout/style/html.css
@@ -61,7 +61,7 @@
 * inherited value) to the transformed element." */

 address, blockquote, body, caption, center, col, colgroup, dd, dir, div, dl, dt,
-fieldset, form, h1, h2, h3, h4, h5, h6, hr, html, isindex, li, listing, map,
+fieldset, form, h1, h2, h3, h4, h5, h6, hr, html, isindex, li, listing, map, mark,
 marquee, menu, noframes, ol, p, plaintext, pre, table, tbody, td, tfoot, th,
 thead, tr, ul, xmp {
 unicode-bidi: embed;
@@ -335,6 +335,11 @@
 white-space: nowrap;
 }

+mark {
+  background-color: #ff9;
+  font-weight: bolder;
+}
+
 /* titles */
 abbr[title], acronym[title] {
 border-bottom: dotted 1px;
@@ -488,8 +493,8 @@
 center:focus, cite:focus, code:focus, col:focus, colgroup:focus, dd:focus,
 del:focus, dfn:focus, dir:focus, div:focus, dl:focus, dt:focus, em:focus,
 fieldset:focus, font:focus, form:focus, h1:focus, h2:focus, h3:focus, h4:focus,
-h5:focus, h6:focus, hr:focus, i:focus, img:focus, ins:focus,
-kbd:focus, label:focus, legend:focus, li:focus, link:focus, menu:focus,
+h5:focus, h6:focus, hr:focus, i:focus, img:focus, ins:focus, kbd:focus,
+label:focus, legend:focus, li:focus, link:focus, mark:focus, menu:focus,
 object:focus, ol:focus, p:focus, pre:focus, q:focus, s:focus, samp:focus,
 small:focus, span:focus, strike:focus, strong:focus, sub:focus, sup:focus,
 table:focus, tbody:focus, td:focus, tfoot:focus, th:focus, thead:focus,

There it is. The next part should be to find out how to take that tag into account, probably modifying toolkit/content/widgets/findbar.xml, so that when you search for a text, you can get the information from it, but that’s something that should be carefully thought.



{September 01, 2009}   Compiling Firefox from scratch (in Debian)

After Madrid Mozilla Technologies Course (MMTC) in July, which was great, and apart from finding out that the people involved in the development of Mozilla are really lovely, I also found out that the technologies they support are very powerful and solid. As I learn more about Mozilla code, I plan to keep posting stuff here. Please, don’t be too hard with me if I say any stupid or obvious thing, keep in mind that I’m just learning for the moment. Of course, comments and feedback is totally welcome, especially if I can learn from it. You can also go to the Mozilla/URJC Planet to find more about the people involved in the course.

Lets start by downloading the latest source code. We shall use Mercurial for that. We can get the latest source code by doing

hg clone http://hg.mozilla.org/mozilla-central/ src

but, as it is explained here, you might want to check the status of the code regarding the automatic tests beforehand. To avoid poisoning my system with the tests I’ll do, I’m gonna use “/opt/mozilla” as my working directory. I might have used something under “/usr/local/” instead, it doesn’t really matter.

$ sudo mkdir /opt/mozilla
$ sudo chown miriam:miriam /opt/mozilla
$ cd /opt/mozilla
$ sudo aptitude install mercurial
$ hg clone http://hg.mozilla.org/mozilla-central/ src

OK, it will take a while to fetch the whole code tree, so take it easy.

Now, lets install the dependencies. According to the build-dependencies of xulrunner-1.9.1, these should be:

$ sudo aptitude install build-essential automake autoconf2.13 libtool \
libx11-dev libxt-dev libidl-dev libgtk2.0-dev libstartup-notification0-dev \
libgnomevfs2-dev libgnome2-dev libgnomeui-dev libcairo2-dev libpng12-dev \
libjpeg62-dev zlib1g-dev libbz2-dev libreadline5-dev libkrb5-dev python-dev \
libnspr4-dev libnss3-dev libhunspell-dev libdbus-glib-1-dev libsqlite3-dev \
liblcms1-dev libasound2-dev zip xvfb xfonts-base xauth java-gcj-compat-dev

Not bad, isn’t it? :)

The next step will be to set some sane build configuration options from which we can start working. We can store them in a file called .mozconfig inside the src directory. You can have a look at mine if you want.

Last, but not least, you might have a problem if the libpng in your system does not support the APNG format. You can choose between using the libpng that comes with Mozilla instead of the system one, or you can apply a patch to be able to compile it even without APNG support. Your choice.

Now, we’re really close now. Lets build the program:

$ export JAVA_HOME=/usr/lib/jvm/java-gcj
$ autoreconf --force
$ ./configure
$ make
$ make install

According to the parameter “–prefix=/opt/mozilla” in .mozconfig, the program will be installed in that directory. As we already have assigned it to our current user, there’s no need to be root or use sudo for that.

You can run it with “/opt/mozilla/bin/firefox”

OK, we now have our building system ready for modifying it and see what happens :P




about

This is a personal webpage that belongs to Miriam Ruiz.
If you want to contact her, you can do at:
webmistress(at)miriamruiz(dot)es.

pages
categories
archive
twitter
calendar
August 2017
M T W T F S S
« Nov    
 123456
78910111213
14151617181920
21222324252627
28293031  
credits
WikiLeaks

La Lista de Sinde