diff --git a/background_scripts/bootstrap.js b/background_scripts/background.js similarity index 100% rename from background_scripts/bootstrap.js rename to background_scripts/background.js diff --git a/config/css/config.css b/config/css/config.css index d8a6ced..382a3d0 100644 --- a/config/css/config.css +++ b/config/css/config.css @@ -1,3 +1,7 @@ body { - width: 800px; + min-width: 800px; +} + +.list-group-item .badge a { + color: white; } \ No newline at end of file diff --git a/config/index.html b/config/index.html index fbb10ff..2ceffb5 100644 --- a/config/index.html +++ b/config/index.html @@ -10,16 +10,26 @@ <link href="css/bootstrap-theme.min.css" rel="stylesheet"> </head> <body> - <header> - </header> <section class="container"> + <div class="row"> + <div class="col-xs-12 col-md-12"> + <p> + Enter regular expressions on the right, to create a new + blocking rule. On the right, select which functionality + should be blocked for hosts matching each regular expression. + </p> + </div> + </div> <div class="row"> <div class="col-xs-4 col-md-4 well"> <domain-rules :domain-names="domainNames" :selected-domain="selectedDomain"></domain-rules> </div> - <div class="col-xs-7 col-md-7 col-md-offset-1 col-xs-offset-1"> - <web-api-standards :standards="standards" :selected-standards="selectedStandards"></web-api-standards> + <div class="col-xs-8 col-md-8"> + <web-api-standards :standards="standards" + :selected-standards="selectedStandards" + :selected-domain="selectedDomain"> + </web-api-standards> </div> </div> </section> diff --git a/config/js/components/web-api-standards.vue.js b/config/js/components/web-api-standards.vue.js index 1a55a7d..acc78d9 100644 --- a/config/js/components/web-api-standards.vue.js +++ b/config/js/components/web-api-standards.vue.js @@ -5,11 +5,17 @@ const standardsDefaults = window.WEB_API_MANAGER.defaults; Vue.component("web-api-standards", { - props: ["standards", "selectedStandards"], + props: ["standards", "selectedStandards", "selectedDomain"], template: ` <div class="web-api-standards-container"> - <div class="form-horizontal"> - <div class="form-group"> + <h3>Pattern: <code>{{ selectedDomain }}</code></h3> + + <div class="panel panel-default form-horizontal"> + <div class="panel-heading"> + Default configurations + </div> + + <div class="panel-body"> <button @click="onConservativeClicked"> Use Conservative Settings </button> @@ -18,15 +24,23 @@ </button> </div> </div> - <div class="checkbox" v-for="standard in standards"> - <label> - <input type="checkbox" - :value="standard.info.idenitifer" - v-model="selectedStandards" - @change="onStandardChecked"> - {{ standard.info.idenitifer }} - <a href="{{ standard.info.url }}" v-if="standard.info.url">[info]</a> - </label> + + <div class="panel panel-default"> + <div class="panel-heading">Blocked standards</div> + + <ul class="list-group"> + <li class="list-group-item" v-for="standard in standards"> + <span v-if="standard.info.url" class="badge"> + <a href="{{ standard.info.url }}">info</a> + </span> + + <input type="checkbox" + :value="standard.info.idenitifer" + v-model="selectedStandards" + @change="onStandardChecked"> + {{ standard.info.idenitifer }} + </li> + </ul> </div> </div> `, diff --git a/manifest.json b/manifest.json index b92f9f7..84ee897 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "WebAPI Manager", - "version": "0.4", + "version": "0.5", "description": "Improves browser security by restricting page access to parts of the Web API.", "icons": { "48": "images/uic-48.png", @@ -46,7 +46,7 @@ "lib/storage.js", "lib/URI.js", "content_scripts/dist/standards.js", - "background_scripts/bootstrap.js" + "background_scripts/background.js" ] }, "options_ui": { diff --git a/popup/css/popup.css b/popup/css/popup.css new file mode 100644 index 0000000..c1fd3fe --- /dev/null +++ b/popup/css/popup.css @@ -0,0 +1,7 @@ +body, html { + min-width: 320px; +} + +section .row { + margin-bottom: 1em; +} \ No newline at end of file diff --git a/popup/js/example.js b/popup/js/popup.js similarity index 74% rename from popup/js/example.js rename to popup/js/popup.js index 6639d6f..27cfc4c 100644 --- a/popup/js/example.js +++ b/popup/js/popup.js @@ -1,5 +1,14 @@ +/*jslint es6: true*/ +/*global window*/ (function () { const rootObject = window.browser || window.chrome; + const configureButton = window.document.getElementById("config-page-link"); + + configureButton.addEventListener("click", function (event) { + rootObject.runtime.openOptionsPage(); + event.preventDefault(); + event.stopImmediatePropagation(); + }, false); rootObject.tabs.executeScript( { @@ -20,9 +29,13 @@ const liElm = document.createElement("li"); liElm.className = "list-group-item"; + if (domainRule !== "(default)") { + liElm.className += " list-group-item-success"; + } const spanElm = document.createElement("span"); spanElm.className = "badge"; + const badgeText = document.createTextNode(domainRule); spanElm.appendChild(badgeText); liElm.appendChild(spanElm); diff --git a/popup/popup.html b/popup/popup.html index 7818f3e..7203b16 100644 --- a/popup/popup.html +++ b/popup/popup.html @@ -7,14 +7,30 @@ <title>Frame listing popup</title> <link href="../config/css/bootstrap.min.css" rel="stylesheet"> <link href="../config/css/bootstrap-theme.min.css" rel="stylesheet"> + <link href="css/popup.css" rel="stylesheet"> </head> <body> - <section> - This page has loaded the followng frames… - <ul class="list-group"> - </ul> + <header class="container"> + <div class="row"> + <div class="col-xs-12"> + <h2>Blocking Rules</h2> + </div> + </div> + </header> + <section class="container"> + <div class="row"> + <div class="col-xs-12"> + <p>The following origins are execiting code on this page.</p> + <ul class="list-group"> + </ul> + + <button type="button" id="config-page-link" class="btn btn-default btn-block"> + Configure blocking rules + </button> + </div> + </div> </section> - <script src="js/example.js"></script> + <script src="js/popup.js"></script> </body> </html>