chrome/content/ui/firstRun.html - Issue 11533106: Prepared adblockplus for Safari

Delta Between Two Patch Sets: chrome/content/ui/firstRun.html

Issue 11533106: Prepared adblockplus for Safari (Closed)

Left Patch Set: Fixed broken path to CSS for firefox Created Sept. 6, 2013, 5:18 p.m.

Right Patch Set: Made first run page always (also in FF) generated Created Oct. 31, 2013, 10:45 a.m.

Left:
Right:

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

Jump to:

Left: Side by side diff | Download
Right: Side by side diff | Download

LEFT	RIGHT
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <!--	2 <!--

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

4 - Copyright (C) 2006-2013 Eyeo GmbH	4 - Copyright (C) 2006-2013 Eyeo GmbH

5 -	5 -

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

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

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

9 -	9 -

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

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

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

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

14 -	14 -

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

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

17 -->	17 -->

18	18

19 <html>	19 <html>

20 <head>	20 <head>

21 <title class="i18n_firstRun_title"></title>	21 <title class="i18n_firstRun_title"></title>

22 <meta charset="utf-8">	22 <meta charset="utf-8">

23	23 <link type="text/css" href="/skin/firstRun.css" rel="stylesheet"/>

24 <!-- only for firefox -->	24 {%- if needsExt %}

25 <link type="text/css" href="../../skin/firstRun.css" rel="stylesheet"/>	25 <script type="text/javascript" src="ext/common.js"></script>

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

27 <!-- only required for the ports -->	27 {%- endif %}

28 <link type="text/css" href="skin/firstRun.css" rel="stylesheet"/>
Wladimir Palant 2013/09/10 06:53:46 I'm not particularly happy with using random relat I'm not particularly happy with using random relative paths to refer to skin files and assuming that these relative paths will only point somewhere on one platform. If there is no other solution (and seeing Safari documentation explicitly discourage host-relative URLs there probably isn't) I would prefer keeping the paths as they are and convert them automatically in the Safari packager. Note: the comment claiming that we were already loading non-existing files here is wrong. utils.js does exist in Firefox: https://hg.adblockplus.org/adblockplus/file/b823f710a2c7/chrome/content/ui/ut.... The adblockpluschrome repository merely contains a different version of that file. Sebastian Noack 2013/09/10 10:56:29 Yes, there isn't an other solution (for safari). H Show quoted text On 2013/09/10 06:53:46, Wladimir Palant wrote: > I'm not particularly happy with using random relative paths to refer to skin > files and assuming that these relative paths will only point somewhere on one > platform. If there is no other solution (and seeing Safari documentation > explicitly discourage host-relative URLs there probably isn't) I would prefer > keeping the paths as they are and convert them automatically in the Safari > packager. Yes, there isn't an other solution (for safari). Host relative paths lead to an error and the resource doesn't load. I tried it out. I don't like the idea of converting the HTML in the packager, because of it might easily break when the HTML file is changed without the conversion in mind. However it still might be the best option we have. :( Show quoted text > Note: the comment claiming that we were already loading non-existing files here > is wrong. utils.js does exist in Firefox: > https://hg.adblockplus.org/adblockplus/file/b823f710a2c7/chrome/content/ui/ut.... > The adblockpluschrome repository merely contains a different version of that > file. Oh, you are right, my fault.
29 <script type="text/javascript" src="ext.js"></script>

30 <script type="text/javascript" src="lib/compat.js"></script>

31 <script type="text/javascript" src="lib/io.js"></script>

32 <script type="text/javascript" src="lib/info.js"></script>

33 <script type="text/javascript" src="lib/adblockplus.js"></script>
Wladimir Palant 2013/09/10 06:53:46 Loading the core code into the page isn't going to Loading the core code into the page isn't going to do you any good - it will slow down the loading of this page significantly but you will be operating on a copy of the data, not the data used by the rest of the extension. This cannot possibly work correctly. A proper solution requires this page to communicate with the rest of the extension. From the documentation it isn't clear whether a page will be able to do that by itself, you might need to inject a content script into it. You should be able to abuse safari.self.tab.canLoad() to do synchronous messaging. require() should work by sending a synchronous message to the global page and getting a list of methods and properties back. Using that list it should construct a wrapper: * Property getters use synchronous messaging to retrieve their value from the global page (any non-primitive values should again be resolved into wrappers). * Property setters use synchronous messaging to set the value in the global page. * Method calls are forwarded to the global page via synchronous messaging, their result is returned (any non-primitive values should again be resolved into wrappers). Note that the global page will need to keep a list of objects that wrappers have been created for - otherwise it won't know which object to call a method on. We cannot really know when a wrapper will stop being used, notifying the global page in the "unload" event that it can clear that list should be enough to avoid a memory leak however. From what I can tell, FilterNotifier will be the only object needing special handling. Wrapping it won't do any good, you will need to reimplement it for this page. So FilterNotifier.addListener() will ask the global page to register a listener on its end and send an async message to the page whenever it is called. All in all, not exactly a simple approach, the wrapper logic won't really be trivial. However, I don't see how we are going to avoid doing this. Sebastian Noack 2013/09/10 10:56:29 Unfortunately you are right. I didn't thought abou Show quoted text On 2013/09/10 06:53:46, Wladimir Palant wrote: > Loading the core code into the page isn't going to do you any good - it will > slow down the loading of this page significantly but you will be operating on a > copy of the data, not the data used by the rest of the extension. This cannot > possibly work correctly. > > A proper solution requires this page to communicate with the rest of the > extension. From the documentation it isn't clear whether a page will be able to > do that by itself, you might need to inject a content script into it. > > You should be able to abuse safari.self.tab.canLoad() to do synchronous > messaging. require() should work by sending a synchronous message to the global > page and getting a list of methods and properties back. Using that list it > should construct a wrapper: > > * Property getters use synchronous messaging to retrieve their value from the > global page (any non-primitive values should again be resolved into wrappers). > * Property setters use synchronous messaging to set the value in the global > page. > * Method calls are forwarded to the global page via synchronous messaging, their > result is returned (any non-primitive values should again be resolved into > wrappers). > > Note that the global page will need to keep a list of objects that wrappers have > been created for - otherwise it won't know which object to call a method on. We > cannot really know when a wrapper will stop being used, notifying the global > page in the "unload" event that it can clear that list should be enough to avoid > a memory leak however. > > From what I can tell, FilterNotifier will be the only object needing special > handling. Wrapping it won't do any good, you will need to reimplement it for > this page. So FilterNotifier.addListener() will ask the global page to register > a listener on its end and send an async message to the page whenever it is > called. > > All in all, not exactly a simple approach, the wrapper logic won't really be > trivial. However, I don't see how we are going to avoid doing this. Unfortunately you are right. I didn't thought about it before, well enough. The first run page, currently operates on a local copy of the data, and therefore the UI switches in the firstRun page wouldn't do anything. The same problem exists for the options page. And yes the only solution will be to implement a proxy interface that uses synchronous messaging. I got this idea before, but I tried to avoid it so far, because of this will become really complex, tricky and ugly. But it seems that we don't have any other option, now. :(
34 <script type="text/javascript" src="utils.js"></script>	28 <script type="text/javascript" src="utils.js"></script>

35

36 <script type="text/javascript" src="i18n.js"></script>	29 <script type="text/javascript" src="i18n.js"></script>

37 <script type="text/javascript" src="firstRun.js"></script>	30 <script type="text/javascript" src="firstRun.js"></script>

38 </head>	31 </head>

39 <body>	32 <body>

40 <div id="shade" class="arrow"></div>	33

41 <div id="content">	34

42 <header>	35 <header>

	36 <div id="logo"></div>

43 <h1 id="title-main" class="i18n_firstRun_title"></h1>	37 <h1 id="title-main" class="i18n_firstRun_title"></h1>

44 </header>	38 </header>

45	39

46 <p id="legacySafariWarning" class="i18n_firstRun_legacySafariWarning" hidd en="true"></p>	40 <section id="legacySafariWarning" class="i18n_firstRun_legacySafariWarning" hidden="true"></section>

47 <p id="dataCorruptionWarning" class="i18n_firstRun_dataCorruptionWarning" hidden="true"></p>	41 <section id="dataCorruptionWarning" class="i18n_firstRun_dataCorruptionWarni ng" hidden="true"></section>

	42

	43 <section id="acceptable-ads">

	44 <h2 class="i18n_firstRun_acceptableAdsHeadline"></h2>

48 <p id="acceptableAdsExplanation" class="i18n_firstRun_acceptableAdsExplana tion"></p>	45 <p id="acceptableAdsExplanation" class="i18n_firstRun_acceptableAdsExplana tion"></p>

	46 </section>

49	47

50 <h2 id="features-title" class="i18n_firstRun_features"></h2>	48 <section id="can-do-more">

	49 <h2 class="i18n_firstRun_features"></h2>

51	50

52 <ul id="features">	51 <ul id="can-do-more-overview">

53 <li id="feature-malware" class="feature">	52 <li id="feature-first">

54 <div class="feature-image"></div>	53 <div class="feature-malware-image"></div>

55 <div class="feature-description">	54 <h4 class="i18n_firstRun_feature_malware"></h4>

56 <p class="feature-text">

57 <span class="i18n_firstRun_feature_malware feature-title"></span> <span class="i18n_firstRun_feature_malware_description"></span>

58 </p>

59 </div>

60 <div id="toggle-malware" class="toggle">

61 <div class="i18n_firstRun_toggle_on toggle-on"></div>

62 <div class="toggle-blob"></div>

63 <div class="i18n_firstRun_toggle_off toggle-off"></div>

64 </div>

65 </li>	55 </li>

66 <li id="feature-social" class="feature">	56 <li>

67 <div class="feature-image"></div>	57 <div class="feature-social-image"></div>

68 <div class="feature-description">	58 <h4 class="i18n_firstRun_feature_social"></h4>

69 <p class="feature-text">

70 <span class="i18n_firstRun_feature_social feature-title"></span> < span class="i18n_firstRun_feature_social_description"></span>

71 </p>

72 </div>

73 <div id="toggle-social" class="toggle">

74 <div class="i18n_firstRun_toggle_on toggle-on"></div>

75 <div class="toggle-blob"></div>

76 <div class="i18n_firstRun_toggle_off toggle-off"></div>

77 </div>

78 </li>	59 </li>

79 <li id="feature-tracking" class="feature">	60 <li>

80 <div class="feature-image"></div>	61 <div class="feature-tracking-image"></div>

81 <div class="feature-description">	62 <h4 class="i18n_firstRun_feature_tracking"></h4>

82 <p class="feature-text">

83 <span class="i18n_firstRun_feature_tracking feature-title"></span> <span class="i18n_firstRun_feature_tracking_description"></span>

84 </p>

85 </div>

86 <div id="toggle-tracking" class="toggle">

87 <div class="i18n_firstRun_toggle_on toggle-on"></div>

88 <div class="toggle-blob"></div>

89 <div class="i18n_firstRun_toggle_off toggle-off"></div>

90 </div>

91 </li>	63 </li>

92 </ul>	64 </ul>

93	65

94 <footer id="social">	66 <div id="can-do-more-expanded">

95 <h1 class="i18n_firstRun_share"></h1>	67 <ul id="features">

96 <ul>	68 <li id="feature-malware" class="feature">

97 <li>	69 <div class="feature-image feature-malware-image"></div>

98 <a id="share-facebook" class="share-button" href="https://www.facebo ok.com/adblockplus" target="_blank" title="Share on Facebook" data-script="https ://facebook.com/plugins/like.php?"></a>	70 <div class="feature-description">

	71 <div class="feature-description-textblock">

	72 <h3 class="i18n_firstRun_feature_malware feature-title"></h3>

	73 <span class="i18n_firstRun_feature_malware_description"></span>

	74 </div>

	75 <div id="toggle-malware" class="toggle">

	76 <div class="i18n_firstRun_toggle_on toggle-on"></div>

	77 <div class="toggle-blob"></div>

	78 <div class="i18n_firstRun_toggle_off toggle-off"></div>

	79 </div>

	80 </div>

	81

99 </li>	82 </li>

100 <li>	83 <li id="feature-social" class="feature">

101 <a id="share-twitter" class="share-button" href="https://twitter.com /adblockplus" target="_blank" title="Share on Twitter" data-script="https://plat form.twitter.com/widgets.js"></a>	84 <div class="feature-image feature-social-image"></div>

	85 <div class="feature-description">

	86 <div class="feature-description-textblock">

	87 <h3 class="i18n_firstRun_feature_social feature-title"></h3>

	88 <span class="i18n_firstRun_feature_social_description"></span>

	89 </div>

	90 <div id="toggle-social" class="toggle">

	91 <div class="i18n_firstRun_toggle_on toggle-on"></div>

	92 <div class="toggle-blob"></div>

	93 <div class="i18n_firstRun_toggle_off toggle-off"></div>

	94 </div>

	95 </div>

102 </li>	96 </li>

103 <li>	97

104 <a id="share-gplus" class="share-button" href="https://www.google.co m/+AdblockPlus" target="_blank" title="Share on Google+" data-script="https://ap is.google.com/js/plusone.js"></a>	98 <li id="feature-tracking" class="feature">

	99 <div class="feature-image feature-tracking-image"></div>

	100 <div class="feature-description">

	101 <div class="feature-description-textblock">

	102 <h3 class="i18n_firstRun_feature_tracking feature-title"></h3>

	103 <span class="i18n_firstRun_feature_tracking_description"></spa n>

	104 </div>

	105 <div id="toggle-tracking" class="toggle">

	106 <div class="i18n_firstRun_toggle_on toggle-on"></div>

	107 <div class="toggle-blob"></div>

	108 <div class="i18n_firstRun_toggle_off toggle-off"></div>

	109 </div>

	110 </div>

105 </li>	111 </li>

	112

106 </ul>	113 </ul>

107 </footer>	114

108 </div>	115 </div>

	116

	117

	118 <div id="activate-features" class="overview" data-status="overview">

	119 <div class="arrow"></div>

	120 <a id="activate-features-label">

	121 <span id="label-show-expanded" class="i18n_firstRun_feature_show_expan ded"></span>

	122 <span id="label-show-overview" class="i18n_firstRun_feature_show_overv iew hide"></span>

	123 </a>

	124

	125 <div class="arrow"></div>

	126 </div>

	127 </section>

	128

	129 <section id="share">

	130 <h2 id="share-headline" class="i18n_firstRun_share_headline"></h2>

	131

	132 <div id="donate-block">

	133 <a id="donate" class="i18n_firstRun_donate" target="_blank"></a>

	134 <span id="donate-label" class="i18n_firstRun_donate_label"></span>

	135 </div>

	136

	137 <div id="share-block">

	138 <div id="share-general" class="share-buttons">

	139 <a id="share-facebook" href="https://www.facebook.com/adblockplus" tar get="_blank" data-script="https://facebook.com/plugins/like.php?">

	140 </a>

	141 <a id="share-twitter" href="https://twitter.com/adblockplus" target="_ blank" data-script="https://platform.twitter.com/widgets.js">

	142 </a>

	143 <a id="share-gplus" href="https://www.google.com/+AdblockPlus" target= "_blank" data-script="https://apis.google.com/js/plusone.js">

	144 </a>

	145 </div>

	146

	147 <!-- Chinese social networks -->

	148 <div id="share-chinese" class="share-buttons">

	149 <a id="share-renren" href="http://www.renren.com/601651969" target="_b lank">

	150 </a>

	151 <a id="share-weibo" href="http://e.weibo.com/adblockplus/" target="_bl ank">

	152 </a>

	153 </div>

	154 <span class="i18n_firstRun_share"></span>

	155 </div>

	156

	157 </section>

	158

	159 <footer>

	160 <a id="contributors" class="i18n_firstRun_contributor_credits"></a>

	161 </footer>

	162

109	163

110 <div id="glass-pane">	164 <div id="glass-pane">

111 <iframe id="share-popup" scrolling="no"></iframe>	165 <iframe id="share-popup" scrolling="no"></iframe>

112 </div>	166 </div>

113 </body>	167 </body>

114 </html>	168 </html>

LEFT	RIGHT