Improve the style of B3 documentation
authorfpizlo@apple.com <fpizlo@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 30 Jan 2016 20:06:53 +0000 (20:06 +0000)
committerfpizlo@apple.com <fpizlo@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 30 Jan 2016 20:06:53 +0000 (20:06 +0000)
https://bugs.webkit.org/show_bug.cgi?id=153674

Reviewed by Oliver Hunt.

This makes the style of the B3 documentation look like the Wiki, which I think is
appropriate for the kind of content that we're putting into it - in particular, the font
is the perfect size for dense content. The style also doesn't require much spoonfeeding
from the HTML side so you can write nice looking documentation by just using really
basic HTML constructs.

* docs/b3/assembly-intermediate-representation.html:
* docs/b3/index.html:
* docs/b3/intermediate-representation.html:
* docs/b3/style.css:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@195903 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Websites/webkit.org/ChangeLog
Websites/webkit.org/docs/b3/assembly-intermediate-representation.html
Websites/webkit.org/docs/b3/index.html
Websites/webkit.org/docs/b3/intermediate-representation.html
Websites/webkit.org/docs/b3/style.css

index 1248313..ef2f755 100644 (file)
@@ -1,3 +1,21 @@
+2016-01-30  Filip Pizlo  <fpizlo@apple.com>
+
+        Improve the style of B3 documentation
+        https://bugs.webkit.org/show_bug.cgi?id=153674
+
+        Reviewed by Oliver Hunt.
+
+        This makes the style of the B3 documentation look like the Wiki, which I think is
+        appropriate for the kind of content that we're putting into it - in particular, the font
+        is the perfect size for dense content. The style also doesn't require much spoonfeeding
+        from the HTML side so you can write nice looking documentation by just using really
+        basic HTML constructs.
+
+        * docs/b3/assembly-intermediate-representation.html:
+        * docs/b3/index.html:
+        * docs/b3/intermediate-representation.html:
+        * docs/b3/style.css:
+
 2016-01-29  Filip Pizlo  <fpizlo@apple.com>
 
         Clean up the B3 documentation a bit
index 8fc69e4..3ecb2b4 100644 (file)
@@ -1,9 +1,18 @@
 <html>
-  <head>
-    <title>Assembly Intermediate Representation</title>
-    <link rel="stylesheet" type="text/css" href="style.css">
-  </head>
-  <body>
+<head>
+  <title>Assembly Intermediate Representation</title>
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+  <div id="banner">
+    <a href="http://www.webkit.org/" class="banner-link">
+      <div id="logo" class="site-logo">
+        WebKit
+        <span class="tagline">Open Source Web Browser</span>
+      </div>
+    </a>
+  </div>
+  <div id="contents">
     <h1><a href="index.html">Bare Bones Backend</a> / Assembly Intermediate Representation</h1>
     <p>The B3 compiler converts SSA procedures into efficient machine code by first converting
       them to a form that reveals machine details, like registers. This form is called Assembly
       which method name to use and its args indicate the arguments to pass to that method. We
       use code generation to create a massive switch statement that turns the reflective Insts
       into actual calls to MacroAssembler. Consequently, we can "add" new instructions to Air
-      usually by just editing the ‚ÄčAirOpcode.opcodes file.</p>
+      usually by just editing the <a href="http://trac.webkit.org/browser/trunk/Source/JavaScriptCore/b3/air/AirOpcode.opcodes">AirOpcode.opcodes</a>
+      file.</p>
 
     <p><a href="https://bugs.webkit.org/show_bug.cgi?id=153668">FIXME: Add more text here.</a></p>
-  </body>
+  </div>
+</body>
 </html>
 
index 9c59f81..f7ed8a1 100644 (file)
@@ -1,9 +1,18 @@
 <html>
-  <head>
-    <title>Bare Bones Backend</title>
-    <link rel="stylesheet" type="text/css" href="style.css">
-  </head>
-  <body>
+<head>
+  <title>Bare Bones Backend</title>
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+  <div id="banner">
+    <a href="http://www.webkit.org/" class="banner-link">
+      <div id="logo" class="site-logo">
+        WebKit
+        <span class="tagline">Open Source Web Browser</span>
+      </div>
+    </a>
+  </div>
+  <div id="contents">
     <h1>Bare Bones Backend</h1>
     <p>The Bare Bones Backend, or B3 for short, is WebKit's optimizing JIT for procedures
       containing C-like code.  It's currently used as the default backend for the
@@ -31,9 +40,9 @@ root->appendNew&lt;ControlValue&gt;(
         root->appendNew<Const64Value>(proc, Origin(), 2)));
 
 std::unique_ptr&lt;Compilation&gt; compilation = std::make_unique&lt;Compilation&gt;(vm, proc);
-int64_t (*function)(int64_t) = static_cast&lt;int64_t (*)(int64_t)&gt;(compilation->code().executableAddress());
+int64_t (*function)(int64_t) = bitwise_cast&lt;int64_t (*)(int64_t)&gt;(compilation->code().executableAddress());
 
-printf("%d\n", function(42)); // prints 44</code></pre>
+printf("%lld\n", function(42)); // prints 44</code></pre>
 
     <p>When compiled, the resulting machine code looks like this:</p>
 
@@ -162,7 +171,8 @@ Int64 @6 = Add(@0, @5)
 Int32 @7 = Load8S(@6, ControlDependent|Reads:Top)
 Int32 @8 = Const32(42)
 Int32 @9 = LessThan(@7, $42(@8))
-Void @10 = Check(@9:WarmAny, generator = 0x103fe1010, earlyClobbered = [], lateClobbered = [], usedRegisters = [], ExitsSideways|Reads:Top)</code></pre>
+Void @10 = Check(@9:WarmAny, generator = 0x103fe1010, earlyClobbered = [], lateClobbered = [],
+                 usedRegisters = [], ExitsSideways|Reads:Top)</code></pre>
 
     <p>Is turned into the following Air:</p>
 
@@ -188,7 +198,8 @@ Patch &Branch8(3,SameAsRep), LessThan, (%tmp1,%tmp2,2), $42, @10</code></pre>
       from Air's object-oriented way of representing those instructions to the target's machine
       code.  We use JavaScriptCore's macro assembler for this purpose.</p>
 
-  </body>
+  </div>
+</body>
 </html>
 
 
index 7b22817..1764e23 100644 (file)
@@ -1,9 +1,18 @@
 <html>
-  <head>
-    <title>B3 Intermediate Representation</title>
-    <link rel="stylesheet" type="text/css" href="style.css">
-  </head>
-  <body>
+<head>
+  <title>B3 Intermediate Representation</title>
+  <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+  <div id="banner">
+    <a href="http://www.webkit.org/" class="banner-link">
+      <div id="logo" class="site-logo">
+        WebKit
+        <span class="tagline">Open Source Web Browser</span>
+      </div>
+    </a>
+  </div>
+  <div id="contents">
     <h1><a href="index.html">Bare Bones Backend</a> / B3 Intermediate Representation</h1>
     <p>B3 IR is a C-like SSA representation of a procedure.  A procedure has a root block at
       which it starts execution when it is invoked.  A procedure does not have to terminate, but
 
       <dt>T Div(T, T)</dt>
       <dd>Works with any type except Void.  For integer types, this represents signed division
-        with round-to-zero.  Its behavior is undefined for x/0 or -2`^`31/-1.  For floating
+        with round-to-zero.  Its behavior is undefined for x/0 or -2<sup>31</sup>/-1.  For floating
         point types, this represents division according to the IEEE 854 spec.</dd>
 
       <dt>T Mod(T, T)</dt>
       <dd>Works with any type except Void.  For integer types, this represents signed modulo.
-        Its behavior is undefined for x%0 or -2`^`31%-1.  For floating point types, this
+        Its behavior is undefined for x%0 or -2<sup>31</sup>%-1.  For floating point types, this
         represents modulo according to "fmod()".</dd>
 
       <dt>T Neg(T)</dt>
       <dt>T ChillDiv(T, T)</dt>
       <dd>Chill division.  Valid for Int32 and Int64.  An operation is said to be chill if it
         returns a sensible value whenever its non-chill form would have had undefined behavior.
-        ChillDiv turns x/0 into 0 and -2`^`31/-1 into -2`^`31.  This is a separate opcode
+        ChillDiv turns x/0 into 0 and -2<sup>31</sup>/-1 into -2<sup>31</sup>.  This is a separate opcode
         because it's exactly the semantics of division on ARM64, and it's also exactly the
         semantics that JavaScript wants for "(x/y)|0".</dd>
 
       <dt>T ChillMod(T, T)</dt>
-      <dd>Chill modulo.  Valid for Int32 and Int64.  ChllMod turns x%0 into 0 and -2`^`31%-1
-        into 0.</dd>
+      <dd>Chill modulo.  Valid for Int32 and Int64.  ChllMod turns x%0 into 0 and
+        -2<sup>31</sup>%-1 into 0.</dd>
 
       <dt>T BitAnd(T, T)</dt>
       <dd>Bitwise and.  Valid for Int32 and Int64.</dd>
@@ -515,6 +524,7 @@ patchpoint->setGenerator(
         transformations.</dd>
     </dl>
 
-  </body>
+  </div>
+</body>
 </html>
 
index daa9288..2d671ce 100644 (file)
@@ -1,6 +1,126 @@
+body {
+    background: #fff;
+    color: #000;
+    margin: 10px;
+    padding: 0;
+}
+body, th, tr {
+    font: normal 13px Verdana,Arial,'Bitstream Vera Sans',Helvetica,sans-serif;
+}
+h1, h2, h3, h4 {
+    font-family: Arial,Verdana,'Bitstream Vera Sans',Helvetica,sans-serif;
+    font-weight: bold;
+    letter-spacing: -0.018em;
+    page-break-after: avoid;
+}
+h1 { font-size: 19px; margin: .15em 1em 0.5em 0; text-indent: -10px }
+h2 { font-size: 17px; text-indent: -10px }
+h3 { font-size: 15px; text-indent: -10px }
+hr { border: none;  border-top: 1px solid #ccb; margin: 2em 0 }
+address { font-style: normal }
+img { border: none }
+
+.underline { text-decoration: underline }
+ol.loweralpha { list-style-type: lower-alpha }
+ol.upperalpha { list-style-type: upper-alpha }
+ol.lowerroman { list-style-type: lower-roman }
+ol.upperroman { list-style-type: upper-roman }
+ol.arabic { list-style-type: decimal }
+
+.banner-link:link, .banner-link:visited {
+    text-decoration: none;
+    color: #b00;
+    border-bottom: 0px;
+}
+
+/* Link styles */
+:link, :visited {
+    text-decoration: none;
+    color: #b00;
+    border-bottom: 1px dotted #bbb;
+}
+h1 :link, h1 :visited ,h2 :link, h2 :visited, h3 :link, h3 :visited,
+h4 :link, h4 :visited, h5 :link, h5 :visited, h6 :link, h6 :visited {
+    color: inherit;
+}
+
+/* Heading anchors */
+.anchor:link, .anchor:visited {
+    border: none;
+    color: #d7d7d7;
+    font-size: .8em;
+    vertical-align: text-top;
+}
+* > .anchor:link, * > .anchor:visited {
+    visibility: hidden;
+}
+h1:hover .anchor, h2:hover .anchor, h3:hover .anchor,
+h4:hover .anchor, h5:hover .anchor, h6:hover .anchor,
+span:hover .anchor {
+    visibility: visible;
+}
+
+a.missing:link, a.missing:visited, a.missing, span.missing,
+a.forbidden, span.forbidden { color: #998 }
+a.missing:hover { color: #000 }
+a.closed:link, a.closed:visited, span.closed { text-decoration: line-through }
+
+pre {
+    background: #f7f7f7;
+    border: 1px solid #d7d7d7;
+    margin: 1em 1.75em;
+    padding: .25em;
+    overflow: auto;
+}
+
+div.code {
+    background: #f7f7f7;
+    border: 1px solid #d7d7d7;
+    margin: 1em 1.75em;
+    padding: .25em;
+    overflow: auto
+}
+
+div.code pre { margin: 0; }
+
+dt {
+    font-weight: bold;
+}
 dd {
-    padding: 0 0 0.5em 0;
+    padding: 0 0 0.8em 0;
 }
 dd:last-child {
     padding: 0 0 0 0;
 }
+
+/** Logo **/
+.site-logo {
+    font-size: 3rem;
+    line-height: 3rem;
+    font-weight: 200;
+    display: inline-block;
+    background: url('../../wp-content/themes/webkit/images/webkit.svg') no-repeat;
+    padding-left: 7rem;
+    color: #333;
+}
+
+.site-logo .tagline {
+    display: block;
+    font-size: 1.2rem;
+    line-height: 2rem;
+    letter-spacing: -0.05rem;
+    color: #666;
+}
+
+#contents {
+    font-size: 90%;
+    padding: 2em 2em 2em 2em
+}
+
+p {
+    margin: 0 0 0.8em 0;
+}
+
+p:last-child {
+    margin: 0 0 0 0;
+}