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.



vivien says:

Hey,

#c5 of Henri Sivonen sound like a followup bug, you should probably propose your patch, as in, to get his opinion.

In all case, nice article :)



Leave a Reply


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
February 2019
M T W T F S S
« Nov    
 123
45678910
11121314151617
18192021222324
25262728  
credits
WikiLeaks

La Lista de Sinde