From 13a3034fbb605b3fb5ca973f0d6d28a8755395dc Mon Sep 17 00:00:00 2001 From: Mark Capella Date: Fri, 26 Apr 2013 00:51:08 -0400 Subject: [PATCH] Bug 828325 - The state of the -/+ buttons from text size in reader mode should be greyed, r=lucasr --- mobile/android/chrome/content/aboutReader.js | 82 ++++++++++++-------- mobile/android/themes/core/aboutReader.css | 5 ++ 2 files changed, 54 insertions(+), 33 deletions(-) diff --git a/mobile/android/chrome/content/aboutReader.js b/mobile/android/chrome/content/aboutReader.js index 6e2b89461a81..692f7eaf885f 100644 --- a/mobile/android/chrome/content/aboutReader.js +++ b/mobile/android/chrome/content/aboutReader.js @@ -84,14 +84,16 @@ let AboutReader = function(doc, win) { this._setFontType(fontType); let fontTitle = gStrings.GetStringFromName("aboutReader.textTitle"); - this._setupStepControl("font-size-control", fontTitle, this._onFontSizeChange.bind(this)); this._fontSize = 0; - this._setFontSize(Services.prefs.getIntPref("reader.font_size")); + this._setupStepControl("font-size-control", fontTitle, + this._FONT_SIZE_MIN, this._FONT_SIZE_MAX, this._FONT_SIZE_STEP, Services.prefs.getIntPref("reader.font_size"), + this._onFontSizeChange.bind(this)); let marginTitle = gStrings.GetStringFromName("aboutReader.marginTitle"); - this._setupStepControl("margin-size-control", marginTitle, this._onMarginSizeChange.bind(this)); this._marginSize = 0; - this._setMarginSize(Services.prefs.getIntPref("reader.margin_size")); + this._setupStepControl("margin-size-control", marginTitle, + this._MARGIN_SIZE_MIN, this._MARGIN_SIZE_MAX, this._MARGIN_SIZE_STEP, Services.prefs.getIntPref("reader.margin_size"), + this._onMarginSizeChange.bind(this)); dump("Decoding query arguments"); let queryArgs = this._decodeQueryString(win.location.href); @@ -111,8 +113,12 @@ let AboutReader = function(doc, win) { } AboutReader.prototype = { - _STEP_INCREMENT: 0, - _STEP_DECREMENT: 1, + _FONT_SIZE_MIN: 1, + _FONT_SIZE_MAX: 7, + _FONT_SIZE_STEP: 1, + _MARGIN_SIZE_MIN: 5, + _MARGIN_SIZE_MAX: 25, + _MARGIN_SIZE_STEP: 5, _BLOCK_IMAGES_SELECTOR: ".content p > img:only-child, " + ".content p > a:only-child > img:only-child, " + @@ -286,20 +292,10 @@ AboutReader.prototype = { }); }, - _onMarginSizeChange: function Reader_onMarginSizeChange(operation) { - if (operation == this._STEP_INCREMENT) - this._setMarginSize(this._marginSize + 5); - else - this._setMarginSize(this._marginSize - 5); - }, - - _setMarginSize: function Reader_setMarginSize(newMarginSize) { - if (this._marginSize === newMarginSize) - return; - + _onMarginSizeChange: function Reader_onMarginSizeChange(newMarginSize) { let doc = this._doc; - this._marginSize = Math.max(5, Math.min(25, newMarginSize)); + this._marginSize = newMarginSize; doc.body.style.marginLeft = this._marginSize + "%"; doc.body.style.marginRight = this._marginSize + "%"; @@ -308,23 +304,13 @@ AboutReader.prototype = { Services.prefs.setIntPref("reader.margin_size", this._marginSize); }, - _onFontSizeChange: function Reader_onFontSizeChange(operation) { - if (operation == this._STEP_INCREMENT) - this._setFontSize(this._fontSize + 1); - else - this._setFontSize(this._fontSize - 1); - }, - - _setFontSize: function Reader_setFontSize(newFontSize) { - if (this._fontSize === newFontSize) - return; - + _onFontSizeChange: function Reader_onFontSizeChange(newFontSize) { let bodyClasses = this._doc.body.classList; if (this._fontSize > 0) bodyClasses.remove("font-size" + this._fontSize); - this._fontSize = Math.max(1, Math.min(7, newFontSize)); + this._fontSize = newFontSize; bodyClasses.add("font-size" + this._fontSize); Services.prefs.setIntPref("reader.font_size", this._fontSize); @@ -564,7 +550,7 @@ AboutReader.prototype = { return result; }, - _setupStepControl: function Reader_setupStepControl(id, name, callback) { + _setupStepControl: function Reader_setupStepControl(id, name, min, max, step, initial, callback) { let doc = this._doc; let stepControl = doc.getElementById(id); @@ -580,12 +566,34 @@ AboutReader.prototype = { minusButton.className = "button minus-button"; stepControl.appendChild(minusButton); + let updateControls = function() { + current = Math.max(min, Math.min(max, current)); + if (current == min) { + minusButton.classList.add("disabled"); + } else { + minusButton.classList.remove("disabled"); + } + if (current == max) { + plusButton.classList.add("disabled"); + } else { + plusButton.classList.remove("disabled"); + } + } + + let current = initial; + updateControls(); + plusButton.addEventListener("click", function(aEvent) { if (!aEvent.isTrusted) return; aEvent.stopPropagation(); - callback(this._STEP_INCREMENT); + + if (current < max) { + current += step; + updateControls(); + callback(current); + } }.bind(this), true); minusButton.addEventListener("click", function(aEvent) { @@ -593,8 +601,16 @@ AboutReader.prototype = { return; aEvent.stopPropagation(); - callback(this._STEP_DECREMENT); + + if (current > min) { + current -= step; + updateControls(); + callback(current); + } }.bind(this), true); + + // Always callback initial current setting + callback(current); }, _setupSegmentedButton: function Reader_setupSegmentedButton(id, options, initialValue, callback) { diff --git a/mobile/android/themes/core/aboutReader.css b/mobile/android/themes/core/aboutReader.css index b6b4df020816..e9d73728df2b 100644 --- a/mobile/android/themes/core/aboutReader.css +++ b/mobile/android/themes/core/aboutReader.css @@ -503,6 +503,11 @@ body { background-image: url('chrome://browser/skin/images/reader-minus-icon-mdpi.png'); } +.step-control > .disabled { + opacity: 0.25; + -moz-user-select: -moz-none; +} + .toggle-button.on { background-image: url('chrome://browser/skin/images/reader-toggle-on-icon-mdpi.png'); }