Merge branch 'feature/preferences_styling' into develop

JakubJachym · Mar 17, 2019 · bc9f7d5 · bc9f7d5
2 parents 4549c90 + ed2039c
commit bc9f7d5
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 5 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,9 +1,9 @@
 {
 
-  "description": "Adds a simple button to inject a Xdebug cookie",
+  "description": "Adds a simple button to inject a Xdebug cookie.",
   "manifest_version": 2,
   "name": "Xdebug-ext",
-  "version": "1.1",
+  "version": "1.2",
   "homepage_url": "https://github.com/lhall-adexos/xdebug-ext",
   "icons": {
     "48": "data/icons/debug_48_active.png"

diff --git a/options.html b/options.html
@@ -3,13 +3,28 @@
 <html>
 <head>
     <meta charset="utf-8">
+    <link rel="stylesheet" href="styles.css" media="all">
 </head>
 
-<body>
+<body class="options">
 
 <form>
-    <label>IDE Key<input type="text" id="idekey"></label>
-    <button type="submit">Save</button>
+    <h1>Extension options</h1>
+    <p class="learn-more">
+        Learn how to setup your web server and use Xdebug : <a href="https://deliciousbrains.com/xdebug-advanced-php-debugging/">Learn more</a>.
+
+    </p>
+    <ul>
+        <li>
+            <h2>XDEBUG_SESSION Cookie</h2>
+            <p class="hint">Xdebug cookie to allow you debugging of your application at runtime. IDE key should match your server configuration.</p>
+            <label>IDE Key : <input type="text" id="idekey"></label>
+
+        </li>
+    </ul>
+    <div class="buttons">
+        <button type="submit">Save</button>
+    </div>
 </form>
 
 <script src="options.js"></script>

diff --git a/styles.css b/styles.css
@@ -0,0 +1,39 @@
+body.options {
+    background-color: rgba(217, 222, 255, 0.7);
+    padding: 20px;
+}
+
+h1 {
+    margin-top: 0;
+}
+
+.options ul {
+    margin: 0;
+    padding: 0;
+}
+.options ul li {
+    list-style: none;
+    border-left: 3px solid #1726b8;
+    padding: 10px 0 10px 15px;
+    margin-bottom: 15px;
+    background: white;
+}
+.options ul li:nth-of-type(2) {
+    border-color: #1d6218;
+}
+.options ul li:nth-of-type(3) {
+    border-color: #892d1e;
+}
+.options ul li h2 { padding : 0; margin: 0;}
+.options ul li input[type=checkbox] {
+    -moz-transform: scale(1.5); /* FF */
+    -webkit-transform: scale(1.5); /* Safari and Chrome */
+    padding: 10px;
+    margin-right: 10px;
+}
+.options .buttons { text-align: left; }
+.options form button[type=submit] {
+    font-size: 1.3em;
+    width: 15%;
+    text-align: center;
+}