--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+ <meta name="Author" content="KaiRo - Robert Kaiser">
+ <title>CSI:Mozilla</title>
+ <link rel="stylesheet" type="text/css" href="slides.css">
+ <script type="text/javascript" src="slides.js"></script>
+ <link rel="contents" href="#index" title="Overview">
+ <link rel="index" id="link-toc" href="#toc" title="Content">
+ <link rel="start" id="link-start" href="#index" title="Start">
+ <!-- link rel="first" id="link-first" href="#" title="First page" hidden>
+ <link rel="previous" id="link-prev" href="#" title="Previous page" hidden>
+ <link rel="next" id="link-next" href="#" title="Next page" hidden>
+ <link rel="last" id="link-last" href="#" title="Last page" hidden -->
+</head>
+<body onload="docLoaded();">
+<header id="header"><div id="header-text">CSI:Mozilla</div>
+ <a id="headerlogo" href="#index" title="Startseite">Mozilla Firefox</a>
+</header>
+<nav id="slidenav"><div id="subheader-text"></div>
+ <a href="#toc" id="nav-toc" accesskey="t">toc</a> ||
+ <a href="#index" id="nav-start" accesskey="s">start</a> ||
+ <a href="#" id="nav-prev" accesskey="p" hidden>< back</a>
+ <span id="nav-prev-nolink" class="nolink">< back</span> |
+ <a href="#" id="nav-next" id="goNext" accesskey="n" hidden>fwd ></a>
+ <span id="nav-next-nolink" class="nolink">fwd ></span>
+</nav>
+
+<article id="toc" title="Table of Contents">
+<h1>Table of Contents</h1>
+<h2>CSI:Mozilla</h2>
+
+<div class="captionedbox">
+<p class="captionedbox-caption">The following slides are available in this presentation:</p>
+<div class="captionedbox-content">
+<ul id="toc-list">
+</ul>
+</article>
+
+<article id="index" title="Start Page">
+<h1>CSI:Mozilla - Crash Scene Investigations</h1>
+
+<div class="simplebox">
+<mark><a href="http://home.kairo.at/">Robert Kaiser</a></mark>,
+"KaiRo" <kairo@kairo.at>
+<br><small>Mozilla Crash Scene Investigator</small>
+</div>
+
+<div class="captionedbox">
+<p class="captionedbox-caption">Slides:
+ <a href="http://kairo.mozdev.org/slides/linuxwochen2011/">http://kairo.mozdev.org/slides/eumozcamp-berlin2011/</a></p>
+<div class="captionedbox-content small">
+<ul class="small">
+ <li>Created for a presentation at
+ <a href="https://wiki.mozilla.org/EU_MozCamp_2011">EU MozCamp 2011</a> in
+ Berlin.</li>
+ <li>Written in HTML 5 with CSS 3 and JavaScript.</li>
+ <li>Navigation via links on all slides, via access keys
+ (e.g. "n"/Alt+Shift+N for "next") or back/forward arrow keys</li>
+ <li><a href="#toc">Contents</a></li>
+ <li><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/at/"><img
+ alt="Licensed under CC-BY-SA," style="border-width:0;vertical-align:bottom;"
+ src="cc-by-sa-80x15.png" /></a> 11/2011 Robert Kaiser</li>
+</ul>
+</div>
+</div>
+</article>
+
+<article id="crashkill" title="CrashKill">
+<h1>CrashKill</h1>
+
+<div class="simplebox">
+<div class="cent">
+<p><img src="firefox.png" alt="Firefox logo"></p>
+<p><mark>Mission: To improve stability of our
+ products</mark></p>
+</div>
+</article>
+
+<article id="beginnings" title="CrashKill: Beginnings">
+<h1>How CrashKill Started</h1>
+
+<div class="simplebox">
+<img src="crash.jpg" alt="" style="float:right;">
+<ul>
+ <li><mark>Nov 2009</mark>: 3.5 & 3.6 crashes spiked and created a need for
+ renewed foxus</li>
+ <li><mark>CrashKill</mark> was born: a focused initiative to analyze incoming
+ crashes, detect trends, and drive resolutions</li>
+</ul>
+</div>
+</article>
+
+<article id="factors" title="Stability Factors">
+<h1 style="display:none;">Stability Factors</h1>
+
+<div class="simplebox cent">
+<img src="factors.png"
+ alt="stability factors: Flash, add-ons, website changes, malware, code changes">
+</div>
+</article>
+
+<article id="crash-analysis" title="Reading the Tea Leaves">
+<h1>Reading The Tea Leaves</h1>
+
+<div class="simplebox">
+<ul>
+ <li><mark>Trends</mark>: crash rates, "explosiveness"</li>
+ <li>Bugs filed / crash-stats data analysis</li>
+ <li><mark>Topcrash</mark> lists, crash ranks</li>
+ <li><mark>Correlations</mark> with code, website, 3rd-party software changes</li>
+ <li>Browser vs. plugin</li>
+ <li>Duplicates, OSes, uptime, etc.</li>
+</ul>
+</div>
+</article>
+
+<article id="understanding-data" title="Understanding the Data">
+<h1>Understanding the Data</h1>
+
+<div class="simplebox">
+<ul>
+ <li><mark>Comparing</mark> crash rates between releases</li>
+ <li><mark>Pitfalls</mark> of crash rates, ADUs, ranks</li>
+ <li>Changes of signatures due to code or tool changes</li>
+ <li>Related signatures/bugs/crashes</li>
+</ul>
+</div>
+</article>
+
+<article id="focus" title="Areas of Focus">
+<h1>Areas of Focus</h1>
+
+<div class="simplebox">
+<ul>
+ <li>Long tail</li>
+ <li><mark>Hangs</mark>, 3rd-party issues, malware</li>
+ <li>Analysis by <mark>component</mark></li>
+ <li>Most crashes in core, not desktop/mobile-specific</li>
+ <li>Mobile has more emphasis on out-of-memory issues</li>
+ <li>Lower ADU volume on mobile</li>
+ <li>Android Symbol Sender</li>
+</ul>
+</div>
+</article>
+
+<article id="bugzilla" title="Bugzilla Best Practice">
+<h1>Bugzilla Best Practice</h1>
+
+<div class="simplebox">
+<ul>
+ <li>Add <mark>crash</mark> keyword</li>
+ <li>If a regression, add <mark>regression</mark> keyword
+ <ul>
+ <li>Add <mark>regressionwindow-wanted</mark> keyword</li>
+ <li>Try finding regression window</li>
+ <li>Try to correlate with push log</li>
+ </ul>
+ </li>
+ <li>If possible, find and add steps to reproduce</li>
+</ul>
+</div>
+</article>
+
+<article id="community" title="Community">
+<h1>Community</h1>
+
+<div class="simplebox">
+<ul>
+ <li>Keep community engaged by fixing their issues</li>
+ <li>Community member Scoobidiver: >650 crash bugs filed</li>
+ <li>We <mark>need more members</mark> of the community contributing in a more
+ coordinated fashion</li>
+ <li>From filing good bugs via regression hunting to trying to fix</li>
+</ul>
+</div>
+</article>
+
+<article id="socorro" title="Socorro">
+<h1>Socorro</h1>
+
+<div class="simplebox">
+<ul>
+ <li><mark>crash-stats.mozilla.com</mark></li>
+ <li>Working closely with Socorro team to identify and prioritize front-end
+ features that will help us diagnose crashes</li>
+</ul>
+</div>
+</article>
+
+<article id="help" title="How You Can Help">
+<h1>How You Can Help</h1>
+
+<div class="simplebox">
+<ul>
+ <li>Make sure you <mark>submit crash reports</mark>, ideally including email
+ and comment</li>
+ <li><mark>Report bugs</mark> for crashes, tell us if you can reproduce them</li>
+ <li>CrashKill meetings - Mondays @ 10am Pacific ("7pm Central Europe") x290</li>
+ <li>Visit us in #crashkill on irc.mozilla.org</li>
+ <li>If you have a regular Firefox crash, help us to diagnose it - email
+ <mark>marcia@mozilla.com</mark> with details</li>
+ <li>Try fixing crashes - each one counts!</li>
+</ul>
+</div>
+</article>
+
+<article id="team" title="CrashKill-Team">
+<h1 style="display:none;">The CrashKill-Team</h1>
+
+<div class="simplebox cent">
+<img src="team.png"
+ alt="Chris Hofmann, Sheila Mooney, Marcia Knous, Noaki Hirata, Robert Kaiser">
+</div>
+</article>
+
+</body>
+</html>
--- /dev/null
+<?php
+// site branding
+$local_conf_no_wrap=ON;
+// serve it as it is
+$local_conf_serve_as_is=ON;
+?>
--- /dev/null
+/**************************
+ * styles for talk slides *
+ * by Robert Kaiser *
+ * <kairo@kairo.at> *
+ * (for Linuxwochen 2009) *
+ **************************/
+
+
+/***** base style *****/
+
+html {
+ overflow: hidden; /* to make translations not paint scrollbars */
+}
+
+body {
+ margin: 0px;
+ padding: 0px;
+ border: 0px;
+ font-family: Arial,Helvetica,sans-serif;
+ font-size: 2em;
+ color: #6d7581;
+ background: white url("template/page-background.png") top left repeat-x;
+}
+
+ul {
+ padding-left: 1.2em;
+ margin-bottom: 0.5em;
+}
+
+ul:first-child,
+ul:last-child {
+ margin-top: 0;
+}
+
+#header {
+ height: 38px;
+ position: relative;
+ padding: 0 15px 0 0;
+ z-index: 1;
+}
+
+#headerlogo {
+ position: relative;
+ display: block;
+ text-indent: -500px;
+ font-size: 1px;
+ overflow: hidden;
+ height: 48px;
+ width: 186px;
+ background: url("template/firefox-title.png") 5px 3px no-repeat;
+}
+
+#header-text {
+ float: right;
+ padding: 7px 20px;
+ font-size: 24px;
+ font-weight: bold;
+ color: #C0C8CA;
+}
+
+#header-text.neartime {
+ color: #A0C8DA;
+}
+
+#header-text.ontime {
+ color: #80CC80;
+}
+
+#header-text.overtime {
+ color: #FF8080;
+}
+
+#slidenav {
+ padding: 4px 15px 30px 55px;
+ font-size: 10px;
+ color: #A0C8DA;
+}
+
+#slidenav a:link,
+#slidenav a:visited {
+ color: #6d7581;
+}
+
+#slidenav a:hover,
+#slidenav a:active {
+ color: #0000FF;
+}
+
+#slidenav .nolink {
+ color: #A0C8DA;
+}
+
+#subheader-text {
+ float: right;
+ padding: 0 20px;
+ color: #6d7581;
+}
+
+article {
+ position: absolute;
+ width: 100%;
+ /* header is 38px + 1px border, slidenav is 13px + 4px + 30px paddings,
+ another 5px for safety */
+ height: -moz-calc(100% - 90px);
+ overflow: auto;
+
+ -moz-transition-property: -moz-transform, opacity;
+ -moz-transition-duration: 3s;
+ -moz-transition-timing-function: ease;
+ -webkit-transition-property: -moz-transform, opacity;
+ -webkit-transition-duration: 3s;
+ -webkit-transition-timing-function: ease;
+ -moz-transform-origin: center 5em;
+
+ opacity: 0;
+/*
+ -moz-transform: translate(-100%, 0);
+ -webkit-transform: translate(-100%, 0);
+*/
+/*
+ -moz-transform: scale(0.1) rotate(360deg);
+ -webkit-transform: scale(0.1) rotate(360deg);
+*/
+ -moz-transform: scale(0.1) rotate(360deg) translate(-200%, 0);
+ -webkit-transform: scale(0.1) rotate(360deg) translate(-100%, 0);
+}
+
+article[aria-selected="true"] {
+ opacity: 1;
+ -moz-transform: scale(1) rotate(0deg) translate(0, 0);
+ -webkit-transform: scale(1) rotate(0deg) translate(0, 0);
+}
+
+article[aria-selected="true"] ~ article {
+ opacity: 0;
+/*
+ -moz-transform: translate(100%, 0);
+ -webkit-transform: translate(100%, 0);
+*/
+/*
+ -moz-transform: scale(0.1) rotate(-360deg);
+ -webkit-transform: scale(0.1) rotate(-360deg);
+*/
+ -moz-transform: scale(0.1) rotate(-360deg) translate(200%, 0);
+ -webkit-transform: scale(0.1) rotate(-360deg) translate(100%, 0);
+}
+
+/***** headers *****/
+
+h1 {
+ margin: 0 0 0.5em 0;
+ font-size: 1.7em;
+ font-weight: bold;
+ color: #505050;
+ text-align: center;
+ text-shadow: #AAAA80 3px 3px 5px;
+}
+
+h2 {
+ margin: 0.5em 0;
+ font-size: 1.3em;
+ font-weight: bold;
+ color: #505050;
+ text-align: center;
+ text-shadow: #AAAA80 2px 2px 3px;
+}
+
+h3 {
+ margin: 0.5em 0;
+ font-size: 1.1em;
+ font-weight: bold;
+ color: #505050;
+ text-align: center;
+}
+
+h4 {
+ margin: 0.5em 0;
+ font-size: 1em;
+ font-weight: bold;
+ color: #505050;
+ text-align: left;
+}
+
+/***** boxes *****/
+
+.simplebox {
+ padding: 0.5em;
+}
+
+.captionedbox {
+ padding: 0px;
+}
+
+.simplebox,
+.captionedbox {
+ margin: 1em;
+ border: 1px solid #A0C8DA;
+ background: white url("template/page-background.png") top left repeat-x;
+ -moz-border-radius: .5em;
+ -moz-box-shadow: #6d7581 1px 1px 3px 2px;
+}
+
+.captionedbox-content {
+ margin: 0px;
+ padding: 0.5em;
+ border: 0px;
+ border-top: 2px solid #A0C8DA;
+ -moz-border-top-colors: #A0C8DA #6d7581;
+ -moz-border-radius: 0 0 .5em .5em;
+}
+
+.captionedbox-caption {
+ margin: 0.5em;
+ font-weight: bold;
+ text-shadow: #AAAA80 1px 1px 2px;
+}
+
+/***** misc formatting *****/
+
+mark {
+ font-weight: bold;
+ color: #FF6600;
+ background-color: transparent;
+ text-shadow: #AAAA80 2px 2px 3px;
+}
+
+.border {
+ border: 1px solid #6d7581;
+ padding: 0.5em;
+}
+
+ul > li {
+ margin: 0.5em 0;
+}
+
+.cent {
+ text-align: center;
+}
+
+.topmargin {
+ margin-top: 0.5em;
+}
+
+.akey {
+ text-decoration: underline;
+}
+
+a:link, a:visited { color: #447bc4; text-decoration: none; }
+a:hover, a:active { color: #FF6600; text-decoration: underline; }
+
+mark a:link, mark a:visited { color: #FF6600; }
+mark a:hover, mark a:active { color: #FF6600; }
+
+/***** small stuff *****/
+
+.small,
+.small {
+ font-size: 0.75em;
+}
+
+ul.small,
+.small ul {
+ padding: 0px;
+ border: 0px;
+ margin: 0px 0px 0px 1em;
+}
+
+ul.small > li
+.small ul > li {
+ margin: 0px;
+ padding: 0px;
+ border: 0px;
+}
+
+/***** specific slides *****/
+
--- /dev/null
+/******************************
+ * JavaScript for talk slides *
+ * by Robert Kaiser *
+ * <kairo@kairo.at> *
+ * (for FOSDEM 2011) *
+ ******************************/
+
+var slides = {};
+var articleNodes;
+var currentSlide;
+var currentIdx;
+var defaultIdx = 1; // set to slide index to show by default
+var firstIdx = 2; // set no value if to use first available
+var lastIdx; // set no value if to use first available
+
+var pageTitle, headerText, subHeaderText;
+var navPrev, navNext, navPrevNolink, navNextNolink;
+
+// Called when the document has been loaded.
+function docLoaded() {
+ pageTitle = document.getElementsByTagName("title")[0];
+ headerText = document.getElementById("header-text");
+ subHeaderText = document.getElementById("subheader-text");
+ navPrev = document.getElementById("nav-prev");
+ navNext = document.getElementById("nav-next");
+ navPrevNolink = document.getElementById("nav-prev-nolink");
+ navNextNolink = document.getElementById("nav-next-nolink");
+ articleNodes = document.getElementsByTagName("article");
+
+ if (!firstIdx)
+ firstIdx = 0;
+ if (!lastIdx)
+ lastIdx = articleNodes.length - 1;
+
+ // Get a list of all slides (articles).
+ subHeaderText.textContent = articleNodes.length + " slides...";
+ for (var i = 0; i < articleNodes.length; ++i) {
+ subHeaderText.textContent = "Indexing slide " + i + " / " + articleNodes.length;
+ if (!articleNodes[i].id)
+ articleNodes[i].id = "slide_" + i;
+
+ slides[articleNodes[i].id] =
+ {"idx": i,
+ "name": articleNodes[i].id,
+ "title": articleNodes[i].title ? articleNodes[i].title : articleNodes[i].id,
+ "obj": articleNodes[i]};
+
+ if (location.hash.length &&
+ (location.hash == "#" + articleNodes[i].id || location.hash == "#" + i)) {
+ articleNodes[i].setAttribute("aria-selected", "true");
+ currentSlide = slides[articleNodes[i].id];
+ currentIdx = i;
+ }
+ }
+
+ if (!currentSlide) {
+ currentIdx = defaultIdx;
+ currentSlide = slides[articleNodes[currentIdx].id];
+ currentSlide.obj.setAttribute("aria-selected", "true");
+ location.hash = "#" + currentSlide.name;
+ }
+ updateDisplay();
+}
+
+// Called when the hash part of the location changes.
+function locationHashChanged() {
+ if (location.hash.length > 1) {
+ var hashtag = location.hash.substring(1);
+ // If not a number, treat as ID
+ if (isNaN(hashtag) && slides[hashtag]) {
+ currentSlide.obj.removeAttribute("aria-selected");
+ currentSlide = slides[hashtag];
+ currentIdx = currentSlide.idx;
+ currentSlide.obj.setAttribute("aria-selected", "true");
+ updateDisplay();
+ }
+ else if (articleNodes[hashtag]) {
+ currentSlide.obj.removeAttribute("aria-selected");
+ currentIdx = hashtag;
+ currentSlide = slides[articleNodes[currentIdx].id];
+ currentSlide.obj.setAttribute("aria-selected", "true");
+ updateDisplay();
+ }
+ }
+}
+window.onhashchange = locationHashChanged;
+
+// Update the display after we updated what slide is shown.
+function updateDisplay() {
+ if (currentIdx >= firstIdx && currentIdx <= lastIdx &&
+ currentSlide.name != "toc")
+ subHeaderText.textContent = (currentIdx - firstIdx + 1) + "/" +
+ (lastIdx - firstIdx + 1) + " - " +
+ currentSlide.title;
+ else
+ subHeaderText.textContent = currentSlide.title;
+ pageTitle.textContent = headerText.textContent + ": " + currentSlide.title;
+ if (currentIdx > firstIdx && currentSlide.name != "toc") {
+ navPrev.hidden = false;
+ navPrev.href = "#" + articleNodes[currentIdx - 1].id;
+ navPrevNolink.hidden = true;
+ }
+ else {
+ navPrev.hidden = true;
+ navPrevNolink.hidden = false;
+ }
+ if (currentIdx < lastIdx && currentSlide.name != "toc") {
+ navNext.hidden = false;
+ navNext.href = "#" + articleNodes[currentIdx + 1].id;
+ navNextNolink.hidden = true;
+ }
+ else {
+ navNext.hidden = true;
+ navNextNolink.hidden = false;
+ }
+ headerText.className = "";
+ slide_start = new Date();
+ if (currentSlide.name == "toc")
+ createTOC();
+ else
+ setTimeout("timerFired()", 1000*(slide_seconds/3));
+}
+
+// Create TOC list.
+function createTOC() {
+ var list = document.getElementById("toc-list");
+ if (!list.getElementsByTagName("li").length) {
+ for (var slide in slides) {
+ if (slide != "toc") {
+ var item = document.createElement("li");
+ var link = document.createElement("a");
+ var slideHeaders = slides[slide].obj.getElementsByTagName("h1");
+ if (slideHeaders.length)
+ link.textContent = slideHeaders[0].textContent;
+ else
+ link.textContent = slides[slide].title;
+ link.href = "#" + slides[slide].name;
+ item.appendChild(link);
+ list.appendChild(item);
+ }
+ }
+ }
+}
+
+// Do timed color variation on slides.
+var slide_seconds = 3*60;
+var slide_start = new Date();
+
+function timerFired() {
+ var slide_current = new Date();
+ var seconds_diff = Math.round((slide_current.getTime() - slide_start.getTime()) / 1000);
+ if (seconds_diff >= slide_seconds) {
+ headerText.className = "overtime";
+ }
+ else if (seconds_diff >= Math.round(2*slide_seconds/3)) {
+ headerText.className = "ontime";
+ setTimeout("timerFired()", 1000*(slide_seconds/3));
+ }
+ else if (seconds_diff >= Math.round(slide_seconds/3)) {
+ headerText.className = "neartime";
+ setTimeout("timerFired()", 1000*(slide_seconds/3));
+ }
+ else {
+ // We should never come here, but if we do, go into a 1s loop until we get over the upcoming step.
+ setTimeout("timerFired()", 1000);
+ }
+}
+setTimeout("timerFired()", 1000*(slide_seconds/3));
+
+// Keyboard/click nav functionality, mostly inherited from FOSDEM 2007.
+(function() {
+ function go(where) {
+ where = where || "next";
+ var navElem = document.getElementById("nav-" + where);
+ if (!navElem.hidden)
+ window.location.href = navElem.href;
+ }
+
+ function handleClick(e) {
+ e = e || event;
+ var target = (window.event) ? e.srcElement : e.target;
+ if (e.which == 1 && target.nodeName != "A" && target.nodeName != "VIDEO")
+ go("next");
+ }
+
+ function handleKeyPress(e) {
+ e = e || event;
+ switch (e.keyCode) {
+ case e.DOM_VK_LEFT:
+ go("prev"); break;
+ case e.DOM_VK_RIGHT:
+ go("next"); break;
+ }
+ }
+
+ window.onclick = handleClick;
+ window.onkeypress = handleKeyPress;
+})();
projects / slides.git / commitdiff
