Merge pull request #1320 from ethereum/closeTabs

Beginner onboarding
pull/1394/head^2
bunsenstraat 3 years ago committed by GitHub
commit 80d1fe4d48
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      apps/remix-ide-e2e/src/helpers/init.ts
  2. 2
      apps/remix-ide-e2e/src/tests/pluginManager.spec.ts
  3. 3
      apps/remix-ide-e2e/src/tests/solidityUnittests.spec.ts
  4. 1
      apps/remix-ide-e2e/src/tests/verticalIconsPanel.spec.ts
  5. 14
      apps/remix-ide/src/app.js
  6. 14
      apps/remix-ide/src/app/components/vertical-icons.js
  7. 2
      apps/remix-ide/src/app/tabs/test-tab.js
  8. 10
      apps/remix-ide/src/assets/js/intro.min.js
  9. 7
      apps/remix-ide/src/index.html
  10. 54
      apps/remix-ide/src/walkthroughService.js
  11. 1
      libs/remix-ui/workspace/src/lib/remix-ui-workspace.css
  12. 5
      package-lock.json
  13. 1
      package.json

@ -7,6 +7,8 @@ export default function (browser: NightwatchBrowser, callback: VoidFunction, url
.url(url || 'http://127.0.0.1:8080')
.pause(5000)
.switchBrowserTab(0)
.waitForElementVisible('[id="remixTourSkipbtn"]')
.click('[id="remixTourSkipbtn"]')
.fullscreenWindow(() => {
if (preloadPlugins) {
initModules(browser, () => {

@ -114,7 +114,7 @@ module.exports = {
.click('*[data-id="localPluginRadioButtonsidePanel"]')
.click('*[data-id="modalDialogModalFooter"]')
.modalFooterOKClick()
.waitForElementVisible('*[data-id="pluginManagerComponentDeactivateButtonremixIde"]', 60000)
.waitForElementVisible('*[data-id="pluginManagerComponentDeactivateButtonremixIde"]', 100000)
},
'Should display error message for creating already existing plugin': function (browser: NightwatchBrowser) {

@ -84,8 +84,7 @@ module.exports = {
.scrollAndClick('*[data-id="testTabRunTestsTabRunAction"]')
.pause(2000)
.click('*[data-id="testTabRunTestsTabStopAction"]')
.waitForElementContainsText('*[data-id="testTabRunTestsTabStopAction"]', 'Stopping', 60000)
.waitForElementContainsText('*[data-id="testTabSolidityUnitTestsOutput"]', '/tests/ks2b_test.sol', 120000)
.waitForElementContainsText('*[data-id="testTabSolidityUnitTestsOutput"]', '/tests/ks2b_test.sol', 200000)
.notContainsText('*[data-id="testTabSolidityUnitTestsOutput"]', '/tests/4_Ballot_test.sol')
.notContainsText('*[data-id="testTabSolidityUnitTestsOutput"]', '/tests/simple_storage_test.sol')
.waitForElementContainsText('*[data-id="testTabTestsExecutionStopped"]', 'The test execution has been stopped', 60000)

@ -22,6 +22,7 @@ module.exports = {
'Checks vertical icons panel contex menu deactivate': function (browser: NightwatchBrowser) {
browser.waitForElementVisible('div[data-id="remixIdeIconPanel"]', 10000)
.waitForElementVisible('*[data-id="verticalIconsKinddebugger"]', 7000)
.pause(5000)
.rightClick('[data-id="verticalIconsKinddebugger"]')
.click('*[id="menuitemdeactivate"]')
.click('*[data-id="verticalIconsKindsettings"]')

@ -7,6 +7,7 @@ import PanelsResize from './lib/panels-resize'
import { RemixEngine } from './remixEngine'
import { RemixAppManager } from './remixAppManager'
import { FramingService } from './framingService'
import { WalkthroughService } from './walkthroughService'
import { MainView } from './app/panels/main-view'
import { ThemeModule } from './app/tabs/theme-module'
import { NetworkModule } from './app/tabs/network-module'
@ -112,7 +113,11 @@ const css = csjs`
fill: var(--secondary);
}
.centered svg polygon {
fill: var(--secondary);
fill : var(--secondary);
}
.onboarding {
color : var(--text-info);
background-color : var(--info);
}
.matomoBtn {
width : 100px;
@ -496,7 +501,12 @@ Please make a backup of your contracts and start using http://remix.ethereum.org
// Load and start the service who manager layout and frame
const framingService = new FramingService(sidePanel, menuicons, mainview, this._components.resizeFeature)
framingService.start(params)
if (params.embed) framingService.embed()
framingService.start(params)
const walkthroughService = new WalkthroughService(localStorage)
if (!params.code) {
walkthroughService.start()
}
}

@ -69,12 +69,14 @@ export class VerticalIcons extends Plugin {
title = title.replace(/^\w/, c => c.toUpperCase())
this.icons[name] = yo`
<div
class="${css.icon}"
class="${css.icon} m-2"
onclick="${() => { this.toggle(name) }}"
plugin="${name}"
title="${title}"
oncontextmenu="${(e) => this.itemContextMenu(e, name, documentation)}"
data-id="verticalIconsKind${name}">
data-id="verticalIconsKind${name}"
id="verticalIconsKind${name}"
>
<img class="image" src="${icon}" alt="${name}" />
</div>`
this.iconKind[kind || 'none'].appendChild(this.icons[name])
@ -249,13 +251,14 @@ export class VerticalIcons extends Plugin {
render () {
const home = yo`
<div
class="${css.homeIcon}"
class="m-1 mt-2 ${css.homeIcon}"
onclick="${async () => {
await this.appManager.activatePlugin('home')
this.call('tabs', 'focus', 'home')
}}"
plugin="home" title="Home"
data-id="verticalIconsHomeIcon"
id="verticalIconsHomeIcon"
>
${basicLogo()}
</div>
@ -270,6 +273,7 @@ export class VerticalIcons extends Plugin {
this.iconKind.settings = yo`<div id='settingsIcons' data-id="verticalIconsSettingsIcons"></div>`
this.view = yo`
<div class="h-100">
<div class=${css.icons}>
${home}
${this.iconKind.fileexplorer}
@ -281,6 +285,7 @@ export class VerticalIcons extends Plugin {
${this.iconKind.none}
${this.iconKind.settings}
</div>
</div>
`
return this.view
}
@ -292,7 +297,6 @@ const css = csjs`
width: 42px;
height: 42px;
margin-bottom: 20px;
margin-left: -5px;
cursor: pointer;
}
.homeIcon svg path {
@ -302,8 +306,6 @@ const css = csjs`
fill: var(--primary);
}
.icons {
margin-left: 10px;
margin-top: 15px;
}
.icon {
cursor: pointer;

@ -70,9 +70,9 @@ module.exports = class TestTab extends ViewPlugin {
})
} catch (e) {
console.log(e)
}
this.data.allTests.push(file)
this.data.selectedTests.push(file)
}
})
this.on('filePanel', 'setWorkspace', async () => {

File diff suppressed because one or more lines are too long

@ -30,6 +30,7 @@
<title>Remix - Ethereum IDE</title>
<link rel="stylesheet" href="assets/css/pygment_trac.css">
<link rel="icon" type="x-icon" href="assets/img/icon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/4.1.0/introjs.min.css">
<script src="assets/js/browserfs.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- Matomo -->
@ -56,6 +57,7 @@
}
</script>
<!-- End Matomo Code -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/introjs.min.css">
</head>
<body>
<script>
@ -112,7 +114,10 @@
})
}
</script>
<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="vendor.js" type="module"></script>
<script src="runtime.js" type="module"></script>
<script src="polyfills.js" type="module"></script>
<script src="vendor.js" type="module"></script>
<script src="https://kit.fontawesome.com/41dd021e94.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="assets/js/intro.min.js"></script>
</body>
</html>

@ -0,0 +1,54 @@
const introJs = require('intro.js')
export class WalkthroughService {
constructor (params) {
this.params = params
}
start (params) {
if (!localStorage.getItem('hadTour_initial')) {
introJs().setOptions({
steps: [{
title: 'Welcome to Remix IDE',
intro: 'Click to launch the Home tab that contains links, tips, and shortcuts..',
element: document.querySelector('#verticalIconsHomeIcon'),
tooltipClass: 'bg-light text-dark',
position: 'right'
},
{
element: document.querySelector('#compileIcons'),
title: 'Solidity Compiler',
intro: 'Having selected a .sol file in the File Explorers (the icon above), compile it with the Solidity Compiler.',
tooltipClass: 'bg-light text-dark',
position: 'right'
},
{
title: 'Deploy your contract',
element: document.querySelector('#runIcons'),
intro: 'Choose a chain, deploy a contract and play with your functions.',
tooltipClass: 'bg-light text-dark',
position: 'right'
}
]
}).onafterchange((targetElement) => {
const header = document.getElementsByClassName('introjs-tooltip-header')[0]
if (header) {
header.classList.add('d-flex')
header.classList.add('justify-content-between')
header.classList.add('text-nowrap')
header.classList.add('pr-0')
}
const skipbutton = document.getElementsByClassName('introjs-skipbutton')[0]
if (skipbutton) {
skipbutton.classList.add('ml-3')
skipbutton.classList.add('text-decoration-none')
skipbutton.id = 'remixTourSkipbtn'
}
}).start()
localStorage.setItem('hadTour_initial', true)
}
}
startFeatureTour () {
}
}

@ -11,6 +11,7 @@
position : relative;
width : 100%;
padding-left : 6px;
padding-right : 6px;
padding-top : 6px;
}
.remixui_fileExplorerTree {

5
package-lock.json generated

@ -20124,6 +20124,11 @@
"resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
"integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA=="
},
"intro.js": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/intro.js/-/intro.js-4.1.0.tgz",
"integrity": "sha512-+Y+UsP+yvqqlEOjFExMBXKopn3nzwc91PaUl0SrvqiVs6ztko1DzfkoXR2AnfirZVZZhr5Aej6wlXRlvIkuMcA=="
},
"invariant": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",

@ -158,6 +158,7 @@
"form-data": "^4.0.0",
"fs-extra": "^3.0.1",
"http-server": "^0.11.1",
"intro.js": "^4.1.0",
"isbinaryfile": "^3.0.2",
"isomorphic-git": "^1.8.2",
"jquery": "^3.3.1",

Loading…
Cancel
Save