Skip to content

Commit

Permalink
chore: fixing chrome extension support
Browse files Browse the repository at this point in the history
  • Loading branch information
@jarrodek
jarrodek committed Nov 17, 2019
1 parent c564eff commit 3a700bb
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 83 deletions.
95 changes: 83 additions & 12 deletions src/ApiConsole.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import '@anypoint-web-components/anypoint-button/anypoint-button.js';
import '@polymer/paper-toast/paper-toast.js';
import '@api-components/api-console-ext-comm/api-console-ext-comm.js';
import attributionTpl from './attribution-template.js';
import { close } from '@advanced-rest-client/arc-icons/ArcIcons.js';

export const isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
/**
Expand Down Expand Up @@ -127,6 +128,25 @@ export class ApiConsole extends AmfHelperMixin(LitElement) {
max-width: var(--api-console-main-max-width, 1600px);
}
.extension-banner {
align-items: center;
display: none;
border-bottom: 1px var(--api-console-extension-banner-border-bottom-color, rgba(0,0,0,0.12)) solid;
border-top: 1px var(--api-console-extension-banner-border-bottom-color, rgba(0,0,0,0.12)) solid;
margin-bottom: 12px;
box-sizing: border-box;
color: var(--api-console-extension-banner-color, rgba(0,0,0,0.54));
}
.extension-banner[active] {
display: flex;
flex-direction: row;
}
.extension-banner {
max-width: var(--api-console-main-max-width, 1600px);
}
.method-title {
flex: 1;
font-size: var(--arc-font-headline-font-size);
Expand All @@ -150,6 +170,13 @@ export class ApiConsole extends AmfHelperMixin(LitElement) {
overflow: auto;
height: 100%;
}
.icon {
fill: currentColor;
width: 24px;
height: 24px;
display: block;
}
`;
}

Expand All @@ -161,7 +188,29 @@ export class ApiConsole extends AmfHelperMixin(LitElement) {
}
}

_bannerMessage() {}
_bannerMessage() {
if (!this.allowExtensionBanner) {
return '';
}
return html`
<div class="extension-banner" ?active="${this._extensionBannerActive}">
<p>
For better experience install API console extension.
Get it from <a target="_blank"
class="store-link"
href="https://chrome.google.com/webstore/detail/olkpohecoakpkpinafnpppponcfojioa"
>
Chrome Web Store
</a>
</p>
<anypoint-icon-button
aria-label="Activate to close the message"
@click="${this.dismissExtensionBanner}"
>
<span class="icon">${close}</span>
</anypoint-icon-button>
</div>`;
}

_getRequestTemplate() {
const {
Expand Down Expand Up @@ -245,7 +294,7 @@ export class ApiConsole extends AmfHelperMixin(LitElement) {
.redirectUri="${redirectUri}"
.scrollTarget="${scrollTarget}"
@api-navigation-selection-changed="${this._apiNavigationOcurred}"
@tryit-requested="${this._tryitHandler}"></api-documentation>`;
></api-documentation>`;
}

_navigationTemplate() {
Expand Down Expand Up @@ -294,7 +343,7 @@ export class ApiConsole extends AmfHelperMixin(LitElement) {
*/
_helpersTemplate() {
return html`<paper-toast class="error-toast" id="apiLoadErrorToast"></paper-toast>
<api-console-ext-comm @has-extension-changed="${this._hasExtensionHandler}"></api-console-ext-comm>
<api-console-ext-comm @api-console-extension-installed="${this._hasExtensionHandler}"></api-console-ext-comm>
`;
}

Expand Down Expand Up @@ -503,6 +552,20 @@ export class ApiConsole extends AmfHelperMixin(LitElement) {
};
}

get allowExtensionBanner() {
return this._allowExtensionBanner;
}

set allowExtensionBanner(value) {
const old = this._allowExtensionBanner;
/* istanbul ignore if */
if (old === value) {
return;
}
this._allowExtensionBanner = value;
this._allowExtensionBannerChanged(value);
}

get selectedShape() {
return this._selectedShape;
}
Expand Down Expand Up @@ -653,16 +716,18 @@ export class ApiConsole extends AmfHelperMixin(LitElement) {
return;
}
this.amf = data;
this.dispatchEvent(new CustomEvent('model-load-success'));
}
/**
* Called by `_modelLocationChanged` when error occurred when getting API data.
* @param {Error} error
*/
_apiLoadErrorHandler(error) {
const message = 'Unable to load API model data. ' + (error.message ? error.message : '');
const message = `Unable to load API model data. ${error.message || ''}`;
const toast = this.shadowRoot.querySelector('#apiLoadErrorToast');
toast.text = message;
toast.opened = true;
this.dispatchEvent(new CustomEvent('model-load-error'));
}
/**
* Handler for the `tryit-requested` event. Sets current screen to
Expand Down Expand Up @@ -731,12 +796,6 @@ export class ApiConsole extends AmfHelperMixin(LitElement) {
composed: true
}));
}

_hasCorsExtensionChanged(value) {
if (value && this._extensionBannerActive) {
this._extensionBannerActive = false;
}
}
/**
* Computes method name for not-wide view, where the request panel
* has close button.
Expand Down Expand Up @@ -770,12 +829,24 @@ export class ApiConsole extends AmfHelperMixin(LitElement) {
}

_hasExtensionHandler(e) {
this._hasApicCorsExtension = e.detail.value;
this._hasCorsExtensionChanged(e.detail.value);
this._hasApicCorsExtension = true;
this._extensionBannerActive = false;
}

_closeDrawer() {
this.navigationOpened = false;
this.dispatchEvent(new CustomEvent('navigation-close'));
}

/**
* Controls behavior if the extension banner.
* @param {Boolean} value Current value of `allowExtensionBanner` property
*/
_allowExtensionBannerChanged(value) {
if (!value && this._extensionBannerActive) {
this._extensionBannerActive = false;
} else if (value && !this._hasApicCorsExtension) {
this._extensionBannerActive = true;
}
}
}
72 changes: 1 addition & 71 deletions src/ApiConsoleApp.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ 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';
import '@polymer/iron-media-query/iron-media-query.js';
import { menu, close } from '@advanced-rest-client/arc-icons/ArcIcons.js';
import { menu } from '@advanced-rest-client/arc-icons/ArcIcons.js';

export class ApiConsoleApp extends ApiConsole {
static get styles() {
Expand All @@ -35,25 +35,6 @@ export class ApiConsoleApp extends ApiConsole {
color: var(--api-console-toolbar-color, #fff);
}
.extension-banner {
align-items: center;
display: none;
border-bottom: 1px var(--api-console-extension-banner-border-bottom-color, rgba(0,0,0,0.12)) solid;
border-top: 1px var(--api-console-extension-banner-border-bottom-color, rgba(0,0,0,0.12)) solid;
margin-bottom: 12px;
box-sizing: border-box;
color: var(--api-console-extension-banner-color, rgba(0,0,0,0.54));
}
.extension-banner[active] {
display: flex;
flex-direction: row;
}
.extension-banner {
max-width: var(--api-console-main-max-width, 1600px);
}
.nav-content {
display: flex;
flex-direction: row;
Expand Down Expand Up @@ -109,13 +90,6 @@ export class ApiConsoleApp extends ApiConsole {
box-sizing: border-box;
flex: 1;
}
.icon {
fill: currentColor;
width: 24px;
height: 24px;
display: block;
}
`
];
}
Expand Down Expand Up @@ -216,20 +190,6 @@ export class ApiConsoleApp extends ApiConsole {
this._updateRenderInlineTyit();
}

get allowExtensionBanner() {
return this._allowExtensionBanner;
}

set allowExtensionBanner(value) {
const old = this._allowExtensionBanner;
/* istanbul ignore if */
if (old === value) {
return;
}
this._allowExtensionBanner = value;
this._allowExtensionBannerChanged(value);
}

get selectedShapeType() {
return this._selectedShapeType;
}
Expand Down Expand Up @@ -269,16 +229,6 @@ export class ApiConsoleApp extends ApiConsole {
this.shadowRoot.querySelector('app-drawer-layout').notifyResize();
}

/**
* Controls behavior if the extension banner.
* @param {Boolean} value Current value of `allowExtensionBanner` property
*/
_allowExtensionBannerChanged(value) {
if (!value && this._extensionBannerActive) {
this._extensionBannerActive = false;
}
}

/**
* Computes value for `_renderInlineTyit` property.
* @param {Boolean} wideLayout
Expand Down Expand Up @@ -340,26 +290,6 @@ export class ApiConsoleApp extends ApiConsole {
</app-header>`;
}

_bannerMessage() {
return html`
<div class="extension-banner" ?active="${this._extensionBannerActive}">
<p>
For better experience install API console extension.
Get it from <a target="_blank"
class="store-link"
href="https://chrome.google.com/webstore/detail/olkpohecoakpkpinafnpppponcfojioa">
Chrome Web Store
</a>
</p>
<anypoint-icon-button
aria-label="Activate to close the message"
@click="${this.dismissExtensionBanner}"
>
<span class="icon">${close}</span>
</anypoint-icon-button>
</div>`;
}

_apiDocumentationTemplate() {
return html`<section class="api-docs">
${super._apiDocumentationTemplate()}
Expand Down

0 comments on commit 3a700bb

Please sign in to comment.