├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── img
    ├── firefox128.png
    └── firefox512.png
├── index.html
├── main.js
├── manifest.webapp
└── style.css


/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Community Participation Guidelines
 2 | 
 3 | This repository is governed by Mozilla's code of conduct and etiquette guidelines. 
 4 | For more details, please read the
 5 | [Mozilla Community Participation Guidelines](https://www.mozilla.org/about/governance/policies/participation/). 
 6 | 
 7 | ## How to Report
 8 | For more information on how to report violations of the Community Participation Guidelines, please read our '[How to Report](https://www.mozilla.org/about/governance/policies/participation/reporting/)' page.
 9 | 
10 | <!--
11 | ## Project Specific Etiquette
12 | 
13 | In some cases, there will be additional project etiquette i.e.: (https://bugzilla.mozilla.org/page.cgi?id=etiquette.html).
14 | Please update for your project.
15 | -->
16 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 | CC0 1.0 Universal
  2 | 
  3 | Statement of Purpose
  4 | 
  5 | The laws of most jurisdictions throughout the world automatically confer
  6 | exclusive Copyright and Related Rights (defined below) upon the creator and
  7 | subsequent owner(s) (each and all, an "owner") of an original work of
  8 | authorship and/or a database (each, a "Work").
  9 | 
 10 | Certain owners wish to permanently relinquish those rights to a Work for the
 11 | purpose of contributing to a commons of creative, cultural and scientific
 12 | works ("Commons") that the public can reliably and without fear of later
 13 | claims of infringement build upon, modify, incorporate in other works, reuse
 14 | and redistribute as freely as possible in any form whatsoever and for any
 15 | purposes, including without limitation commercial purposes. These owners may
 16 | contribute to the Commons to promote the ideal of a free culture and the
 17 | further production of creative, cultural and scientific works, or to gain
 18 | reputation or greater distribution for their Work in part through the use and
 19 | efforts of others.
 20 | 
 21 | For these and/or other purposes and motivations, and without any expectation
 22 | of additional consideration or compensation, the person associating CC0 with a
 23 | Work (the "Affirmer"), to the extent that he or she is an owner of Copyright
 24 | and Related Rights in the Work, voluntarily elects to apply CC0 to the Work
 25 | and publicly distribute the Work under its terms, with knowledge of his or her
 26 | Copyright and Related Rights in the Work and the meaning and intended legal
 27 | effect of CC0 on those rights.
 28 | 
 29 | 1. Copyright and Related Rights. A Work made available under CC0 may be
 30 | protected by copyright and related or neighboring rights ("Copyright and
 31 | Related Rights"). Copyright and Related Rights include, but are not limited
 32 | to, the following:
 33 | 
 34 |   i. the right to reproduce, adapt, distribute, perform, display, communicate,
 35 |   and translate a Work;
 36 | 
 37 |   ii. moral rights retained by the original author(s) and/or performer(s);
 38 | 
 39 |   iii. publicity and privacy rights pertaining to a person's image or likeness
 40 |   depicted in a Work;
 41 | 
 42 |   iv. rights protecting against unfair competition in regards to a Work,
 43 |   subject to the limitations in paragraph 4(a), below;
 44 | 
 45 |   v. rights protecting the extraction, dissemination, use and reuse of data in
 46 |   a Work;
 47 | 
 48 |   vi. database rights (such as those arising under Directive 96/9/EC of the
 49 |   European Parliament and of the Council of 11 March 1996 on the legal
 50 |   protection of databases, and under any national implementation thereof,
 51 |   including any amended or successor version of such directive); and
 52 | 
 53 |   vii. other similar, equivalent or corresponding rights throughout the world
 54 |   based on applicable law or treaty, and any national implementations thereof.
 55 | 
 56 | 2. Waiver. To the greatest extent permitted by, but not in contravention of,
 57 | applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and
 58 | unconditionally waives, abandons, and surrenders all of Affirmer's Copyright
 59 | and Related Rights and associated claims and causes of action, whether now
 60 | known or unknown (including existing as well as future claims and causes of
 61 | action), in the Work (i) in all territories worldwide, (ii) for the maximum
 62 | duration provided by applicable law or treaty (including future time
 63 | extensions), (iii) in any current or future medium and for any number of
 64 | copies, and (iv) for any purpose whatsoever, including without limitation
 65 | commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes
 66 | the Waiver for the benefit of each member of the public at large and to the
 67 | detriment of Affirmer's heirs and successors, fully intending that such Waiver
 68 | shall not be subject to revocation, rescission, cancellation, termination, or
 69 | any other legal or equitable action to disrupt the quiet enjoyment of the Work
 70 | by the public as contemplated by Affirmer's express Statement of Purpose.
 71 | 
 72 | 3. Public License Fallback. Should any part of the Waiver for any reason be
 73 | judged legally invalid or ineffective under applicable law, then the Waiver
 74 | shall be preserved to the maximum extent permitted taking into account
 75 | Affirmer's express Statement of Purpose. In addition, to the extent the Waiver
 76 | is so judged Affirmer hereby grants to each affected person a royalty-free,
 77 | non transferable, non sublicensable, non exclusive, irrevocable and
 78 | unconditional license to exercise Affirmer's Copyright and Related Rights in
 79 | the Work (i) in all territories worldwide, (ii) for the maximum duration
 80 | provided by applicable law or treaty (including future time extensions), (iii)
 81 | in any current or future medium and for any number of copies, and (iv) for any
 82 | purpose whatsoever, including without limitation commercial, advertising or
 83 | promotional purposes (the "License"). The License shall be deemed effective as
 84 | of the date CC0 was applied by Affirmer to the Work. Should any part of the
 85 | License for any reason be judged legally invalid or ineffective under
 86 | applicable law, such partial invalidity or ineffectiveness shall not
 87 | invalidate the remainder of the License, and in such case Affirmer hereby
 88 | affirms that he or she will not (i) exercise any of his or her remaining
 89 | Copyright and Related Rights in the Work or (ii) assert any associated claims
 90 | and causes of action with respect to the Work, in either case contrary to
 91 | Affirmer's express Statement of Purpose.
 92 | 
 93 | 4. Limitations and Disclaimers.
 94 | 
 95 |   a. No trademark or patent rights held by Affirmer are waived, abandoned,
 96 |   surrendered, licensed or otherwise affected by this document.
 97 | 
 98 |   b. Affirmer offers the Work as-is and makes no representations or warranties
 99 |   of any kind concerning the Work, express, implied, statutory or otherwise,
100 |   including without limitation warranties of title, merchantability, fitness
101 |   for a particular purpose, non infringement, or the absence of latent or
102 |   other defects, accuracy, or the present or absence of errors, whether or not
103 |   discoverable, all to the greatest extent permissible under applicable law.
104 | 
105 |   c. Affirmer disclaims responsibility for clearing rights of other persons
106 |   that may apply to the Work or any use thereof, including without limitation
107 |   any person's Copyright and Related Rights in the Work. Further, Affirmer
108 |   disclaims responsibility for obtaining any necessary consents, permissions
109 |   or other rights required for any use of the Work.
110 | 
111 |   d. Affirmer understands and acknowledges that Creative Commons is not a
112 |   party to this document and has no duty or obligation with respect to this
113 |   CC0 or use of the Work.
114 | 
115 | For more information, please see
116 | <http://creativecommons.org/publicdomain/zero/1.0/>
117 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # browser-api-demo
2 | A simple demo to show usage of the Mozilla Browser API. See [https://developer.mozilla.org/en-US/docs/Web/API/Using_the_Browser_API](https://developer.mozilla.org/en-US/docs/Web/API/Using_the_Browser_API) for more details.
3 | 


--------------------------------------------------------------------------------
/img/firefox128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/browser-api-demo/f1b609db881715cd1a04f127c2e8edf49e60cbba/img/firefox128.png


--------------------------------------------------------------------------------
/img/firefox512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdn/browser-api-demo/f1b609db881715cd1a04f127c2e8edf49e60cbba/img/firefox512.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 |     <meta name="viewport" content="width=device-width">
 7 | 
 8 |     <title>Browser API example</title>
 9 | 
10 |     <link rel="stylesheet" href="style.css">
11 |   </head>
12 | 
13 |   <body>
14 |     <iframe src="http://mozilla.org" mozbrowser></iframe>
15 |     <div class="controls">
16 |       <button class="back">&lt;</button><button class="forward">&gt;</button><form class="urlForm"><input type="text"></form><button class="stop-reload">R</button><button class="zoom-in">+</button><button class="zoom-out">-</button>
17 |     </div>
18 |     <div class="search">
19 |       <button class="prev">&lt;</button><button class="next">&gt;</button><form class="searchForm"><input type="text"></form><button class="searchToggle">S</button>
20 |     </div>
21 |     <script src="main.js"></script>
22 |   </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
  1 | var browser = document.querySelector('iframe');
  2 | var controls = document.querySelector('.controls');
  3 | 
  4 | var back = document.querySelector('.back');
  5 | var fwd = document.querySelector('.forward');
  6 | var urlBar = document.querySelector('.urlForm input');
  7 | var urlForm = document.querySelector('.urlForm');
  8 | var stopReload = document.querySelector('.stop-reload');
  9 | var zoomIn = document.querySelector('.zoom-in');
 10 | var zoomOut = document.querySelector('.zoom-out');
 11 | 
 12 | var search = document.querySelector('.search');
 13 | var prev = document.querySelector('.prev');
 14 | var next = document.querySelector('.next');
 15 | var searchBar = document.querySelector('.searchForm input');
 16 | var searchForm = document.querySelector('.searchForm');
 17 | var searchToggle = document.querySelector('.searchToggle');
 18 | 
 19 | var zoomFactor = 1;
 20 | 
 21 | // controls-related event listeners
 22 | 
 23 | function onBackPress() {
 24 |   browser.goBack();
 25 | };
 26 | back.addEventListener('touchend', onBackPress);
 27 | back.addEventListener('click', onBackPress);
 28 | 
 29 | function onFwdPress() {
 30 |   browser.goForward();
 31 | };
 32 | fwd.addEventListener('touchend', onFwdPress);
 33 | fwd.addEventListener('click', onFwdPress);
 34 | 
 35 | urlForm.addEventListener('submit',function(e) {
 36 |   e.preventDefault();
 37 |   browser.src = urlBar.value;
 38 |   urlBar.blur();
 39 | });
 40 | 
 41 | function onStopReloadPress() {
 42 |   if(stopReload.textContent === 'x') {
 43 |     browser.stop();
 44 |   } else {
 45 |     browser.reload();
 46 |   }
 47 | };
 48 | stopReload.addEventListener('touchend', onStopReloadPress);
 49 | stopReload.addEventListener('click', onStopReloadPress);
 50 | 
 51 | function onZoomInPress() {
 52 |   zoomFactor += 0.1;
 53 |   browser.zoom(zoomFactor);
 54 | };
 55 | zoomIn.addEventListener('touchend', onZoomInPress);
 56 | zoomIn.addEventListener('click', onZoomInPress);
 57 | 
 58 | function onZoomOutPress() {
 59 |   zoomFactor -= 0.1;
 60 |   browser.zoom(zoomFactor);
 61 | };
 62 | zoomOut.addEventListener('touchend', onZoomOutPress);
 63 | zoomOut.addEventListener('click', onZoomOutPress);
 64 | 
 65 | // search-related event listeners
 66 | 
 67 | var searchActive = false;
 68 | prev.disabled = true;
 69 | next.disabled = true;
 70 | 
 71 | function onSearchTogglePress() {
 72 |   if(search.getAttribute('class') === 'search') {
 73 |     search.setAttribute('class', 'search shifted');
 74 |   } else if(search.getAttribute('class') === 'search shifted') {
 75 |     search.setAttribute('class', 'search');
 76 |     if(searchActive) {
 77 |       browser.clearMatch();
 78 |       searchActive = false;
 79 |       prev.disabled = true;
 80 |       next.disabled = true;
 81 |       searchBar.value = '';
 82 |     } 
 83 |   }
 84 | };
 85 | searchToggle.addEventListener('touchend', onSearchTogglePress);
 86 | searchToggle.addEventListener('click', onSearchTogglePress);
 87 | 
 88 | searchForm.addEventListener('submit',function(e) {
 89 |   e.preventDefault();
 90 |   browser.findAll(searchBar.value, 'case-sensitive');
 91 |   searchActive = true;
 92 |   prev.disabled = false;
 93 |   next.disabled = false;
 94 |   searchBar.blur();
 95 | });
 96 | 
 97 | function onFindBackwardPress() {
 98 |   browser.findNext('backward');
 99 | };
100 | prev.addEventListener('touchend', onFindBackwardPress);
101 | prev.addEventListener('click', onFindBackwardPress);
102 | 
103 | function onFindForwardPress() {
104 |   browser.findNext('forward');
105 | };
106 | next.addEventListener('touchend', onFindForwardPress);
107 | next.addEventListener('click', onFindForwardPress);
108 | 
109 | //browser.addEventListener('mozbrowserfindchange', function(e) {
110 |  // can react to find changes if required
111 | //})
112 | 
113 | // browser-related event listeners
114 | 
115 | browser.addEventListener('mozbrowserloadstart',function() {
116 |   stopReload.textContent = 'x'; 
117 | });
118 | 
119 | browser.addEventListener('mozbrowserloadend',function(e) {
120 |   canMoveBwd();
121 |   canMoveFwd();
122 |   stopReload.textContent = 'R';
123 |   console.log(e.detail.backgroundColor);
124 |   controls.style.background = e.detail.backgroundColor;
125 | });
126 | 
127 | browser.addEventListener('mozbrowserlocationchange', function (e) {
128 |   urlBar.value = e.detail.url;
129 | });
130 | 
131 | browser.addEventListener('mozbrowsererror', function (e) {
132 |   console.log("Loading error: " + e.detail);
133 | });
134 | 
135 | // function definitions
136 | 
137 | function canMoveBwd() {
138 |   var request = browser.getCanGoBack();
139 | 
140 |   request.onsuccess = function() {
141 |     if (request.result) {
142 |       back.disabled = false;
143 |       console.log("It's possible to navigate the history backward.");
144 |     } else {
145 |       back.disabled = true;
146 |       console.log("It's not possible to navigate the history backward.");
147 |     }
148 |   }
149 | }
150 | 
151 | function canMoveFwd() {
152 |   var request = browser.getCanGoForward();
153 | 
154 |   request.onsuccess = function() {
155 |     if (request.result) {
156 |       fwd.disabled = false;
157 |       console.log("It's possible to navigate the history forward.");
158 |     } else {
159 |       fwd.disabled = true;
160 |       console.log("It's not possible to navigate the history forward.");
161 |     }
162 |   }
163 | }
164 | 


--------------------------------------------------------------------------------
/manifest.webapp:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "BrowserDemo",
 3 |   "description": "Browser app demo for MDN Browser API documentation; this is just a test!",
 4 |   "launch_path": "/index.html",
 5 |   "type": "privileged",
 6 |   "icons": {
 7 |     "512": "/img/firefox512.png",
 8 |     "128": "/img/firefox128.png"
 9 |   },
10 |   "developer": {
11 |     "name": "Chris Mills",
12 |     "url": "https://developer.mozilla.org/en-US/docs/Web/API/Browser_API"
13 |   },
14 |   "default_locale": "en",
15 |   "permissions": {
16 |     "browser": {
17 |       "description" : "Allows an iframe element to be turned into an embedded web browser"
18 |     }
19 |   }
20 | }


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
 1 | html, body {
 2 | 	margin: 0;
 3 | }
 4 | 
 5 | html {
 6 |   height: 100%;
 7 |   overflow: hidden;
 8 | }
 9 | 
10 | body {
11 | 	width: 100%;
12 | 	height: inherit;
13 | }
14 | 
15 | iframe {
16 | 	width: 100%;
17 | 	height: calc(100% - 47px);
18 | 	border: 0;
19 | }
20 | 
21 | .controls, .search {
22 |   	width: 100%;
23 | 	height: 40px;
24 | 	padding: 1px 0;
25 | 	display: flex;
26 | 	flex-flow: row;
27 | }
28 | 
29 | button {
30 | 	font-size: 24px;
31 | 	line-height: 16px;
32 | 	border: 0;
33 | 	border-radius: none;
34 | 	padding: 0 5px;
35 | 	margin: 0 1px;
36 | 	width: 44px;
37 | 	position: relative;
38 | 	bottom: 1px;
39 | 	background-image: linear-gradient(to bottom, rgba(0,0,0,0.3),rgba(0,0,0,0));
40 | 	background-color: #ccc;
41 | }
42 | 
43 | button:hover {
44 | 	background-color: #ddd;
45 | }
46 | 
47 | button:active {
48 | 	background-color: #eee;
49 | }
50 | 
51 | .urlForm, .searchForm {
52 | 	height: 40px;
53 | 	flex: 6;
54 | }
55 | 
56 | .urlForm input, .searchForm input {
57 | 	display: inline-block;
58 | 	font-size: 16px;
59 | 	line-height: 1;
60 | 	height: 35px;
61 | 	margin: 1px 1px 1px;
62 | 	position: relative;
63 | 	bottom: 1px;
64 | 	width: calc(100% - 6px);
65 | }
66 | 
67 | /* extra searchform styling */
68 | 
69 | .search {
70 |   position: absolute;
71 |   bottom: 42px;
72 |   right: calc(100% - 46px);
73 |   transition: 0.5s all;
74 | }
75 | 
76 | .searchForm {
77 | 	flex: 9;
78 | }
79 | 
80 | .shifted {
81 | 	right: 0;
82 | }


--------------------------------------------------------------------------------