<!doctype html>
<meta charset=utf-8>
<meta name=viewport content='width=device-width'>
<link rel="icon" type="image/x-icon" href="/favicon.ico">

<title> patch.diff </title>

<link rel=stylesheet href=/lib/cm/cm.css>
<link rel=stylesheet href=/lib/css/ui.css>


<form id=toolbar name=export method=post target=_blank
  enctype=multipart/form-data>
  <a href='/'
     class="item crumb root-crumb"></a>
  <a href='/devtools/'
     class="item crumb ">devtools</a>
  <a href='/devtools/patch.diff/'
     class="item crumb ">patch.diff</a>
  <a class=item id=preview title=preview><img src=/lib/icons/eye_open.png></a>
  <a class=item id=validate title=validate><img src=/lib/icons/ok_2.png></a>
  <a class=item id=run title=run><img src=/lib/icons/play.png></a>
  <a class="item right" id=settings title=settings><img src=/lib/icons/settings.png></a>
  <select onchange=selectTheme(this) class="item right" id=theme
    title=theme>
   <option>default</option>
   <option>ambiance</option>
   <option>blackboard</option>
   <option>cobalt</option>
   <option>eclipse</option>
   <option>elegant</option>
   <option>erlang-dark</option>
   <option>lesser-dark</option>
   <option>monokai</option>
   <option>neat</option>
   <option>night</option>
   <option>rubyblue</option>
   <option>vibrant-ink</option>
   <option>xq-dark</option>
  </select>
  <a class="item right" id=download title=download download><img src=/lib/icons/download_alt.png></a>
  <a class="item right" id=dictate title=dictate><img src=/lib/icons/microphone.png></a>
  <a class="item right" id=sync-state title='sync state'><span></span><img src=/lib/img/offline.svg></a>
  <input type=hidden name=code>
  <input type=hidden name=file>
  <input type=hidden name=lang>
  <input type=hidden name=ucn_text>
  <input type=hidden name=ucn_text_mime>
  <input type=hidden name=ucn_task value=conformance>
  <input type=hidden name=run value=True>
</form>

<div id=wrapper class=panel></div>

<base target=_parent>

<script src=/lib/cm/cm.js></script>
<script src=/lib/js/canop/lib.js></script>
<script src=/lib/js/canop/cm.js></script>
<script src=/app/text/page.js></script>

<script>
  (function () {
    // UI elements
    var validate = document.querySelector('#validate');
    var preview = document.querySelector('#preview');
    var run = document.querySelector('#run');
    var download = document.querySelector('#download');
    var settings = document.querySelector('#settings');
    var wrapper = document.querySelector('#wrapper');
    var delay;

    // Update UI elements on content changes
    function onChange() {
      postMessage(cm.getValue(), '*');
    }

    function betterTab(cm) {
      if (cm.somethingSelected()) {
        cm.indentSelection('add');
      } else {
        cm.replaceSelection(cm.getOption("indentWithTabs")? "\t":
          Array(cm.getOption("indentUnit") + 1).join(" "), "end", "+input");
      }
    }
    function betterShiftTab(cm) { cm.indentSelection('subtract'); }

    var path = "/devtools/patch.diff";
    var permission = "w";
    var mime = "text/x-diff" || 'text/plain';
    var username = undefined;
    var codeMirrorParams = {
      mode: mime,
      value: "# HG changeset patch\n# Parent 254a734ccaf3e0c01079efed49936462b081f5e9\n# User Thaddee Tyl \u003cthaddee.tyl@gmail.com>\n\ndiff --git a/browser/devtools/highlighter/InsideOutBox.jsm b/browser/devtools/highlighter/InsideOutBox.jsm\n--- a/browser/devtools/highlighter/InsideOutBox.jsm\n+++ b/browser/devtools/highlighter/InsideOutBox.jsm\n@@ -128,6 +128,9 @@ InsideOutBoxView = {\n \n var EXPORTED_SYMBOLS = [\"InsideOutBox\"];\n \n+const Cu = Components.utils;\n+Cu.import(\"resource:///modules/devtools/LayoutHelpers.jsm\");\n+\n function InsideOutBox(aView, aBox)\n {\n   this.view = aView;\n@@ -212,7 +215,9 @@ InsideOutBox.prototype =\n     if (makeBoxVisible) {\n       this.openObjectBox(objectBox);\n       if (scrollIntoView) {\n-        objectBox.scrollIntoView(true);\n+        // We want to center the label of the element, not the whole tag\n+        // (which includes all of its children, and is vertically huge).\n+        LayoutHelpers.scrollIntoViewIfNeeded(objectBox.firstElementChild);\n       }\n     }\n     return objectBox;\ndiff --git a/browser/devtools/shared/LayoutHelpers.jsm b/browser/devtools/shared/LayoutHelpers.jsm\n--- a/browser/devtools/shared/LayoutHelpers.jsm\n+++ b/browser/devtools/shared/LayoutHelpers.jsm\n@@ -186,8 +186,7 @@ LayoutHelpers = {\n    * @param integer aY\n    * @returns Node|null the element node found at the given coordinates.\n    */\n-  getElementFromPoint: function LH_elementFromPoint(aDocument, aX, aY)\n-  {\n+  getElementFromPoint: function LH_elementFromPoint(aDocument, aX, aY) {\n     let node = aDocument.elementFromPoint(aX, aY);\n     if (node && node.contentDocument) {\n       if (node instanceof Ci.nsIDOMHTMLIFrameElement) {\n@@ -214,4 +213,82 @@ LayoutHelpers = {\n     }\n     return node;\n   },\n+\n+  /**\n+   * Scroll the document so that the element \"elem\" appears in the viewport.\n+   *\n+   * @param Element elem the element that needs to appear in the viewport.\n+   * @param bool centered true if you want it centered, false if you want it to\n+   * appear on the top of the viewport. It is true by default, and that is\n+   * usually what you want.\n+   */\n+  scrollIntoViewIfNeeded:\n+  function LH_scrollIntoViewIfNeeded(elem, centered) {\n+    // We want to default to centering the element in the page,\n+    // so as to keep the context of the element.\n+    centered = centered === undefined? true: !!centered;\n+\n+    let win = elem.ownerDocument.defaultView;\n+    let clientRect = elem.getBoundingClientRect();\n+\n+    // The following are always from the {top, bottom, left, right}\n+    // of the viewport, to the {top, …} of the box.\n+    // Think of them as geometrical vectors, it helps.\n+    // The origin is at the top left.\n+\n+    let topToBottom = clientRect.bottom;\n+    let bottomToTop = clientRect.top - win.innerHeight;\n+    let leftToRight = clientRect.right;\n+    let rightToLeft = clientRect.left - win.innerWidth;\n+    let xAllowed = true;  // We allow one translation on the x axis,\n+    let yAllowed = true;  // and one on the y axis.\n+\n+    // Whatever `centered` is, the behavior is the same if the box is\n+    // (even partially) visible.\n+\n+    if ((topToBottom > 0 || !centered) && topToBottom \u003c= elem.offsetHeight) {\n+      win.scrollBy(0, topToBottom - elem.offsetHeight);\n+      yAllowed = false;\n+    } else\n+    if ((bottomToTop \u003c 0 || !centered) && bottomToTop >= -elem.offsetHeight) {\n+      win.scrollBy(0, bottomToTop + elem.offsetHeight);\n+      yAllowed = false;\n+    }\n+\n+    if ((leftToRight > 0 || !centered) && leftToRight \u003c= elem.offsetWidth) {\n+      if (xAllowed) {\n+        win.scrollBy(leftToRight - elem.offsetWidth, 0);\n+        xAllowed = false;\n+      }\n+    } else\n+    if ((rightToLeft \u003c 0 || !centered) && rightToLeft >= -elem.offsetWidth) {\n+      if (xAllowed) {\n+        win.scrollBy(rightToLeft + elem.offsetWidth, 0);\n+        xAllowed = false;\n+      }\n+    }\n+\n+    // If we want it centered, and the box is completely hidden,\n+    // then we center it explicitly.\n+\n+    if (centered) {\n+\n+      if (yAllowed && (topToBottom \u003c= 0 || bottomToTop >= 0)) {\n+        win.scroll(win.scrollX,\n+                   win.scrollY + clientRect.top\n+                   - (win.innerHeight - elem.offsetHeight) / 2);\n+      }\n+\n+      if (xAllowed && (leftToRight \u003c= 0 || rightToLeft \u003c= 0)) {\n+        win.scroll(win.scrollX + clientRect.left\n+                   - (win.innerWidth - elem.offsetWidth) / 2,\n+                   win.scrollY);\n+      }\n+    }\n+\n+    if (win.parent !== win) {\n+      // We are inside an iframe.\n+      LH_scrollIntoViewIfNeeded(win.frameElement, centered);\n+    }\n+  },\n };\ndiff --git a/browser/devtools/shared/test/Makefile.in b/browser/devtools/shared/test/Makefile.in\n--- a/browser/devtools/shared/test/Makefile.in\n+++ b/browser/devtools/shared/test/Makefile.in\n@@ -19,12 +19,15 @@ _BROWSER_TEST_FILES = \\\n   browser_templater_basic.js \\\n   browser_toolbar_basic.js \\\n   browser_toolbar_tooltip.js \\\n+  browser_layoutHelpers.js \\\n   head.js \\\n   $(NULL)\n \n _BROWSER_TEST_PAGES = \\\n   browser_templater_basic.html \\\n   browser_toolbar_basic.html \\\n+  browser_layoutHelpers.html \\\n+  browser_layoutHelpers_iframe.html \\\n   $(NULL)\n \n libs:: $(_BROWSER_TEST_FILES)\ndiff --git a/browser/devtools/shared/test/browser_layoutHelpers.html b/browser/devtools/shared/test/browser_layoutHelpers.html\nnew file mode 100644\n--- /dev/null\n+++ b/browser/devtools/shared/test/browser_layoutHelpers.html\n@@ -0,0 +1,25 @@\n+\u003c!doctype html>\n+\u003cmeta charset=utf-8>\n+\u003ctitle> Layout Helpers \u003c/title>\n+\n+\u003cstyle>\n+  html {\n+    height: 300%;\n+    width: 300%;\n+  }\n+  div#some {\n+    position: absolute;\n+    background: black;\n+    width: 2px;\n+    height: 2px;\n+  }\n+  iframe {\n+    position: absolute;\n+    width: 40px;\n+    height: 40px;\n+    border: 0;\n+  }\n+\u003c/style>\n+\n+\u003cdiv id=some>\u003c/div>\n+\u003ciframe id=frame src='./browser_layoutHelpers_iframe.html'>\u003c/iframe>\ndiff --git a/browser/devtools/shared/test/browser_layoutHelpers.js b/browser/devtools/shared/test/browser_layoutHelpers.js\nnew file mode 100644\n--- /dev/null\n+++ b/browser/devtools/shared/test/browser_layoutHelpers.js\n@@ -0,0 +1,99 @@\n+/* Any copyright is dedicated to the Public Domain.\n+ * http://creativecommons.org/publicdomain/zero/1.0/ */\n+\n+// Tests that scrollIntoViewIfNeeded works properly.\n+\n+let imported = {};\n+Components.utils.import(\"resource:///modules/devtools/LayoutHelpers.jsm\",\n+    imported);\n+registerCleanupFunction(function () {\n+  imported = {};\n+});\n+\n+let LayoutHelpers = imported.LayoutHelpers;\n+\n+const TEST_URI = \"http://example.com/browser/browser/devtools/shared/test/browser_layoutHelpers.html\";\n+\n+function test() {\n+  addTab(TEST_URI, function(browser, tab) {\n+    info(\"Starting browser_layoutHelpers.js\");\n+    let doc = browser.contentDocument;\n+    runTest(doc.defaultView, doc.getElementById('some'));\n+    gBrowser.removeCurrentTab();\n+    finish();\n+  });\n+}\n+\n+function runTest(win, some) {\n+  some.style.top = win.innerHeight + 'px';\n+  some.style.left = win.innerWidth + 'px';\n+  // The tests start with a black 2x2 pixels square below bottom right.\n+  // Do not resize the window during the tests.\n+\n+  win.scroll(win.innerWidth / 2, win.innerHeight + 2);  // Above the viewport.\n+  LayoutHelpers.scrollIntoViewIfNeeded(some);\n+  is(win.scrollY, Math.floor(win.innerHeight / 2) + 1,\n+     'Element completely hidden above should appear centered.');\n+\n+  win.scroll(win.innerWidth / 2, win.innerHeight + 1);  // On the top edge.\n+  LayoutHelpers.scrollIntoViewIfNeeded(some);\n+  is(win.scrollY, win.innerHeight,\n+     'Element partially visible above should appear above.');\n+\n+  win.scroll(win.innerWidth / 2, 0);  // Just below the viewport.\n+  LayoutHelpers.scrollIntoViewIfNeeded(some);\n+  is(win.scrollY, Math.floor(win.innerHeight / 2) + 1,\n+     'Element completely hidden below should appear centered.');\n+\n+  win.scroll(win.innerWidth / 2, 1);  // On the bottom edge.\n+  LayoutHelpers.scrollIntoViewIfNeeded(some);\n+  is(win.scrollY, 2,\n+     'Element partially visible below should appear below.');\n+\n+\n+  win.scroll(win.innerWidth / 2, win.innerHeight + 2);  // Above the viewport.\n+  LayoutHelpers.scrollIntoViewIfNeeded(some, false);\n+  is(win.scrollY, win.innerHeight,\n+     'Element completely hidden above should appear above ' +\n+     'if parameter is false.');\n+\n+  win.scroll(win.innerWidth / 2, win.innerHeight + 1);  // On the top edge.\n+  LayoutHelpers.scrollIntoViewIfNeeded(some, false);\n+  is(win.scrollY, win.innerHeight,\n+     'Element partially visible above should appear above ' +\n+     'if parameter is false.');\n+\n+  win.scroll(win.innerWidth / 2, 0);  // Below the viewport.\n+  LayoutHelpers.scrollIntoViewIfNeeded(some, false);\n+  is(win.scrollY, 2,\n+     'Element completely hidden below should appear below ' +\n+     'if parameter is false.');\n+\n+  win.scroll(win.innerWidth / 2, 1);  // On the bottom edge.\n+  LayoutHelpers.scrollIntoViewIfNeeded(some, false);\n+  is(win.scrollY, 2,\n+     'Element partially visible below should appear below ' +\n+     'if parameter is false.');\n+\n+  // The case of iframes.\n+  win.scroll(0, 0);\n+\n+  let frame = win.document.getElementById('frame');\n+  let fwin = frame.contentWindow;\n+\n+  frame.style.top = win.innerHeight + 'px';\n+  frame.style.left = win.innerWidth + 'px';\n+\n+  fwin.addEventListener('load', function frameLoad() {\n+    let some = fwin.document.getElementById('some');\n+    LayoutHelpers.scrollIntoViewIfNeeded(some);\n+    is(win.scrollX, Math.floor(win.innerWidth / 2) + 20,\n+       'Scrolling from an iframe should center the iframe vertically.');\n+    is(win.scrollY, Math.floor(win.innerHeight / 2) + 20,\n+       'Scrolling from an iframe should center the iframe horizontally.');\n+    is(fwin.scrollX, Math.floor(fwin.innerWidth / 2) + 1,\n+       'Scrolling from an iframe should center the element vertically.');\n+    is(fwin.scrollY, Math.floor(fwin.innerHeight / 2) + 1,\n+       'Scrolling from an iframe should center the element horizontally.');\n+  }, false);\n+}\ndiff --git a/browser/devtools/shared/test/browser_layoutHelpers_iframe.html b/browser/devtools/shared/test/browser_layoutHelpers_iframe.html\nnew file mode 100644\n--- /dev/null\n+++ b/browser/devtools/shared/test/browser_layoutHelpers_iframe.html\n@@ -0,0 +1,19 @@\n+\u003c!doctype html>\n+\u003cmeta charset=utf-8>\n+\u003ctitle> Layout Helpers \u003c/title>\n+\n+\u003cstyle>\n+  html {\n+    height: 300%;\n+    width: 300%;\n+  }\n+  div#some {\n+    position: absolute;\n+    background: black;\n+    width: 2px;\n+    height: 2px;\n+  }\n+\u003c/style>\n+\n+\u003cdiv id=some>\u003c/div>\n+\n",
      autofocus: true,
      lineNumbers: true,
      lineWrapping: true,
      matchBrackets: true,
      autoCloseBrackets: '()[]{}""',
      continueComments: true,
      extraKeys: {
        Tab: betterTab,
        'Shift-Tab': betterShiftTab
      },
      readOnly: 'nocursor'  // It'll be writable when the connection is set up.
    };
    var extraCodeMirrorParams = undefined || {};
    Object.keys(extraCodeMirrorParams).forEach(function(key) {
      codeMirrorParams[key] = extraCodeMirrorParams[key];
    });

    // CodeMirror editor
    var cm = window.cm = CodeMirror(wrapper, codeMirrorParams);
    // Hack to make wrapped text indented.
    var charWidth = cm.defaultCharWidth();
    cm.on('renderLine', function(cm, line, elt) {
      var off = CodeMirror.countColumn(line.text, null, cm.getOption('tabSize'))
        * charWidth;
      var basePadding = 4;
      elt.style.textIndent = '-' + off + 'px';
      elt.style.paddingLeft = (basePadding + off) + 'px';
    });
    cm.refresh();
    cm.on('change', onChange);
    onChange();     // Send the initial value.

    // Operational Transformation
    var canopClient = new canop.Client();
    canop.wire.websocket(canopClient, {
      url: "ws" + window.location.protocol.slice(4) + "//" +
        window.location.host + window.location.pathname + "?op=edit&app=text",
    });
    canop.ui.codemirror(canopClient, cm);
    canopClient.once('ready', function() {
      if (/^[wx]$/.test(permission)) {
        cm.setOption('readOnly', false);
        canopClient.signal({name: username});
      }
    });
    var syncState = document.getElementById('sync-state');
    var syncImg = document.querySelector('#sync-state > img');
    var setSyncText = function() {
      if (canopClient.clientCount > 1) {
        syncState.title = canopClient.clientCount + ' users';
      } else if (canopClient.clientState === 0) {
        syncState.title = 'offline';
      } else if (canopClient.clientState === 1) {
        syncState.title = 'syncing';
      } else if (canopClient.clientState === 2) {
        syncState.title = 'synced';
      }
    };
    canopClient.on('synced', function() {
      syncImg.src = '/lib/img/synced.svg';
      setSyncText();
    });
    canopClient.on('syncing', function() {
      syncImg.src = '/lib/img/syncing.svg';
      setSyncText();
    });
    canopClient.on('unsyncable', function(e) {
      syncImg.src = '/lib/img/offline.svg';
      setSyncText();
      if (e && e.name === 'UnknownBaseError') {
        alert("We cannot merge your changes with the server. Please reload.");
      }
    });
    canopClient.on('signal', function() { setSyncText(); });

    // General button actions
    validate.target = run.target = download.target = settings.target = '_blank';
    download.href = path + '?app=data';
    settings.href = path + '?app=meta';

    // Mime type specific environments
    if (environment[mime]) environment[mime](path);

  })();

</script>

<!-- Google Analytics -->
<script>var _gaq=_gaq||[];_gaq.push(['_setAccount','UA-27876347-1']);_gaq.push(['_trackPageview']);(function(){var ga=document.createElement('script');ga.type='text/javascript';ga.async=true;ga.src=('https:'==document.location.protocol?'https://ssl':'http://www')+'.google-analytics.com/ga.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ga,s);})()</script>
