1426507 - Upgrade BMO to HTML5

Status: RESOLVED FIXED

(bugzilla.mozilla.org :: General, enhancement)

Description

[Kohei Yoshino]

The HTML source of https://bugzilla.mozilla.org/ is still mostly from the HTML4 era. To upgrade to HTML5, we need many changes including but not limited to:

* Simplify charset
* Use <main> for #bugzilla-body
* Remove type="text/javascript" from <script>
* Remove trailing slash from <meta>, <img>, etc.
* Use <section> and proper headings whenever possible

This is a good first bug. Feel free to take it!

Comment 1

[Fateh]

Hey, I am a student learning about open source development at Seneca College in Toronto. Is it possible if you can assign this to me and I would love to contribute? Thanks a lot

Comment 2

[Kohei Yoshino]

Welcome Fateh, feel free to take this! The repository can be found at https://github.com/mozilla-bteam/bmo

I'm also a student at George Brown College now. Let me know if you have any questions.

Comment 3

[Fateh]

(In reply to Kohei Yoshino [:kohei] from comment #2)
> Welcome Fateh, feel free to take this! The repository can be found at
> https://github.com/mozilla-bteam/bmo
> 
> I'm also a student at George Brown College now. Let me know if you have any
> questions.

Thanks for the prompt reply, If I could please get some help in getting started that would be greatly appreciated. I am confused about which files should I be tackling? Any help would be greatly appreciated. 

Happy Holidays!!

Comment 4

[Kohei Yoshino]

Sure! Most templates are located under https://github.com/mozilla-bteam/bmo/tree/master/template/en/default

And actually most of the issue mentioned above are in https://github.com/mozilla-bteam/bmo/blob/master/template/en/default/global/header.html.tmpl and https://github.com/mozilla-bteam/bmo/blob/master/template/en/default/global/footer.html.tmpl

You'll find the old-school charset definition, <div id="bugzilla-body"> (should be <main>), etc. in it.

Some other templates can be found at https://github.com/mozilla-bteam/bmo/tree/master/extensions

You can simply search and replace in your favourite editor by using a term like:

* <script type="text/javascript">
* /> (for a trailing slash of <br>, <img>, <input>, <meta>)

and filtering the results with the *.html.tmpl file extension.

You can also search <h2>, <h3>, <h4> to add <section>s, but it cannot be done automatically. Sometimes it may be difficult to understand where's the end of a section. It's just good to have, not mandatory :)

Comment 5

[Fateh]

Thank You So Much. I really appreciate your help. I will get on it right away.

Comment 6

[Kohei Yoshino]

Attachment: Search & replace example in VS Code

This is not an urgent stuff so you can do it any time!

Comment 7

[Fateh]

This really makes it easy! Thank you for welcoming me to open source development!

Comment 8

[Kohei Yoshino]

(In reply to Kohei Yoshino [:kohei] from comment #6)
> Created attachment 8938846 [details]
> Search & replace example in VS Code

Looks like this result isn't complete; you'll still have to search type="text/javascript" but this bug is relatively easy anyway :)

Comment 9

[Fateh]

I made a commit for some of the things. Could you please have a look at them?
Also I tried to do the <main> tag but it gave me an error while testing. Could you let know why.
Kind Regards
https://github.com/mozilla-bteam/bmo/pull/320

Comment 10

[Bug Butler]

Attachment: github pull request

Comment 11

[Fateh]

(In reply to Kohei Yoshino [:kohei] from comment #8)
> (In reply to Kohei Yoshino [:kohei] from comment #6)
> > Created attachment 8938846 [details]
> > Search & replace example in VS Code
> 
> Looks like this result isn't complete; you'll still have to search
> type="text/javascript" but this bug is relatively easy anyway :)

I made some of the changes, could you please have a look at them?

Kind Regards

Comment 12

[Kohei Yoshino]

Comment on attachment 8939127 [details] [review]
github pull request

Thanks again for the contribution!

Comment 13

[Fateh]

(In reply to Kohei Yoshino [:kohei] from comment #12)
> Comment on attachment 8939127 [details] [review]
> GitHub pull request
> 
> Thanks again for the contribution!

Thank You so much!!
I hope we work together again sometime!