diff --git a/.vscode/settings.json b/.vscode/settings.json
index a161c34a5..d870307fd 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,6 +6,7 @@
"apip",
"apiserverchanged",
"chromeos",
+ "fullbleed",
"monostate",
"rearrangeendpoints",
"smartylighting",
diff --git a/demo/editor/app.js b/demo/editor/app.js
index 14f9398b0..8fa94c358 100644
--- a/demo/editor/app.js
+++ b/demo/editor/app.js
@@ -1,5 +1,4 @@
import { html, render } from 'lit-html';
-import '@advanced-rest-client/xhr-simple-request/xhr-simple-request.js';
import '@advanced-rest-client/oauth-authorization/oauth1-authorization.js';
import '@advanced-rest-client/oauth-authorization/oauth2-authorization.js';
import '@anypoint-web-components/anypoint-styles/colors.js';
@@ -55,7 +54,7 @@ protocols: [HTTP, HTTPS]
props.forEach((item) => {
Object.defineProperty(this, item, {
get() {
- return this['_' + item];
+ return this[`_${ item}`];
},
set(newValue) {
this._setObservableProperty(item, newValue);
@@ -67,7 +66,7 @@ protocols: [HTTP, HTTPS]
}
_setObservableProperty(prop, value) {
- const key = '_' + prop;
+ const key = `_${ prop}`;
if (this[key] === value) {
return;
}
diff --git a/demo/element/app.js b/demo/element/app.js
index 64f9601d4..945b09f3f 100644
--- a/demo/element/app.js
+++ b/demo/element/app.js
@@ -3,7 +3,6 @@ import '@anypoint-web-components/anypoint-dropdown/anypoint-dropdown.js';
import '@anypoint-web-components/anypoint-listbox/anypoint-listbox.js';
import '@anypoint-web-components/anypoint-item/anypoint-item.js';
import '@anypoint-web-components/anypoint-styles/colors.js';
-import '@advanced-rest-client/xhr-simple-request/xhr-simple-request.js';
import '@advanced-rest-client/oauth-authorization/oauth1-authorization.js';
import '@advanced-rest-client/oauth-authorization/oauth2-authorization.js';
import '@anypoint-web-components/anypoint-button/anypoint-icon-button.js';
@@ -56,9 +55,9 @@ class ApicApplication extends DemoBase {
+ allowCustomBaseUri
+ redirectUri="https://auth.advancedrestclient.com/oauth-popup.html"
+ oauth2ClientId="821776164331-rserncqpdsq32lmbf5cfeolgcoujb6fm.apps.googleusercontent.com">
Mocking Service
diff --git a/demo/standalone/index.html b/demo/standalone/index.html
index 71180fbbe..9dcd59716 100644
--- a/demo/standalone/index.html
+++ b/demo/standalone/index.html
@@ -24,7 +24,7 @@
}
.icon {
- display: inlink-block;
+ display: inline-block;
width: 24px;
height: 24px;
fill: currentColor;
diff --git a/demo/themed/anypoint-theme.css b/demo/themed/anypoint-theme.css
index ff98c6a77..fe77d4d92 100644
--- a/demo/themed/anypoint-theme.css
+++ b/demo/themed/anypoint-theme.css
@@ -47,14 +47,12 @@ html {
--http-method-label-head-background-color: var(--method-display-head-color);
--http-method-label-head-color: #fff;
--http-method-label-padding: 4px 5px;
- --method-display-font-weigth: 100;
+ --method-display-font-weight: 100;
--api-navigation-list-item-selected-background-color: #e8e9ea;
--api-navigation-list-item-selected-color: #000;
-
--api-method-documentation-url-border-radius: 0;
-
--api-method-documentation-section-background-color: #f9fafb;
--api-method-documentation-section-padding: 5px;
diff --git a/demo/themed/dark-theme.css b/demo/themed/dark-theme.css
index 7e8f42489..127dc4b5b 100644
--- a/demo/themed/dark-theme.css
+++ b/demo/themed/dark-theme.css
@@ -1,10 +1,17 @@
html {
- --secondary-text-color: #616161;
- --primary-background-color: #424242;
- --code-background-color: #263238;
- --code-color: #fff;
+ --primary-color: #ffcc80;
+ --primary-text-color: #fff;
+ --accent-color: #9c27b0;
+ --secondary-text-color: rgba(255, 255, 255, 0.84);
+ --primary-background-color: #212121;
+ --error-color: #ff9090;
+ --link-color: #8bc34a;
+
+ /* layout */
+ --api-console-toolbar-background-color: #424242;
+ --api-console-menu-background-color: var(--primary-background-color);
+ --api-console-menu-color: #fff;
- --anypoint-input-legacy-label-color: #F5F5F5;
--anypoint-checkbox-label-color: #F5F5F5;
--anypoint-input-background-color: #494949;
--anypoint-input-label-color: #fff;
@@ -18,45 +25,50 @@ html {
--inline-documentation-background-color: #3a3a3a;
+ --anypoint-menu-button-border-radius: 12px;
+
--anypoint-dropdown-menu-background-color: #494949;
--anypoint-dropdown-menu-label-background-color: var(--primary-background-color);
--anypoint-listbox-background-color: #494949;
- --anypoint-dropdown-menu-focus-background-color: #9E9E9E;
+ --anypoint-dropdown-menu-focus-background-color: #616161;
--anypoint-dropdown-menu-label-color: #fff;
--anypoint-dropdown-menu-info-message-color: #fff;
- --anypoint-item-hover-background-color: #9E9E9E;
- --anypoiont-autocomplete-background-color: #494949;
- --anypoint-icon-button-emphasis-low-color: #fff;
+ --anypoint-item-hover-background-color: #616161;
+ --anypoint-item-focused-background-color: #212121;
+ --anypoint-autocomplete-background-color: #494949;
+ --anypoint-icon-button-emphasis-low-color: #c5c5c5;
- --code-mirror-background-color: #37474F;
+ --anypoint-button-emphasis-low-hover-background-color: #616161;
+ --anypoint-button-emphasis-low-focus-background-color: var(--anypoint-button-emphasis-low-hover-background-color);
+ --anypoint-button-emphasis-low-focus-color: var(--primary-color);
+
+ --code-mirror-background-color: #1e1e1e;
+ --code-mirror-gutters-background-color: #1e1e1e;
--code-mirror-string-color: #C3E88D;
--code-mirror-punctuation-color: #EEFFFF;
--code-mirror-atom-color: #F07178;
--code-mirror-number-color: #F78C6A;
--code-mirror-cursor-color: #009688;
- --code-mirror-gutters-background-color: #37474F;
+ --code-mirror-tag-color: #ffffff;
+ --code-mirror-tag-color: #b4b4b4;
+ --code-mirror-gutters-border-right-color: #757575;
- --code-type-boolean-value-color: #F07178;
- --code-type-number-value-color: #F78C6A;
- --code-type-text-value-color: #C3E88D;
- --code-property-value-color: #F07178;
--code-operator-value-background-color: transparent;
+ --code-background-color: #212121;
+ --code-color: #fff;
+ --code-type-number-value-color: #eb67b0;
+ --code-property-value-color: #b0e6ff;
+ --code-type-text-value-color: #ffb89b;
+ --code-type-boolean-value-color: #72baff;
+ --code-type-number-value-color: #b5cea8;
+ --code-token-comment-value-color: #91afcd;
+ --code-keyword-value-color: #63d0ff;
--api-type-document-type-attribute-color: #fff;
--api-annotation-document-color: #fff;
--api-body-document-description-color: #fff;
--api-method-documentation-description-color: #fff;
--api-method-documentation-bottom-navigation-color: #fff;
-
- --http-method-label-get-background-color: rgb(0, 128, 0);
- --http-method-label-get-color: #fff;
- --http-method-label-post-background-color: rgb(33, 150, 243);
- --http-method-label-post-color: #fff;
- --http-method-label-put-background-color: rgb(255, 165, 0);
- --http-method-label-put-color: #fff;
- --http-method-label-delete-background-color: rgb(244, 67, 54);
- --http-method-label-delete-color: #fff;
- --iron-icon-fill-color: #fff;
--api-method-documentation-url-background-color: var(--code-background-color);
--markdown-styles-code-text-shadow: none;
@@ -76,15 +88,49 @@ html {
--auth-method-oauth2-redirect-info-color: #fff;
--inline-documentation-color: #fff;
- --api-console-menu-background-color: #424242;
- --api-console-menu-color: #fff;
-
- --api-endpoint-documentation-bottom-navigation-color: #fff;
- --api-method-documentation-bottom-navigation-color: #fff;
+ --api-endpoint-documentation-bottom-navigation-color: var(--link-color);
+ --api-endpoint-documentation-description-color: #fff;
+ --api-method-documentation-bottom-navigation-color: var(--link-color);
+
+ --authorization-method-oauth2-redirect-info-color: #fff;
+
+ /* Response error message */
+ --error-message-icon-color: rgba(255, 255, 255, 0.64);
+ --error-message-color: #fff;
+ --error-message-code-color: #9e9e9e;
+
+ /* HTTP method colors */
+ --http-get-color: rgba(0, 128, 0, 0.74);
+ --http-post-color: rgba(33, 150, 243, 0.74);
+ --http-put-color: rgba(255, 165, 0, 0.74);
+ --http-patch-color: rgb(156, 39, 176);
+ --http-delete-color: rgba(244, 67, 54, 0.74);
+ --http-options-color: rgba(128, 128, 128, 0.74);
+ --http-head-color: rgba(128, 128, 128, 0.74);
+ --http-connect-color: rgba(128, 128, 128, 0.74);
+ --http-trace-color: rgba(128, 128, 128, 0.74);
+ --http-method-label-get-background-color: var(--http-get-color);
+ --http-method-label-get-color: #fff;
+ --http-method-label-post-background-color: var(--http-post-color);
+ --http-method-label-post-color: #fff;
+ --http-method-label-patch-background-color: var(--http-patch-color);
+ --http-method-label-patch-color: #fff;
+ --http-method-label-put-background-color: var(--http-put-color);
+ --http-method-label-put-color: #fff;
+ --http-method-label-delete-background-color: var(--http-delete-color);
+ --http-method-label-delete-color: #fff;
+ --http-method-label-options-background-color: var(--http-options-color);
+ --http-method-label-options-background-color: #fff;
+ --http-method-label-head-background-color: var(--http-head-color);
+ --http-method-label-head-background-color: #fff;
+ --http-method-label-trace-background-color: var(--http-trace-color);
+ --http-method-label-trace-background-color: #fff;
+ --http-method-label-connect-background-color: var(--http-connect-color);
+ --http-method-label-connect-background-color: #fff;
}
body {
- background-color: #424242;
+ background-color: #212121;
color: #fff;
margin: 0;
diff --git a/src/ApiConsoleApp.js b/src/ApiConsoleApp.js
index 880b388c3..7548e3c41 100644
--- a/src/ApiConsoleApp.js
+++ b/src/ApiConsoleApp.js
@@ -167,13 +167,11 @@ export class ApiConsoleApp extends ApiConsole {
this.appendHeaders = undefined;
this.proxy = undefined;
this.proxyEncodeUrl = undefined;
- this.drawerAlign = undefined;
+ this.drawerAlign = 'left';
}
connectedCallback() {
- if (super.connectedCallback) {
- super.connectedCallback();
- }
+ super.connectedCallback();
window.addEventListener('popstate', this._onRoute.bind(this));
}
@@ -397,7 +395,7 @@ export class ApiConsoleApp extends ApiConsole {
${this._mediaQueriesTemplate()}
${this._drawerToolbarTemplate()}
diff --git a/src/ApiConsoleAppStyles.js b/src/ApiConsoleAppStyles.js
index bb9973a62..157cb79c9 100644
--- a/src/ApiConsoleAppStyles.js
+++ b/src/ApiConsoleAppStyles.js
@@ -66,9 +66,9 @@ api-documentation {
.api-docs .inline-request {
max-width: 600px;
margin-left: 12px;
- background-color: var(--apic-tryint-wide-background-color, transparent);
+ background-color: var(--apic-tryit-wide-background-color, transparent);
border-left-width: 1px;
- border-left-color: var(--apic-tryint-wide-border-color, #e5e5e5);
+ border-left-color: var(--apic-tryit-wide-border-color, #e5e5e5);
border-left-style: solid;
padding: 0 12px;
box-sizing: border-box;