1+ /******************************************************************************
2+ Copyright:: 2020- IBM, Inc
3+
4+ Licensed under the Apache License, Version 2.0 (the "License");
5+ you may not use this file except in compliance with the License.
6+ You may obtain a copy of the License at
7+
8+ http://www.apache.org/licenses/LICENSE-2.0
9+
10+ Unless required by applicable law or agreed to in writing, software
11+ distributed under the License is distributed on an "AS IS" BASIS,
12+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+ See the License for the specific language governing permissions and
14+ limitations under the License.
15+ *****************************************************************************/
16+
17+ import React from "react" ;
18+
19+ import { Grid , Column , Button } from '@carbon/react' ;
20+ import { getBGController } from "../../background/backgroundController" ;
21+ import { getDevtoolsAppController } from '../devtoolsAppController' ;
22+ import { BrowserDetection } from '../../util/browserDetection' ;
23+ import "./checkerViewAware.scss" ;
24+ import chromeImg from "../../../assets/img/Chrome.svg" ;
25+ import firefoxImg from "../../../assets/img/Firefox.svg" ;
26+ import edgeImg from "../../../assets/img/Edge.svg" ;
27+
28+
29+ interface CheckerViewAwareState {
30+ }
31+
32+ interface CheckerViewAwareProps {
33+ }
34+ let count = 0 ;
35+ export default class CheckerViewAware extends React . Component < CheckerViewAwareProps , CheckerViewAwareState > {
36+ private bgController = getBGController ( ) ;
37+ state : CheckerViewAwareState = {
38+ }
39+
40+ myCount = count ++ ;
41+ async componentDidMount ( ) : Promise < void > {
42+ this . bgController . addSettingsListener ( async ( settings ) => {
43+ this . setState ( { settings } ) ;
44+ } ) ;
45+ let settings = await this . bgController . getSettings ( ) ;
46+ this . setState ( { settings } ) ;
47+ settings . checkerViewAwareFirstTime = false ;
48+ await this . bgController . setSettings ( settings ) ;
49+ }
50+
51+
52+
53+ render ( ) {
54+ BrowserDetection . setDarkLight ( ) ;
55+ let usrAgent = navigator . userAgent ;
56+ let elementTabImg : string | undefined ;
57+ if ( usrAgent . includes ( "Edg/" ) ) {
58+ elementTabImg = edgeImg ;
59+ } else if ( usrAgent . includes ( "Firefox/" ) ) {
60+ elementTabImg = firefoxImg ;
61+ } else {
62+ elementTabImg = chromeImg ;
63+ }
64+ return < aside className = "checkerViewAware" >
65+ { /* CheckerViewAware Title */ }
66+ < Grid style = { { marginTop : "1rem" , marginBottom : "1rem" } } >
67+ < Column sm = { { span : 4 } } md = { { span : 8 } } lg = { { span : 8 } } >
68+ < span className = "modalHeading" > Accessibility Assessment panel</ span >
69+ </ Column >
70+ </ Grid >
71+ { /* Left Column */ }
72+ < Grid >
73+ < Column sm = { { span : 4 } } md = { { span : 8 } } lg = { { span : 8 } } >
74+ < div className = "modalContent" >
75+ < div style = { { marginBottom :"1rem" } } >
76+ You are in the < b > Accessibility Assessment</ b > panel of the Checker.
77+ </ div >
78+ < div style = { { marginBottom :"1rem" } } >
79+ For code scanning functionality, navigate to the Accessibility Checker
80+ panel within the Elements panel in the Dev Tools. Be aware that this
81+ panel can be nested within the dev tools navigation bar.
82+ </ div >
83+ < div style = { { marginBottom :"1rem" } } >
84+ < img src = { elementTabImg } alt = "Checker view on Elements Tab" > </ img >
85+ </ div >
86+ </ div >
87+ < div >
88+ < Button
89+ id = "checkerViewAwareButton"
90+ kind = "primary"
91+ iconDescription = "Dismiss one time info" tooltipPosition = "left"
92+ onClick = { async ( ) => {
93+ let devtoolsAppController = getDevtoolsAppController ( ) ;
94+ if ( devtoolsAppController . getSecondaryView ( ) === "checkerViewAware" ) {
95+ devtoolsAppController . closeSecondary ( ) ;
96+ setTimeout ( ( ) => {
97+ devtoolsAppController . setSecondaryView ( "splash" ) ;
98+ } , 1500 ) ;
99+ }
100+ } }
101+ size = "sm"
102+ > Dismiss</ Button >
103+ </ div >
104+ </ Column >
105+ </ Grid >
106+ </ aside >
107+ }
108+ }
0 commit comments