diff --git a/chrome/content/browser.js b/chrome/content/browser.js
--- a/chrome/content/browser.js
+++ b/chrome/content/browser.js
@@ -1359,31 +1359,96 @@ Browser.MainDragger.prototype = {
} catch(e) {}
if (scrollable) {
this.contentScrollbox = wrapper.scrollBoxObject || wrapper.boxObject.QueryInterface(Ci.nsIScrollBoxObject);
return;
}
}
}
+ this.showScrollBars();
if (element)
this.draggedFrame = element.ownerDocument.defaultView;
this.bv.pauseRendering();
},
dragStop: function dragStop(dx, dy, scroller) {
this.draggedFrame = null;
this.dragMove(Browser.snapSidebars(), 0, scroller);
Browser.tryUnfloatToolbar();
+ this.hideScrollBars();
+
this.bv.resumeRendering();
},
+ drawScrollBars: function drawScrollBars() {
+ const SCROLLBAR_WIDTH = 10;
+
+ let [vpWidth, vpHeight] = Browser._browserView.getViewportDimensions();
+ let visibleRect = Browser._browserView.getVisibleRect();
+ let scrollpoint = Browser.getScrollboxPosition(Browser.contentScrollboxScroller);
+
+ // vertical scrollbar
+ if (vpHeight > visibleRect.height) {
+ let yscroll = document.getElementById("scrollbar-y");
+ let y = (scrollpoint.y + scrollpoint.y * visibleRect.height / vpHeight) + "px";
+ let x = (scrollpoint.x + visibleRect.width - SCROLLBAR_WIDTH) + "px";
+
+ let height = (visibleRect.height * visibleRect.height / vpHeight);
+ let width = SCROLLBAR_WIDTH;
+ yscroll.style.left = x;
+ yscroll.style.top = y;
+ yscroll.width = width;
+ yscroll.height = height;
+ let ctx = yscroll.getContext("2d");
+ ctx.save();
+ ctx.fillStyle = "rgba(0, 145, 255, .5)";
+ ctx.strokeStyle = "rgb(0, 145, 255)";
+ ctx.strokeRect(0, 0, width, height);
+ ctx.fillRect(0, 0, width, height);
+ ctx.restore();
+ yscroll.style.display = "block";
+ }
+
+ // horizontal scrollbar
+ if (vpWidth > visibleRect.width) {
+ let xscroll = document.getElementById("scrollbar-x");
+ x = (scrollpoint.x + scrollpoint.x * visibleRect.width / vpWidth) + "px";
+ y = (scrollpoint.y + visibleRect.height - SCROLLBAR_WIDTH) + "px";
+
+ let width = (visibleRect.width * visibleRect.width / vpWidth);
+ let height = SCROLLBAR_WIDTH;
+ xscroll.style.left = x;
+ xscroll.style.top = y;
+ xscroll.width = width;
+ xscroll.height = height;
+ let ctx = xscroll.getContext("2d");
+ ctx.save();
+ ctx.fillStyle = "rgba(0, 145, 255, .5)";
+ ctx.strokeStyle = "rgb(0, 145, 255)";
+ ctx.strokeRect(0, 0, width, height);
+ ctx.fillRect(0, 0, width, height);
+ ctx.restore();
+ xscroll.style.display = "block";
+ }
+ },
+
+ showScrollBars: function showScrollBars() {
+ document.getElementById("scrollbar-y").style.display = "block";
+ document.getElementById("scrollbar-x").style.display = "block";
+ },
+
+ hideScrollBars: function hideScrollBars() {
+ document.getElementById("scrollbar-y").style.display = "none";
+ document.getElementById("scrollbar-x").style.display = "none";
+ },
+
dragMove: function dragMove(dx, dy, scroller) {
let elem = this.draggedFrame;
let doffset = new Point(dx, dy);
let render = false;
this.bv.onBeforeVisibleMove(dx, dy);
// First calculate any panning to take sidebars out of view
@@ -1407,16 +1472,18 @@ Browser.MainDragger.prototype = {
// Any leftover panning in doffset would bring controls into view. Add to sidebar
// away panning for the total scroll offset.
doffset.add(panOffset);
Browser.tryFloatToolbar(doffset.x, 0);
this._panScroller(Browser.controlsScrollboxScroller, doffset);
this._panScroller(Browser.pageScrollboxScroller, doffset);
+ this.drawScrollBars();
+
this.bv.onAfterVisibleMove();
if (render)
this.bv.renderNow();
return !doffset.equals(dx, dy);
},
diff --git a/chrome/content/browser.xul b/chrome/content/browser.xul
--- a/chrome/content/browser.xul
+++ b/chrome/content/browser.xul
@@ -238,22 +238,22 @@
-
-
+
+
+
-
-
+