options.html - Issue 29536764: Issue 5587, 5748 - Use mobile options page on Firefox for Android

Side by Side Diff: options.html

Issue 29536764: Issue 5587, 5748 - Use mobile options page on Firefox for Android (Closed) Base URL: https://hg.adblockplus.org/adblockpluschrome/

Patch Set: Queue up messages from background page and forward them later Created Sept. 15, 2017, 5:49 p.m.

Left:
Right:

Use n/p to move between diff chunks; N/P to move between comments.

Jump to:

View unified diff | Download patch

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2	2

3 <!--	3 <!--

4 - This file is part of Adblock Plus <https://adblockplus.org/>,	4 - This file is part of Adblock Plus <https://adblockplus.org/>,

5 - Copyright (C) 2006-present eyeo GmbH	5 - Copyright (C) 2006-present eyeo GmbH

6 -	6 -

7 - Adblock Plus is free software: you can redistribute it and/or modify	7 - Adblock Plus is free software: you can redistribute it and/or modify

8 - it under the terms of the GNU General Public License version 3 as	8 - it under the terms of the GNU General Public License version 3 as

9 - published by the Free Software Foundation.	9 - published by the Free Software Foundation.

10 -	10 -

11 - Adblock Plus is distributed in the hope that it will be useful,	11 - Adblock Plus is distributed in the hope that it will be useful,

12 - but WITHOUT ANY WARRANTY; without even the implied warranty of	12 - but WITHOUT ANY WARRANTY; without even the implied warranty of

13 - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the	13 - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the

14 - GNU General Public License for more details.	14 - GNU General Public License for more details.

15 -	15 -

16 - You should have received a copy of the GNU General Public License	16 - You should have received a copy of the GNU General Public License

17 - along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.	17 - along with Adblock Plus. If not, see <http://www.gnu.org/licenses/>.

18 -->	18 -->

19	19

20 <html>

21 <head>

22 <meta charset="utf-8">	20 <meta charset="utf-8">
	Thomas Greiner 2017/09/19 17:51:20 Coding style: "Don't omit optional HTML tags." Coding style: "Don't omit optional HTML tags." Manish Jethani 2017/09/19 19:42:05 Done. Show quoted text On 2017/09/19 17:51:20, Thomas Greiner wrote: > Coding style: "Don't omit optional HTML tags." Done.
23 <link type="text/css" href="jquery-ui/css/smoothness/jquery-ui-1.12.1.custom.css " rel="stylesheet" />	21 <style>

24 <script type="text/javascript" src="jquery-ui/js/jquery-3.2.1.min.js"></script>

25 <script type="text/javascript" src="jquery-ui/js/jquery-ui-1.12.1.custom.min.js" ></script>

26 <script type="text/javascript" src="ext/common.js"></script>

27 <script type="text/javascript" src="ext/content.js"></script>

28 <script type="text/javascript" src="i18n.js" charset="utf-8"></script>

29 <script type="text/javascript" src="options.js" charset="utf-8"></script>

30 <title>Adblock Plus Options</title>
Thomas Greiner 2017/09/19 17:51:20 Don't get rid of the page title. It's a bit weird Don't get rid of the page title. It's a bit weird that the title text will be disconnected from the actual page content but at least we should keep it around and translate it. Alternatively, we could extract the title from the frame content because we're not updating the text anymore after the page has been loaded. Manish Jethani 2017/09/19 19:42:04 I'm using "document.title = iframe.contentDocument Show quoted text On 2017/09/19 17:51:20, Thomas Greiner wrote: > Don't get rid of the page title. It's a bit weird that the title text will be > disconnected from the actual page content but at least we should keep it around > and translate it. > > Alternatively, we could extract the title from the frame content because we're > not updating the text anymore after the page has been loaded. I'm using "document.title = iframe.contentDocument.title" now. It should be OK even on mobile since the title is populated on DOMContentLoaded while we're waiting for the iframe's load event, which is later. Tested on Chrome, Firefox, and Firefox for Android. Thomas Greiner 2017/09/20 12:29:59 The title in the options page is not hardcoded lik Show quoted text On 2017/09/19 19:42:04, Manish Jethani wrote: > I'm using "document.title = iframe.contentDocument.title" now. It should be OK > even on mobile since the title is populated on DOMContentLoaded while we're > waiting for the iframe's load event, which is later. > > Tested on Chrome, Firefox, and Firefox for Android. The title in the options page is not hardcoded like here but generated in a listener for the "DOMContentLoaded" event. But since you were able to verify that it works on all platforms, it appears that the "DOMContentLoaded" event within the iFrame is dispatched before the one in the top-level frame. So in that case this seems to be working as expected. Manish Jethani 2017/09/20 12:50:28 We update the title in iframe.onload, which is tri Show quoted text On 2017/09/20 12:29:59, Thomas Greiner wrote: > On 2017/09/19 19:42:04, Manish Jethani wrote: > > I'm using "document.title = iframe.contentDocument.title" now. It should be OK > > even on mobile since the title is populated on DOMContentLoaded while we're > > waiting for the iframe's load event, which is later. > > > > Tested on Chrome, Firefox, and Firefox for Android. > > The title in the options page is not hardcoded like here but generated in a > listener for the "DOMContentLoaded" event. But since you were able to verify > that it works on all platforms, it appears that the "DOMContentLoaded" event > within the iFrame is dispatched before the one in the top-level frame. So in > that case this seems to be working as expected. We update the title in iframe.onload, which is triggered when the "load" event of the iframe occurs. It's definitely after the iframe's "DOMContentLoaded" event. The iframe's "DOMContentLoaded" cannot occur before the top frame's because we wait for the top frame's "DOMContentLoaded" to start loading the iframe's content at all, but anyway this is not a problem since we're waiting until the iframe's "load" event in fact.
31 <style type="text/css" media="screen">

32 body	22 body

33 {	23 {

34 font-family: Arial, Helvetica, sans-serif;	24 margin: 0;

35 font-size: 13px;	25 border: none;

36 padding: 20px;	26 padding: 0;

37 }	27 }
	Thomas Greiner 2017/09/19 17:51:20 Detail: Since you're using fixed positioning to po Detail: Since you're using fixed positioning to position the iFrame, what do you need these rules for? Manish Jethani 2017/09/19 19:42:04 This is a "just in case", for example if the user Show quoted text On 2017/09/19 17:51:20, Thomas Greiner wrote: > Detail: Since you're using fixed positioning to position the iFrame, what do you > need these rules for? This is a "just in case", for example if the user agent style sheet or a user style sheet (inserted by some other extension) sets any of these properties. If a border is set, for example, then it is clearly visible through the iframe since the iframe's background is transparent. While the padding does not affect the position and size of the iframe, it can affect the size of the page, causing a scrollbar to be displayed on the top frame (e.g. "padding: 1000px" to use an extreme example). Maybe we should remove all these and just set "overflow: hidden" since that would be necessary in case there are any UA/user styles that mess with the size of the page. These are not strictly necessary though, I can remove them if you think they clutter the code needlessly. Thomas Greiner 2017/09/20 12:29:59 Optimizing for user styles has never even occurred Show quoted text On 2017/09/19 19:42:04, Manish Jethani wrote: > This is a "just in case", for example if the user agent style sheet or a user > style sheet (inserted by some other extension) sets any of these properties. > > If a border is set, for example, then it is clearly visible through the iframe > since the iframe's background is transparent. > > While the padding does not affect the position and size of the iframe, it can > affect the size of the page, causing a scrollbar to be displayed on the top > frame (e.g. "padding: 1000px" to use an extreme example). > > Maybe we should remove all these and just set "overflow: hidden" since that > would be necessary in case there are any UA/user styles that mess with the size > of the page. > > These are not strictly necessary though, I can remove them if you think they > clutter the code needlessly. Optimizing for user styles has never even occurred to me and it hasn't been discussed yet whether this is a use-case we can/want to optimize for. I don't have a preference towards either though so feel free to leave it like this.
38	28

39 td	29 #content

40 {	30 {

41 font-size: 13px;	31 border: none;

42 vertical-align: top;	32 position: fixed;

43 text-align: left;	33 top: 0;

	34 right: 0;

	35 bottom: 0;

	36 left: 0;

	37 width: 100%;

	38 height: 100%;

44 }	39 }

45

46 p

47 {

48 margin-top: 0.5em;

49 }

50

51 button

52 {

53 white-space: pre;

54 }

55

56 #firefox-warning

57 {

58 margin-bottom: 20px;

59 padding: 10px;

60 border: 1px solid #cccccc;

61 border-radius: 3px;

62 background-color: #ffcccc;

63 font-size: 120%;

64 }

65

66 #subscriptionTemplate,

67 #addSubscriptionContainer,

68 #customSubscriptionContainer

69 {

70 display: none;

71 }

72

73 #acceptableAdsContainer

74 {

75 margin-top: 10px;

76 }

77

78 #acceptableAdsLink,

79 #acceptableAdsDocs

80 {

81 margin-left: 10px;

82 margin-right: 10px;

83 }

84

85 .subscription

86 {

87 margin: 3px 0px;

88 }

89

90 .subscriptionRemoveButton,

91 .subscriptionEnabledContainer,

92 .subscriptionTitle

93 {

94 margin-right: 1em;

95 }

96

97 .subscriptionRemoveButton

98 {

99 font-weight: normal !important;

100 font-size: 20px !important;

101 color: #FF0000 !important;

102 border: none !important;

103 outline: none !important;

104 background: none !important;

105 }

106

107 .subscriptionUpdate

108 {

109 color: #B0B0B0;

110 }

111

112 #rawFilters {

113 display: none;

114 }

115

116 .okMsg {

117 display: none;

118 color: #ffffff;

119 background: #30e030;

120 font-weight: bold;

121 padding: 3px;

122 }

123

124 .errMsg {

125 display: none;

126 color: #ffffff;

127 background: #e03030;

128 font-weight:bold;

129 padding:3px;

130 }

131

132 /* Filter list entry status message */

133 .flMsg {

134 display: none;

135 color: #b0b0b0;

136 }

137

138 .focused

139 {

140 box-shadow: 0px 0px 10px #e03030;

141 }

142

143 </style>	40 </style>

144 </head>	41 <iframe id="content" data-src="desktop-options.html" data-src-fennec="mobile-opt ions.html"></iframe>

145 <body>	42 <script src="options.js" charset="utf-8"></script>
	Thomas Greiner 2017/09/19 17:51:20 Suggestion: You could use the "defer" or "async" a Suggestion: You could use the "defer" or "async" attribute if you want to put the script tag inside the document head. Thomas Greiner 2017/09/19 17:51:20 Detail: The "charset" attribute here is redundant Detail: The "charset" attribute here is redundant because it has already been specified for the entire document. Manish Jethani 2017/09/19 19:42:04 Done. Show quoted text On 2017/09/19 17:51:20, Thomas Greiner wrote: > Suggestion: You could use the "defer" or "async" attribute if you want to put > the script tag inside the document head. Done. Manish Jethani 2017/09/19 19:42:04 Done. Show quoted text On 2017/09/19 17:51:20, Thomas Greiner wrote: > Detail: The "charset" attribute here is redundant because it has already been > specified for the entire document. Done.
146 <table>

147 <tr>

148 <td style="padding-right: 8px; vertical-align: middle;">

149 <img src="icons/detailed/abp-32.png" srcset="icons/detailed/abp-64.png 2x" >

150 </td>

151 <td>

152 <h1><span class="i18n_options"></span></h1>

153 </td>

154 </tr>

155 </table>

156

157 <div id="firefox-warning" hidden>

158 Don't like what you see?

159 <a href="https://adblockplus.org/blog/the-plan-towards-offering-adblock-plus- for-firefox-as-a-web-extension" target="_blank">Neither do we</a>.

160 This page will be improved soon.

161 </div>

162

163 <div id="tabs">

164 <ul>

165 <li><a href="#tab-filterlists"><span class="i18n_filter_lists"></span></a></ li>

166 <li><a href="#tab-userfilters"><span class="i18n_add_your_own_filters"></spa n></a></li>

167 <li><a href="#tab-whitelisted"><span class="i18n_whitelisted_domains"></span ></a></li>

168 <li><a href="#tab-general"><span class="i18n_general"></span></a></li>

169 </ul>

170

171 <div id="tab-filterlists">

172 <p>

173 <span class="i18n_enable_only_the"></span>

174 </p>

175 <p>

176 <span class="i18n_out_of_date_lists"></span>

177 <button id="updateFilterLists" class="refreshButton"><span class="i18n_upd ate_now"></span></button><br />

178

179 <!-- Subscription entry template -->

180 <div id="subscriptionTemplate" class="subscription">

181 <button class="i18n_filters_subscription_delete_label subscriptionRemove Button"></button>

182 <label class="subscriptionEnabledContainer">

183 <input class="subscriptionEnabled" type="checkbox" /> <span class="i18 n_filters_subscription_enabled_label"></span>

184 </label>

185 <a class="subscriptionTitle"></a>

186 <span class="subscriptionUpdate"></span>

187 </div>

188

189 <!-- Placeholder for list of subscriptions -->

190 <div id="filterLists"></div>

191 <br />

192

193 <!-- Placeholder for user's filter list URLs -->

194 <div id="userFilterLists" style="margin-bottom: 8px"></div>

195

196 <p id="addSubscriptionButton">

197 <button id="startSubscriptionSelection" class="addButton"><span class="i 18n_filters_addSubscription_label"></span></button>

198 </p>

199 <div id="addSubscriptionContainer">

200 <span class="i18n_subscriptionSelection_subscriptionSelector_label"></sp an><br />

201 <select id="subscriptionSelector" style="width:500px"></select>

202 <button id="addSubscription" class="addButton"><span class="i18n_filters _addSubscriptionAdd_label"></span></button>

203 </div>

204 <div id="customSubscriptionContainer">

205 <p>

206 <span class="i18n_subscriptionSelection_title_label"></span><br />

207 <input type="text" id="customSubscriptionTitle" style="width:500px" />

208 </p>

209 <p>

210 <span class="i18n_subscriptionSelection_location_label"></span><br />

211 <input type="text" id="customSubscriptionLocation" style="width:500px" />

212 </p>

213 </div>

214

215 <div id="acceptableAdsContainer">

216 <input type="checkbox" id="acceptableAds" />

217 <label for="acceptableAds" class="i18n_filters_acceptableAds2_label"></l abel>

218 <a id="acceptableAdsLink" href="#" target="_blank" class="i18n_filters_v iewList_label"></a>

219 <a id="acceptableAdsDocs" href="#" target="_blank" class="i18n_filters_r eadMore_label"></a>

220 </div>

221 </p>

222 </div>

223

224 <div id="tab-whitelisted">

225 <p class="i18n_disabled_for_these_domains"></p>

226

227 <form id="whitelistForm" action="#">

228 <table>

229 <tr>

230 <td style="max-width:100%">

231 <input type="text" value="" id="newWhitelistDomain" style="width:100%" >

232 </td>

233 <td>

234 <button class="addButton" type="submit"><span class="i18n_add_domain_b utton"></span></button>

235 </td>

236 </tr>

237

238 <tr>

239 <td>

240 <select id="excludedDomainsBox" size="10" multiple style="width:500px; background: white;"></select>

241 </td>

242 <td>

243 <button id="removeWhitelist" class="removeButton"><span class="i18n_re move_button"></span></button>

244 </td>

245 </tr>

246 </table>

247 </form>

248 </div>

249

250 <div id="tab-userfilters">

251 <p id="filter-must-follow-syntax" class="i18n_filter_must_follow_syntax"></p >

252

253 <form id="customFilterForm" action="#">

254 <table>

255 <tr>

256 <td>

257 <input type="text" value="" id="newFilter" style="width:500px">

258 </td>

259 <td>

260 <button class="addButton" type="submit"><span class="i18n_add_filter_b utton"></span></button>

261 </td>

262 </tr>

263 <tr>

264 <td>

265 <select id="userFiltersBox" size="20" multiple style="width: 500px; ba ckground: white;overflow:auto;"></select>

266 </td>

267 <td>

268 <button id="removeCustomFilter" class="removeButton"><span class="i18n _remove_button"></span></button>

269 </td>

270 </tr>

271 <tr>

272 <td>

273 <div style="font-size: 90%; text-align: right"><a id="rawFiltersButton " href="#"><span class="i18n_edit_filters_raw"></span></a></div>

274 </td>

275 </tr>

276 <tr id="rawFilters">

277 <td>

278 <div style="width: 500px">

279 <textarea id="rawFiltersText" style="width: 100%; height: 300px"></t extarea>

280 </div>

281 </td>

282 <td>

283 <div><button id="importRawFilters"><span class="i18n_apply_changes"></ span></button></div>

284 </td>

285 </tr>

286 </table>

287 </form>

288 </div>

289

290 <div id="tab-general">

291 <p>

292 <div id="shouldShowBlockElementMenuContainer">

293 <input type="checkbox" id="shouldShowBlockElementMenu" /><label for="sho uldShowBlockElementMenu" class="i18n_show_block_element_menu"></label>

294 </div>

295 <div id="showDevtoolsPanelContainer">

296 <input type="checkbox" id="show_devtools_panel" /><label for="show_devto ols_panel" class="i18n_show_devtools_panel"></label>

297 </div>

298 <div id="shouldShowNotificationsContainer" data-section="notifications">

299 <input type="checkbox" id="shouldShowNotifications" /><label for="should ShowNotifications" class="i18n_overlay_shownotifications_label"></label>

300 </div>

301 </p>

302

303 <p id="found-a-bug" class="i18n_found_a_bug"></p>

304 </div>

305 </div>

306

307 </body>

308 </html>

OLD	NEW

« ext/background.js ('K') | « metadata.gecko-webext ('k') | options.js » ('j') | options.js » ('J')