Add panzoom feature to Type Inheritance graphs

10 files changed, 193 insertions, 155 deletions

diff --git a/src/scaladoc/scala/tools/nsc/doc/html/HtmlFactory.scala b/src/scaladoc/scala/tools/nsc/doc/html/HtmlFactory.scala
index 9086ee29c6..6076b1708c 100644
--- a/src/scaladoc/scala/tools/nsc/doc/html/HtmlFactory.scala
+++ b/src/scaladoc/scala/tools/nsc/doc/html/HtmlFactory.scala
@@ -46,9 +46,14 @@ class HtmlFactory(val universe: doc.Universe, index: doc.Index) {
     "source-code-pro-v6-latin-regular.eot",
     "source-code-pro-v6-latin-regular.ttf",
     "source-code-pro-v6-latin-regular.woff",
+    "MaterialIcons-Regular.eot",
+    "MaterialIcons-Regular.ttf",
+    "MaterialIcons-Regular.woff",
 
     "index.js",
     "jquery.js",
+    "jquery.mousewheel.min.js",
+    "jquery.panzoom.min.js",
     "scheduler.js",
     "diagrams.js",
     "template.js",
diff --git a/src/scaladoc/scala/tools/nsc/doc/html/page/Template.scala b/src/scaladoc/scala/tools/nsc/doc/html/page/Template.scala
index 8fe1415d05..d33b31d8ba 100644
--- a/src/scaladoc/scala/tools/nsc/doc/html/page/Template.scala
+++ b/src/scaladoc/scala/tools/nsc/doc/html/page/Template.scala
@@ -40,6 +40,8 @@ class Template(universe: doc.Universe, generator: DiagramGenerator, tpl: DocTemp
       <link href={ relativeLinkTo{List("template.css", "lib")} } media="screen" type="text/css" rel="stylesheet"/>
       <link href={ relativeLinkTo{List("diagrams.css", "lib")} } media="screen" type="text/css" rel="stylesheet" id="diagrams-css" />
       <script type="text/javascript" src={ relativeLinkTo{List("jquery.js", "lib")} } id="jquery-js"></script>
+      <script type="text/javascript" src={ relativeLinkTo{List("jquery.panzoom.min.js", "lib")} }></script>
+      <script type="text/javascript" src={ relativeLinkTo{List("jquery.mousewheel.min.js", "lib")} }></script>
       <script type="text/javascript" src={ relativeLinkTo{List("template.js", "lib")} }></script>
       <script type="text/javascript" src={ relativeLinkTo{List("tools.tooltip.js", "lib")} }></script>
       { if (universe.settings.docDiagrams.value) {
@@ -682,9 +684,12 @@ class Template(universe: doc.Universe, generator: DiagramGenerator, tpl: DocTemp
             if (diagramSvg != NodeSeq.Empty) {
               <div class="toggleContainer block diagram-container" id={ id + "-container"}>
                 <span class="toggle diagram-link">{ description }</span>
-                <div class="diagram" id={ id }>{
-                  diagramSvg
-                }</div>
+                <div class="diagram" id={ id }>{ diagramSvg }</div>
+                <div id="diagram-controls" class="hiddenContent">
+                  <button id="diagram-zoom-out" class="diagram-btn"><i class="material-icons">&#xE15B;</i></button>
+                  <button id="diagram-zoom-in" class="diagram-btn"><i class="material-icons">&#xE145;</i></button>
+                  <button title="Toggle full-screen" id="diagram-fs" class="diagram-btn to-full"><i class="material-icons">&#xE5D0;</i></button>
+                </div>
               </div>
             } else NodeSeq.Empty
           } else NodeSeq.Empty
diff --git a/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/MaterialIcons-Regular.eot b/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/MaterialIcons-Regular.eot
new file mode 100644
index 0000000000..bf67d48bdb
--- /dev/null
+++ b/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/MaterialIcons-Regular.eot
diff --git a/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/MaterialIcons-Regular.ttf b/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/MaterialIcons-Regular.ttf
new file mode 100644
index 0000000000..683dcd05ac
--- /dev/null
+++ b/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/MaterialIcons-Regular.ttf
diff --git a/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/MaterialIcons-Regular.woff b/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/MaterialIcons-Regular.woff
new file mode 100644
index 0000000000..ddd6be3e3d
--- /dev/null
+++ b/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/MaterialIcons-Regular.woff
diff --git a/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/diagrams.css b/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/diagrams.css
index 22736a04dd..8c20810784 100644
--- a/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/diagrams.css
+++ b/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/diagrams.css
@@ -1,3 +1,34 @@
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(MaterialIcons-Regular.eot);
+  src: local('Material Icons'),
+  local('MaterialIcons-Regular'),
+  url(MaterialIcons-Regular.woff) format('woff'),
+  url(MaterialIcons-Regular.ttf) format('truetype');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: 'liga';
+}
+
 .diagram-container {
   display: none;
 }
@@ -38,6 +69,61 @@
   text-decoration: none;
 }
 
+#inheritance-diagram-container > span.toggle {
+  z-index: 2;
+}
+
+#inheritance-diagram-container.full-screen {
+  position: fixed !important;
+  margin: 0;
+  border-radius: 0;
+  top: 0em;
+  bottom: 3em;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10000;
+}
+
+#inheritance-diagram-container.full-screen > span.toggle {
+  display: none;
+}
+
+#inheritance-diagram-container.full-screen > div.diagram {
+  position: absolute;
+  top: 0; right: 0; bottom: 0; left: 0;
+  margin: auto;
+}
+
+#diagram-controls {
+  z-index: 2;
+  position: absolute;
+  bottom: 1em;
+  right: 1em;
+}
+
+#diagram-controls > button.diagram-btn {
+  border-radius: 1.25em;
+  height: 2.5em;
+  width: 2.5em;
+  background-color: #c2c2c2;
+  color: #fff;
+  border: 0;
+  float: left;
+  margin: 0 0.1em;
+  cursor: pointer;
+  line-height: 0.9;
+  outline: none;
+}
+
+#diagram-controls > button.diagram-btn:hover {
+  background-color: #e2e2e2;
+}
+
+#diagram-controls > button.diagram-btn > i.material-icons {
+  font-size: 1.5em;
+}
+
 svg a {
   cursor:pointer;
 }
diff --git a/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/diagrams.js b/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/diagrams.js
index 801680b687..5d139c1080 100644
--- a/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/diagrams.js
+++ b/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/diagrams.js
@@ -15,10 +15,6 @@ $(document).ready(function()
 	if(Modernizr && !Modernizr.inlinesvg)
 		return;
 
-	// only execute this in the main window
-	if(diagrams.isPopup)
-		return;
-
 	if($("#content-diagram").length)
 		$("#inheritance-diagram").css("padding-bottom", "20px");
 
@@ -62,41 +58,16 @@ $(document).ready(function()
 	});
 
 	diagrams.initHighlighting();
-});
-
-/**
- * Initializes the diagrams in the popup.
- */
-diagrams.initPopup = function(id)
-{
-	// copy diagram from main window
-	if(!jQuery.browser.msie)
-		$("body").append(opener.$("#" + id).data("svg"));
 
-	// positioning
-	$("svg").css("position", "absolute");
-	$(window).resize(function()
-	{
-		var svg_w = $("svg").css("width").replace("px", "");
-		var svg_h = $("svg").css("height").replace("px", "");
-		var x = $(window).width() / 2 - svg_w / 2;
-		if(x < 0) x = 0;
-		var y = $(window).height() / 2 - svg_h / 2;
-		if(y < 0) y = 0;
-		$("svg").css("left", x + "px");
-		$("svg").css("top", y + "px");
-	});
-	$(window).resize();
+    $("button#diagram-fs").click(function() {
+        $("#inheritance-diagram-container").toggleClass("full-screen");
+        $("#inheritance-diagram-container > div.diagram").css({
+            height: $("svg").height() + "pt"
+        });
 
-	diagrams.initHighlighting();
-	$("svg a").click(function(e) {
-		opener.diagrams.redirectFromPopup(this.href.baseVal);
-		window.close();
-	});
-	$(document).keyup(function(e) {
-		if (e.keyCode == 27) window.close();
-	});
-}
+        $panzoom.panzoom("reset", { animate: false, contain: false });
+    });
+});
 
 /**
  * Initializes highlighting for nodes and edges.
@@ -182,39 +153,29 @@ diagrams.initHighlighting = function()
 /**
  * Resizes the diagrams according to the available width.
  */
-diagrams.resize = function()
-{
-	// available width
-	var availableWidth = $("body").width() - 100;
-
-	$(".diagram-container").each(function() {
-		// unregister click event on whole div
-		$(".diagram", this).unbind("click");
-		var diagramWidth = $(".diagram", this).data("width");
-		var diagramHeight = $(".diagram", this).data("height");
-
-		if(diagramWidth > availableWidth)
-		{
-			// resize diagram
-			var height = diagramHeight / diagramWidth * availableWidth;
-			$(".diagram svg", this).width(availableWidth);
-			$(".diagram svg", this).height(height);
-
-			// register click event on whole div
-			$(".diagram", this).click(function() {
-				diagrams.popup($(this));
-			});
-			$(".diagram", this).addClass("magnifying");
-		}
-		else
-		{
-			// restore full size of diagram
-			$(".diagram svg", this).width(diagramWidth);
-			$(".diagram svg", this).height(diagramHeight);
-			// don't show custom cursor any more
-			$(".diagram", this).removeClass("magnifying");
-		}
-	});
+diagrams.resize = function() {
+    // available width
+    var availableWidth = $("body").width() - 100;
+
+    $(".diagram-container").each(function() {
+        // unregister click event on whole div
+        $(".diagram", this).unbind("click");
+        var diagramWidth = $(".diagram", this).data("width");
+        var diagramHeight = $(".diagram", this).data("height");
+
+        if(diagramWidth > availableWidth) {
+            // resize diagram
+            var height = diagramHeight / diagramWidth * availableWidth;
+            $(".diagram svg", this).width(availableWidth);
+            $(".diagram svg", this).height(height);
+        } else {
+            // restore full size of diagram
+            $(".diagram svg", this).width(diagramWidth);
+            $(".diagram svg", this).height(diagramHeight);
+            // don't show custom cursor any more
+            $(".diagram", this).removeClass("magnifying");
+        }
+    });
 };
 
 /**
@@ -222,82 +183,38 @@ diagrams.resize = function()
  */
 diagrams.toggle = function(container, dontAnimate)
 {
-	// change class of link
-	$(".diagram-link", container).toggleClass("open");
-	// get element to show / hide
-	var div = $(".diagram", container);
-	if (div.is(':visible'))
-	{
-		$(".diagram-help", container).hide();
-		div.unbind("click");
-		div.removeClass("magnifying");
-		div.slideUp(100);
-	}
-	else
-	{
-		diagrams.resize();
-		if(dontAnimate)
-			div.show();
-		else
-			div.slideDown(100);
-		$(".diagram-help", container).show();
-	}
-};
-
-/**
- * Opens a popup containing a copy of a diagram.
- */
-diagrams.windows = {};
-diagrams.popup = function(diagram)
-{
-	var id = diagram.attr("id");
-	if(!diagrams.windows[id] || diagrams.windows[id].closed) {
-		var title = $(".symbol .name", $("#signature")).text();
-		// cloning from parent window to popup somehow doesn't work in IE
-		// therefore include the SVG as a string into the HTML
-		var svgIE = jQuery.browser.msie ? $("<div />").append(diagram.data("svg")).html() : "";
-		var html = '' +
-		'<?xml version="1.0" encoding="UTF-8"?>\n' +
-		'<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">\n' +
-		'<html>\n' +
-		'	<head>\n' +
-		'		<title>' + title + '</title>\n' +
-		'		<link href="' + $("#diagrams-css").attr("href") + '" media="screen" type="text/css" rel="stylesheet" />\n' +
-		'		<script type="text/javascript" src="' + $("#jquery-js").attr("src") + '"></script>\n' +
-		'		<script type="text/javascript" src="' + $("#diagrams-js").attr("src") + '"></script>\n' +
-		'		<script type="text/javascript">\n' +
-		'			diagrams.isPopup = true;\n' +
-		'		</script>\n' +
-		'	</head>\n' +
-		'	<body onload="diagrams.initPopup(\'' + id + '\');">\n' +
-		'		<a href="#" onclick="window.close();" id="close-link">Close this window</a>\n' +
-		'		' + svgIE + '\n' +
-		'	</body>\n' +
-		'</html>';
-
-		var padding = 30;
-		var screenHeight = screen.availHeight;
-		var screenWidth = screen.availWidth;
-		var w = Math.min(screenWidth, diagram.data("width") + 2 * padding);
-		var h = Math.min(screenHeight, diagram.data("height") + 2 * padding);
-		var left = (screenWidth - w) / 2;
-		var top = (screenHeight - h) / 2;
-		var parameters = "height=" + h + ", width=" + w + ", left=" + left + ", top=" + top + ", scrollbars=yes, location=no, resizable=yes";
-		var win = window.open("about:blank", "_blank", parameters);
-		win.document.open();
-		win.document.write(html);
-		win.document.close();
-		diagrams.windows[id] = win;
-	}
-	win.focus();
-};
-
-/**
- * This method is called from within the popup when a node is clicked.
- */
-diagrams.redirectFromPopup = function(url)
-{
-	window.location = url;
+    // change class of link
+    $(".diagram-link", container).toggleClass("open");
+    // get element to show / hide
+    var div = $(".diagram", container);
+    if (div.is(':visible')) {
+        $(".diagram-help", container).hide();
+        div.unbind("click");
+        div.slideUp(100);
+
+        $("#diagram-controls", container).hide();
+        $("#inheritance-diagram-container").unbind('mousewheel.focal');
+    } else {
+        diagrams.resize();
+        if(dontAnimate)
+            div.show();
+        else
+            div.slideDown(100);
+        $(".diagram-help", container).show();
+
+        $("#diagram-controls", container).show();
+
+        $("#inheritance-diagram-container").on('mousewheel.focal', function(e) {
+            e.preventDefault();
+            var delta = e.delta || e.originalEvent.wheelDelta;
+            var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
+            $panzoom.panzoom('zoom', zoomOut, {
+                increment: 0.1,
+                animate: true,
+                focal: e
+            });
+        });
+    }
 };
 
 /**
diff --git a/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/jquery.mousewheel.min.js b/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/jquery.mousewheel.min.js
new file mode 100644
index 0000000000..03bfd60c5e
--- /dev/null
+++ b/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/jquery.mousewheel.min.js
@@ -0,0 +1,8 @@
+/*!
+ * jQuery Mousewheel 3.1.13
+ *
+ * Copyright 2015 jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ */
+!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}(function(a){function b(b){var g=b||window.event,h=i.call(arguments,1),j=0,l=0,m=0,n=0,o=0,p=0;if(b=a.event.fix(g),b.type="mousewheel","detail"in g&&(m=-1*g.detail),"wheelDelta"in g&&(m=g.wheelDelta),"wheelDeltaY"in g&&(m=g.wheelDeltaY),"wheelDeltaX"in g&&(l=-1*g.wheelDeltaX),"axis"in g&&g.axis===g.HORIZONTAL_AXIS&&(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&&(m=-1*g.deltaY,j=m),"deltaX"in g&&(l=g.deltaX,0===m&&(j=-1*l)),0!==m||0!==l){if(1===g.deltaMode){var q=a.data(this,"mousewheel-line-height");j*=q,m*=q,l*=q}else if(2===g.deltaMode){var r=a.data(this,"mousewheel-page-height");j*=r,m*=r,l*=r}if(n=Math.max(Math.abs(m),Math.abs(l)),(!f||f>n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&this.getBoundingClientRect){var s=this.getBoundingClientRect();o=b.clientX-s.left,p=b.clientY-s.top}return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&&clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}}function c(){f=null}function d(a,b){return k.settings.adjustOldDeltas&&"mousewheel"===a.type&&b%120===0}var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;if(a.event.fixHooks)for(var j=g.length;j;)a.event.fixHooks[g[--j]]=a.event.mouseHooks;var k=a.event.special.mousewheel={version:"3.1.12",setup:function(){if(this.addEventListener)for(var c=h.length;c;)this.addEventListener(h[--c],b,!1);else this.onmousewheel=b;a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))},teardown:function(){if(this.removeEventListener)for(var c=h.length;c;)this.removeEventListener(h[--c],b,!1);else this.onmousewheel=null;a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")},getLineHeight:function(b){var c=a(b),d=c["offsetParent"in a.fn?"offsetParent":"parent"]();return d.length||(d=a("body")),parseInt(d.css("fontSize"),10)||parseInt(c.css("fontSize"),10)||16},getPageHeight:function(b){return a(b).height()},settings:{adjustOldDeltas:!0,normalizeOffset:!0}};a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})});
\ No newline at end of file
diff --git a/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/jquery.panzoom.min.js b/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/jquery.panzoom.min.js
new file mode 100644
index 0000000000..7c3be68b7e
--- /dev/null
+++ b/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/jquery.panzoom.min.js
@@ -0,0 +1,9 @@
+/**
+ * @license jquery.panzoom.js v2.0.5
+ * Updated: Thu Jul 03 2014
+ * Add pan and zoom functionality to any element
+ * Copyright (c) 2014 timmy willison
+ * Released under the MIT license
+ * https://github.com/timmywil/jquery.panzoom/blob/master/MIT-License.txt
+ */
+!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],function(c){return b(a,c)}):"object"==typeof exports?b(a,require("jquery")):b(a,a.jQuery)}("undefined"!=typeof window?window:this,function(a,b){"use strict";function c(a,b){for(var c=a.length;--c;)if(+a[c]!==+b[c])return!1;return!0}function d(a){var c={range:!0,animate:!0};return"boolean"==typeof a?c.animate=a:b.extend(c,a),c}function e(a,c,d,e,f,g,h,i,j){this.elements="array"===b.type(a)?[+a[0],+a[2],+a[4],+a[1],+a[3],+a[5],0,0,1]:[a,c,d,e,f,g,h||0,i||0,j||1]}function f(a,b,c){this.elements=[a,b,c]}function g(a,c){if(!(this instanceof g))return new g(a,c);1!==a.nodeType&&b.error("Panzoom called on non-Element node"),b.contains(l,a)||b.error("Panzoom element must be attached to the document");var d=b.data(a,m);if(d)return d;this.options=c=b.extend({},g.defaults,c),this.elem=a;var e=this.$elem=b(a);this.$set=c.$set&&c.$set.length?c.$set:e,this.$doc=b(a.ownerDocument||l),this.$parent=e.parent(),this.isSVG=r.test(a.namespaceURI)&&"svg"!==a.nodeName.toLowerCase(),this.panning=!1,this._buildTransform(),this._transform=!this.isSVG&&b.cssProps.transform.replace(q,"-$1").toLowerCase(),this._buildTransition(),this.resetDimensions();var f=b(),h=this;b.each(["$zoomIn","$zoomOut","$zoomRange","$reset"],function(a,b){h[b]=c[b]||f}),this.enable(),b.data(a,m,this)}var h="over out down up move enter leave cancel".split(" "),i=b.extend({},b.event.mouseHooks),j={};if(a.PointerEvent)b.each(h,function(a,c){b.event.fixHooks[j[c]="pointer"+c]=i});else{var k=i.props;i.props=k.concat(["touches","changedTouches","targetTouches","altKey","ctrlKey","metaKey","shiftKey"]),i.filter=function(a,b){var c,d=k.length;if(!b.pageX&&b.touches&&(c=b.touches[0]))for(;d--;)a[k[d]]=c[k[d]];return a},b.each(h,function(a,c){if(2>a)j[c]="mouse"+c;else{var d="touch"+("down"===c?"start":"up"===c?"end":c);b.event.fixHooks[d]=i,j[c]=d+" mouse"+c}})}b.pointertouch=j;var l=a.document,m="__pz__",n=Array.prototype.slice,o=!!a.PointerEvent,p=function(){var a=l.createElement("input");return a.setAttribute("oninput","return"),"function"==typeof a.oninput}(),q=/([A-Z])/g,r=/^http:[\w\.\/]+svg$/,s=/^inline/,t="(\\-?[\\d\\.e]+)",u="\\,?\\s*",v=new RegExp("^matrix\\("+t+u+t+u+t+u+t+u+t+u+t+"\\)$");return e.prototype={x:function(a){var b=a instanceof f,c=this.elements,d=a.elements;return b&&3===d.length?new f(c[0]*d[0]+c[1]*d[1]+c[2]*d[2],c[3]*d[0]+c[4]*d[1]+c[5]*d[2],c[6]*d[0]+c[7]*d[1]+c[8]*d[2]):d.length===c.length?new e(c[0]*d[0]+c[1]*d[3]+c[2]*d[6],c[0]*d[1]+c[1]*d[4]+c[2]*d[7],c[0]*d[2]+c[1]*d[5]+c[2]*d[8],c[3]*d[0]+c[4]*d[3]+c[5]*d[6],c[3]*d[1]+c[4]*d[4]+c[5]*d[7],c[3]*d[2]+c[4]*d[5]+c[5]*d[8],c[6]*d[0]+c[7]*d[3]+c[8]*d[6],c[6]*d[1]+c[7]*d[4]+c[8]*d[7],c[6]*d[2]+c[7]*d[5]+c[8]*d[8]):!1},inverse:function(){var a=1/this.determinant(),b=this.elements;return new e(a*(b[8]*b[4]-b[7]*b[5]),a*-(b[8]*b[1]-b[7]*b[2]),a*(b[5]*b[1]-b[4]*b[2]),a*-(b[8]*b[3]-b[6]*b[5]),a*(b[8]*b[0]-b[6]*b[2]),a*-(b[5]*b[0]-b[3]*b[2]),a*(b[7]*b[3]-b[6]*b[4]),a*-(b[7]*b[0]-b[6]*b[1]),a*(b[4]*b[0]-b[3]*b[1]))},determinant:function(){var a=this.elements;return a[0]*(a[8]*a[4]-a[7]*a[5])-a[3]*(a[8]*a[1]-a[7]*a[2])+a[6]*(a[5]*a[1]-a[4]*a[2])}},f.prototype.e=e.prototype.e=function(a){return this.elements[a]},g.rmatrix=v,g.events=b.pointertouch,g.defaults={eventNamespace:".panzoom",transition:!0,cursor:"move",disablePan:!1,disableZoom:!1,increment:.3,minScale:.4,maxScale:5,rangeStep:.05,duration:200,easing:"ease-in-out",contain:!1},g.prototype={constructor:g,instance:function(){return this},enable:function(){this._initStyle(),this._bind(),this.disabled=!1},disable:function(){this.disabled=!0,this._resetStyle(),this._unbind()},isDisabled:function(){return this.disabled},destroy:function(){this.disable(),b.removeData(this.elem,m)},resetDimensions:function(){var a=this.$parent;this.container={width:a.innerWidth(),height:a.innerHeight()};var c,d=a.offset(),e=this.elem,f=this.$elem;this.isSVG?(c=e.getBoundingClientRect(),c={left:c.left-d.left,top:c.top-d.top,width:c.width,height:c.height,margin:{left:0,top:0}}):c={left:b.css(e,"left",!0)||0,top:b.css(e,"top",!0)||0,width:f.innerWidth(),height:f.innerHeight(),margin:{top:b.css(e,"marginTop",!0)||0,left:b.css(e,"marginLeft",!0)||0}},c.widthBorder=b.css(e,"borderLeftWidth",!0)+b.css(e,"borderRightWidth",!0)||0,c.heightBorder=b.css(e,"borderTopWidth",!0)+b.css(e,"borderBottomWidth",!0)||0,this.dimensions=c},reset:function(a){a=d(a);var b=this.setMatrix(this._origTransform,a);a.silent||this._trigger("reset",b)},resetZoom:function(a){a=d(a);var b=this.getMatrix(this._origTransform);a.dValue=b[3],this.zoom(b[0],a)},resetPan:function(a){var b=this.getMatrix(this._origTransform);this.pan(b[4],b[5],d(a))},setTransform:function(a){for(var c=this.isSVG?"attr":"style",d=this.$set,e=d.length;e--;)b[c](d[e],"transform",a)},getTransform:function(a){var c=this.$set,d=c[0];return a?this.setTransform(a):a=b[this.isSVG?"attr":"style"](d,"transform"),"none"===a||v.test(a)||this.setTransform(a=b.css(d,"transform")),a||"none"},getMatrix:function(a){var b=v.exec(a||this.getTransform());return b&&b.shift(),b||[1,0,0,1,0,0]},setMatrix:function(a,c){if(!this.disabled){c||(c={}),"string"==typeof a&&(a=this.getMatrix(a));var d,e,f,g,h,i,j,k,l,m,n=+a[0],o=this.$parent,p="undefined"!=typeof c.contain?c.contain:this.options.contain;return p&&(d=this._checkDims(),e=this.container,l=d.width+d.widthBorder,m=d.height+d.heightBorder,f=(l*Math.abs(n)-e.width)/2,g=(m*Math.abs(n)-e.height)/2,j=d.left+d.margin.left,k=d.top+d.margin.top,"invert"===p?(h=l>e.width?l-e.width:0,i=m>e.height?m-e.height:0,f+=(e.width-l)/2,g+=(e.height-m)/2,a[4]=Math.max(Math.min(a[4],f-j),-f-j-h),a[5]=Math.max(Math.min(a[5],g-k),-g-k-i+d.heightBorder)):(g+=d.heightBorder/2,h=e.width>l?e.width-l:0,i=e.height>m?e.height-m:0,"center"===o.css("textAlign")&&s.test(b.css(this.elem,"display"))?h=0:f=g=0,a[4]=Math.min(Math.max(a[4],f-j),-f-j+h),a[5]=Math.min(Math.max(a[5],g-k),-g-k+i))),"skip"!==c.animate&&this.transition(!c.animate),c.range&&this.$zoomRange.val(n),this.setTransform("matrix("+a.join(",")+")"),c.silent||this._trigger("change",a),a}},isPanning:function(){return this.panning},transition:function(a){if(this._transition)for(var c=a||!this.options.transition?"none":this._transition,d=this.$set,e=d.length;e--;)b.style(d[e],"transition")!==c&&b.style(d[e],"transition",c)},pan:function(a,b,c){if(!this.options.disablePan){c||(c={});var d=c.matrix;d||(d=this.getMatrix()),c.relative&&(a+=+d[4],b+=+d[5]),d[4]=a,d[5]=b,this.setMatrix(d,c),c.silent||this._trigger("pan",d[4],d[5])}},zoom:function(a,c){"object"==typeof a?(c=a,a=null):c||(c={});var d=b.extend({},this.options,c);if(!d.disableZoom){var g=!1,h=d.matrix||this.getMatrix();"number"!=typeof a&&(a=+h[0]+d.increment*(a?-1:1),g=!0),a>d.maxScale?a=d.maxScale:a<d.minScale&&(a=d.minScale);var i=d.focal;if(i&&!d.disablePan){var j=this._checkDims(),k=i.clientX,l=i.clientY;this.isSVG||(k-=(j.width+j.widthBorder)/2,l-=(j.height+j.heightBorder)/2);var m=new f(k,l,1),n=new e(h),o=this.parentOffset||this.$parent.offset(),p=new e(1,0,o.left-this.$doc.scrollLeft(),0,1,o.top-this.$doc.scrollTop()),q=n.inverse().x(p.inverse().x(m)),r=a/h[0];n=n.x(new e([r,0,0,r,0,0])),m=p.x(n.x(q)),h[4]=+h[4]+(k-m.e(0)),h[5]=+h[5]+(l-m.e(1))}h[0]=a,h[3]="number"==typeof d.dValue?d.dValue:a,this.setMatrix(h,{animate:"boolean"==typeof d.animate?d.animate:g,range:!d.noSetRange}),d.silent||this._trigger("zoom",h[0],d)}},option:function(a,c){var d;if(!a)return b.extend({},this.options);if("string"==typeof a){if(1===arguments.length)return void 0!==this.options[a]?this.options[a]:null;d={},d[a]=c}else d=a;this._setOptions(d)},_setOptions:function(a){b.each(a,b.proxy(function(a,c){switch(a){case"disablePan":this._resetStyle();case"$zoomIn":case"$zoomOut":case"$zoomRange":case"$reset":case"disableZoom":case"onStart":case"onChange":case"onZoom":case"onPan":case"onEnd":case"onReset":case"eventNamespace":this._unbind()}switch(this.options[a]=c,a){case"disablePan":this._initStyle();case"$zoomIn":case"$zoomOut":case"$zoomRange":case"$reset":this[a]=c;case"disableZoom":case"onStart":case"onChange":case"onZoom":case"onPan":case"onEnd":case"onReset":case"eventNamespace":this._bind();break;case"cursor":b.style(this.elem,"cursor",c);break;case"minScale":this.$zoomRange.attr("min",c);break;case"maxScale":this.$zoomRange.attr("max",c);break;case"rangeStep":this.$zoomRange.attr("step",c);break;case"startTransform":this._buildTransform();break;case"duration":case"easing":this._buildTransition();case"transition":this.transition();break;case"$set":c instanceof b&&c.length&&(this.$set=c,this._initStyle(),this._buildTransform())}},this))},_initStyle:function(){var a={"backface-visibility":"hidden","transform-origin":this.isSVG?"0 0":"50% 50%"};this.options.disablePan||(a.cursor=this.options.cursor),this.$set.css(a);var c=this.$parent;c.length&&!b.nodeName(c[0],"body")&&(a={overflow:"hidden"},"static"===c.css("position")&&(a.position="relative"),c.css(a))},_resetStyle:function(){this.$elem.css({cursor:"",transition:""}),this.$parent.css({overflow:"",position:""})},_bind:function(){var a=this,c=this.options,d=c.eventNamespace,e=o?"pointerdown"+d:"touchstart"+d+" mousedown"+d,f=o?"pointerup"+d:"touchend"+d+" click"+d,h={},i=this.$reset,j=this.$zoomRange;if(b.each(["Start","Change","Zoom","Pan","End","Reset"],function(){var a=c["on"+this];b.isFunction(a)&&(h["panzoom"+this.toLowerCase()+d]=a)}),c.disablePan&&c.disableZoom||(h[e]=function(b){var d;("touchstart"===b.type?!(d=b.touches)||(1!==d.length||c.disablePan)&&2!==d.length:c.disablePan||1!==b.which)||(b.preventDefault(),b.stopPropagation(),a._startMove(b,d))}),this.$elem.on(h),i.length&&i.on(f,function(b){b.preventDefault(),a.reset()}),j.length&&j.attr({step:c.rangeStep===g.defaults.rangeStep&&j.attr("step")||c.rangeStep,min:c.minScale,max:c.maxScale}).prop({value:this.getMatrix()[0]}),!c.disableZoom){var k=this.$zoomIn,l=this.$zoomOut;k.length&&l.length&&(k.on(f,function(b){b.preventDefault(),a.zoom()}),l.on(f,function(b){b.preventDefault(),a.zoom(!0)})),j.length&&(h={},h[(o?"pointerdown":"mousedown")+d]=function(){a.transition(!0)},h[(p?"input":"change")+d]=function(){a.zoom(+this.value,{noSetRange:!0})},j.on(h))}},_unbind:function(){this.$elem.add(this.$zoomIn).add(this.$zoomOut).add(this.$reset).off(this.options.eventNamespace)},_buildTransform:function(){return this._origTransform=this.getTransform(this.options.startTransform)},_buildTransition:function(){if(this._transform){var a=this.options;this._transition=this._transform+" "+a.duration+"ms "+a.easing}},_checkDims:function(){var a=this.dimensions;return a.width&&a.height||this.resetDimensions(),this.dimensions},_getDistance:function(a){var b=a[0],c=a[1];return Math.sqrt(Math.pow(Math.abs(c.clientX-b.clientX),2)+Math.pow(Math.abs(c.clientY-b.clientY),2))},_getMiddle:function(a){var b=a[0],c=a[1];return{clientX:(c.clientX-b.clientX)/2+b.clientX,clientY:(c.clientY-b.clientY)/2+b.clientY}},_trigger:function(a){"string"==typeof a&&(a="panzoom"+a),this.$elem.triggerHandler(a,[this].concat(n.call(arguments,1)))},_startMove:function(a,d){var e,f,g,h,i,j,k,m,n=this,p=this.options,q=p.eventNamespace,r=this.getMatrix(),s=r.slice(0),t=+s[4],u=+s[5],v={matrix:r,animate:"skip"};o?(f="pointermove",g="pointerup"):"touchstart"===a.type?(f="touchmove",g="touchend"):(f="mousemove",g="mouseup"),f+=q,g+=q,this.transition(!0),this.panning=!0,this._trigger("start",a,d),d&&2===d.length?(h=this._getDistance(d),i=+r[0],j=this._getMiddle(d),e=function(a){a.preventDefault();var b=n._getMiddle(d=a.touches),c=n._getDistance(d)-h;n.zoom(c*(p.increment/100)+i,{focal:b,matrix:r,animate:!1}),n.pan(+r[4]+b.clientX-j.clientX,+r[5]+b.clientY-j.clientY,v),j=b}):(k=a.pageX,m=a.pageY,e=function(a){a.preventDefault(),n.pan(t+a.pageX-k,u+a.pageY-m,v)}),b(l).off(q).on(f,e).on(g,function(a){a.preventDefault(),b(this).off(q),n.panning=!1,a.type="panzoomend",n._trigger(a,r,!c(r,s))})}},b.Panzoom=g,b.fn.panzoom=function(a){var c,d,e,f;return"string"==typeof a?(f=[],d=n.call(arguments,1),this.each(function(){c=b.data(this,m),c?"_"!==a.charAt(0)&&"function"==typeof(e=c[a])&&void 0!==(e=e.apply(c,d))&&f.push(e):f.push(void 0)}),f.length?1===f.length?f[0]:f:this):this.each(function(){new g(this,a)})},g});
\ No newline at end of file
diff --git a/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/template.js b/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/template.js
index 9d9d7bdfff..3baf0d9db7 100644
--- a/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/template.js
+++ b/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/template.js
@@ -1,7 +1,20 @@
 // © 2009–2010 EPFL/LAMP
 // code by Gilles Dubochet with contributions by Pedro Furlanetto, Marcin Kubala and Felix Mulder
 
+var $panzoom = undefined;
 $(document).ready(function() {
+    // Add zoom functionality to type inheritance diagram
+    $panzoom = $("#inheritance-diagram").panzoom({
+        increment: 0.1,
+        minScale: 1,
+        maxScale: 3,
+        transition: true,
+        duration: 200,
+        contain: 'invert',
+        easing: "ease-in-out",
+        $zoomIn: $('#diagram-zoom-in'),
+        $zoomOut: $('#diagram-zoom-out'),
+    });
 
     $("#template > div > div > ol > li > span > a").click(function(e) {
         $("#template > div > div > ol > li").removeClass("selected");
@@ -275,12 +288,7 @@ $(document).ready(function() {
     function toggleShowContentFct(e){
       e.toggleClass("open");
       var content = $(".hiddenContent", e.parent().get(0));
-      if (content.is(':visible')) {
-        content.slideUp(100);
-      }
-      else {
-        content.slideDown(100);
-      }
+      (content.is(':visible') ? content.slideUp : content.slideDown)(100);
     };
 
     $(".toggle:not(.diagram-link)").click(function() {