diff --git a/chrome/content/browser.js b/chrome/content/browser.js
--- a/chrome/content/browser.js
+++ b/chrome/content/browser.js
@@ -1219,63 +1219,88 @@ var Browser = {
*/
getScrollboxPosition: function getScrollboxPosition(scroller) {
let x = {};
let y = {};
scroller.getPosition(x, y);
return [x.value, y.value];
},
+ /**
+ * Convenience function for getting the scrollbox content size off of a
+ * scrollBoxObject interface. Returns the actual values instead of the
+ * wrapping objects.
+ *
+ * @param scroller a scrollBoxObject on which to call scroller.getScrolledSize()
+ */
+ getScrollboxSize: function getScrollboxSize(scroller) {
+ let width = {};
+ let height = {};
+ scroller.getScrolledSize(width, height);
+ return [width.value, height.value];
+ },
+
forceChromeReflow: function forceChromeReflow() {
let dummy = getComputedStyle(document.documentElement, "").width;
}
};
Browser.MainDragger = function MainDragger(browserView) {
this.allowRealtimeDownUp = true;
this.scrollingOuterX = false;
this.bv = browserView;
this.floatedWhileDragging = false;
this.draggedFrame = null;
+
+ this.vmarker = document.getElementById("vscroll-marker");
+ this.hmarker = document.getElementById("hscroll-marker");
+ this.contentW = 0;
+ this.contentH = 0;
};
Browser.MainDragger.prototype = {
-
dragStart: function dragStart(clientX, clientY, target, scroller) {
this.draggedFrame = null;
if (this._targetIsContent(target)) {
// since we're dealing with content, look to see if user has started
// a drag while over a IFRAME/FRAME element
let [x, y] = Browser.transformClientToBrowser(clientX, clientY);
let element = Browser.elementFromPoint(x, y);
if (element && element.ownerDocument != Browser.selectedBrowser.contentDocument) {
Util.dumpLn("*** dragStart got element ", element, " ownerDoc ", element.ownerDocument,
" selectedBrowser.contentDoc ", Browser.selectedBrowser.contentDocument);
this.draggedFrame = element.ownerDocument.defaultView;
}
}
+ let [w, h] = Browser.getScrollboxSize(scroller);
+ this.contentW = w;
+ this.contentH = h;
+ this._showMarkers(true);
+
this.bv.pauseRendering();
},
dragStop: function dragStop(dx, dy, scroller) {
let dx = this.dragMove(dx, dy, scroller, true);
dx += this.dragMove(Browser.snapSidebars(), 0, scroller, true);
/* XXX
* Set scrollingOuterX to be true when the sidebars are open.
* We should really just take a look at our geometry at this point
* and determine this ourselves rather than relying on our helper
* functions to give us this information
*/
this.scrollingOuterX = !Browser.tryUnfloatToolbar();
+
+ this._showMarkers(false);
this.bv.resumeRendering();
return (dx != 0) || (dy != 0);
},
dragMove: function dragMove(dx, dy, scroller, doReturnDX) {
let outrv = 0;
@@ -1324,16 +1349,18 @@ Browser.MainDragger.prototype = {
scroller.scrollBy(dx, dy);
let [x1, y1] = Browser.getScrollboxPosition(scroller);
let realdx = x1 - x0;
let realdy = y1 - y0;
this.bv.onAfterVisibleMove();
+ this._updateMarkers(x1, y1);
+
//dump(" dx, realdx: " + dx + " " + realdx + "\n");
if (realdx != dx) {
let restdx = dx - realdx;
this.scrollingOuterX = true;
this.dragMove(restdx, 0, scroller, doReturnDX);
}
@@ -1403,18 +1430,52 @@ Browser.MainDragger.prototype = {
if (target === window)
return false;
if (target === tileBox)
return true;
target = target.parentNode;
}
return false;
+ },
+
+ _updateMarkers : function _updateMarkers(scrollX, scrollY) {
+ let viewW = window.innerWidth;
+ let viewH = window.innerHeight;
+
+ // Position the markers
+ this.vmarker.top = (scrollY * viewH) / this.contentH;
+ this.hmarker.left = (scrollX * viewW) / this.contentW;
+ },
+
+ _showMarkers : function(aShow) {
+ const SCROLLMARKER_SIZE = 10;
+
+ this.vmarker.hidden = !aShow;
+ this.hmarker.hidden = !aShow;
+
+ if (aShow) {
+ let viewW = window.innerWidth;
+ let viewH = window.innerHeight;
+
+ // Get the marker sizes or collapse to zero if markers aren't needed
+ let markerH = (viewH < this.contentH ? (viewH * viewH) / this.contentH : 0);
+ let markerW = (viewW < this.contentW ? (viewW * viewW) / this.contentW : 0);
+
+ this.vmarker.style.height = markerH + "px";
+ this.hmarker.style.width = markerW + "px";
+
+ this.vmarker.left = window.innerWidth - SCROLLMARKER_SIZE;
+ this.hmarker.top = window.innerHeight - SCROLLMARKER_SIZE;
+ } else {
+ // Colapse markers
+ this.vmarker.style.height = "0px";
+ this.hmarker.style.width = "0px";
+ }
}
-
};
function nsBrowserAccess()
{
}
nsBrowserAccess.prototype = {
QueryInterface: function(aIID) {
diff --git a/chrome/content/browser.xul b/chrome/content/browser.xul
--- a/chrome/content/browser.xul
+++ b/chrome/content/browser.xul
@@ -460,16 +460,19 @@
+
+
+
diff --git a/themes/hildon/browser.css b/themes/hildon/browser.css
--- a/themes/hildon/browser.css
+++ b/themes/hildon/browser.css
@@ -841,8 +841,15 @@ richpref {
#select-list > option > image {
min-width: 30px;
}
#select-list > option[selected="true"] > image {
list-style-image: url("chrome://browser/skin/images/check-30.png");
}
+
+/* Scroll Markers */
+#vscroll-marker, #hscroll-marker {
+ background-color: rgb(64, 64, 64);
+ border: 1px solid rgb(255, 255, 255);
+ /*-moz-border-radius: 4px;*/
+}