I am planning to add multiple options to the status bar. Is it possible?
Like, If we click on the language type of a file we see multiple options in the same way.
how to create it?
Thanks
Use vscode.window.createStatusBarItem to place an item on the status bar. When the item is clicked, it runs a command, that itself runs vscode.window.showQuickPick to prompt the user to select from a list of items.
export function activate(context: vscode.ExtensionContext)
{
createStatusBarItem(context) ;
}
function createStatusBarItem(context: vscode.ExtensionContext)
{
// register a command that is invoked when the status bar
// item is clicked.
const myCommandId = 'myExtension.statusBarClick';
context.subscriptions.push(vscode.commands.registerCommand(myCommandId, async () =>
{
const pageType = await vscode.window.showQuickPick(
['shell', 'fetch rows, list in table'],
{ placeHolder: 'select type of web page to make' });
}));
// create a new status bar item that we can now manage
const item = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100);
item.command = myCommandId;
context.subscriptions.push(item);
item.text = `my command`;
item.tooltip = `status bar item tooltip`;
item.show();
}
Related
I am having an e2e testing pack with protractor-cucumber-framework and Chai for asserting.
I have a Feature file with a data table as below.
Scenario: Menu Validation
Given I am on the home page
When I do Hover over the menu item I should have the menu dropdown
|menu1 |
|menu2 |
|menu3 |
I have the step definition as below.
When(/^I do Hover over the menu item I should have the menu dropdown/, (dataTable) => {
let rootMenu : Array<string> = Array.from( dataTable.rawTable )
rootMenu.forEach((ele) => {
console.log(ele[0]);
element(by.id(ele[0])).isPresent().then(function(present) {
expect(present).to.equal(true);
});
});
});
Even if the menu element ID is not present this test step never fail, I checked further the expect(present).to.equal(true); never get executed. I am not sure what I am missing.
can you try this instead
When(/^I do Hover over the menu item I should have the menu dropdown/, async (dataTable) => {
let rootMenu : Array<string> = Array.from( dataTable.rawTable )
for (let i; i < rootMenu.length; i++) {
let ele = = rootMenu[i];
console.log(ele[0]);
expect(await element(by.id(ele[0])).isPresent()).to.equal(true);
}
})
I complete a vscode extension by vscode.languages.registerCompletionItemProvider(selector, new FuncCompletionProvider(),'.')
I want to listen which suggestion is selected. In the image below，when I click the current item I want to get the CompletionItem Info.
I tried to use the resolveCompletionItem function, but before the suggestion is selected resolveCompletionItem was triggered.
I tried to use the resolveCompletionItem function, but before the suggestion is selected resolveCompletionItem was triggered.
It appears this is intentional. Per their docs:
Note that this function is called when completion items are already showing in the UI or when an item has been selected for insertion
'selected' meaning selected in the list, not committed
The recommended way to gain insight on when a CompletionItem is inserted is using the CompletionProvider#command property:
An optional command that is executed after inserting this completion. Note that additional modifications to the current document should be described with the additionalTextEdits-property.
Example usage:
export function activate(context: vscode.ExtensionContext) {
context.subscriptions.push(
vscode.languages.registerCompletionItemProvider('html', new MyCompletionProvider),
vscode.commands.registerCommand("doTheThing", () => {
console.log('did the thing!!');
});
);
}
class MyCompletionProvider implements vscode.CompletionItemProvider {
provideCompletionItems(document: vscode.TextDocument, position: vscode.Position, token: vscode.CancellationToken, context: vscode.CompletionContext): vscode.ProviderResult<vscode.CompletionItem[] | vscode.CompletionList> {
const myHTMLCompletionItem: vscode.CompletionItem = new vscode.CompletionItem("myHTML");
myHTMLCompletionItem.command = {
title: '',
command: 'doTheThing'
};
return new vscode.CompletionList([myHTMLCompletionItem]);
}
}
I looked everywhere on the internet but I couldn't find any clear documentation or some examples to create my verySimplePlugin for videoJS 5 (Since it uses ES6).
I just want to add a button next to the big play button... Can someone help me?
Thanks...
PS: I'm using it in angularJS but I guess this can not a problem
This is how you can add download button to the end of control bar without any plugins or other complicated code:
var vjsButtonComponent = videojs.getComponent('Button');
videojs.registerComponent('DownloadButton', videojs.extend(vjsButtonComponent, {
constructor: function () {
vjsButtonComponent.apply(this, arguments);
},
handleClick: function () {
document.location = '/path/to/your/video.mp4'; //< there are many variants here so it is up to you how to get video url
},
buildCSSClass: function () {
return 'vjs-control vjs-download-button';
},
createControlTextEl: function (button) {
return $(button).html($('<span class="glyphicon glyphicon-download-alt"></span>').attr('title', 'Download'));
}
}));
videojs(
'player-id',
{fluid: true},
function () {
this.getChild('controlBar').addChild('DownloadButton', {});
}
);
I used 'glyphicon glyphicon-download-alt' icon and a title for it so it fits to the player control bar styling.
How it works:
We registering a new component called 'DownloadButton' that extends built-in 'Button' component of video.js lib
In constructor we're calling constructor of the 'Button' component (it is quite complicated for me to understand it 100% but it is similar as calling parent::__construct() in php)
buildCSSClass - set button classes ('vjs-control' is must have!)
createControlTextEl - adds content to the button (in this case - an icon and title for it)
handleClick - does something when user presses this button
After player was initialized we're adding 'DownloadButton' to 'controlBar'
Note: there also should be a way to place your button anywhere within 'controlBar' but I haven't figured out how because download button is ok in the end of the control bar
This is how I created a simple button plugin for videojs 5:
(function() {
var vsComponent = videojs.getComponent('Button');
// Create the button
videojs.SampleButton = videojs.extend(vsComponent, {
constructor: function() {
vsComponent.call(this, videojs, null);
}
});
// Set the text for the button
videojs.SampleButton.prototype.buttonText = 'Mute Icon';
// These are the defaults for this class.
videojs.SampleButton.prototype.options_ = {};
// videojs.Button uses this function to build the class name.
videojs.SampleButton.prototype.buildCSSClass = function() {
// Add our className to the returned className
return 'vjs-mute-button ' + vsComponent.prototype.buildCSSClass.call(this);
};
// videojs.Button already sets up the onclick event handler, we just need to overwrite the function
videojs.SampleButton.prototype.handleClick = function( e ) {
// Add specific click actions here.
console.log('clicked');
};
videojs.SampleButton.prototype.createEl = function(type, properties, attributes) {
return videojs.createEl('button', {}, {class: 'vjs-mute-btn'});
};
var pluginFn = function(options) {
var SampleButton = new videojs.SampleButton(this, options);
this.addChild(SampleButton);
return SampleButton;
};
videojs.plugin('sampleButton', pluginFn);
})();
You can use it this way:
var properties = { "plugins": { "muteBtn": {} } }
var player = videojs('really-cool-video', properties , function() { //do something cool here });
Or this way:
player.sampleButton()
I have two menus 'Setup' and 'Reports' with sub-menus 'admin users','Reports dashboard','partner dashboard','partner relationship' etc marked with red color.
I want to navigate or click using protractor locators but unable to find how to select these menus that have no id and common CSS. I want something like this
var userTypes = element.all(by.repeater('t in user_userTypes'));</br>
userTypes.get(2).click()
From what I see, these elements are navigation menu items, Setup and Reports are high-level menus and Admin Users, Reports Dashboard, Partner dashboard, Partner Relationship and Grading Data are submenus. To open a submenu, I assume, you should click the appropriate menu.
Let's make a reusable function that would accept a menu label and a desired submenu label and use by.repeater() locator filtering the menus by text:
function selectMenu(menuLabel, submenuLabel) {
var menu = element.all(by.repeater("mi in menuItems")).filter(function (menu) {
return menu.all(by.tagName("a")).first().getText().then(function (text) {
return text.indexOf(menuLabel) === 0;
});
}).first();
menu.click(); // open up menu
var submenu = menu.all(by.repeater("s in mi.subMenuItems")).filter(function (submenu) {
return submenu.all(by.tagName("a")).first().getText().then(function (text) {
return text.indexOf(submenuLabel) === 0;
});
}).first();
submenu.click(); // select submenu
}
Usage samples:
selectMenu("Setup", "Admin Users");
selectMenu("Reports", "Reports Dashboard");
Define a method and pass the 'hrefValue', filter by anchor tag.
var clickParticular = function(hrefValue){
element.all(by.tagName('a')).filter(function(element, index) {
return element.getAttribute('href').then(function (text) {
return text === hrefValue;
});
}).then(function(filteredElements) {
filteredElements[0].click().then(function() {
});
});
}
In my firefox sdk addon, I want to use a custom webpage from my data directory as my settings/about page.
But I am having trouble keeping tabs on the tab!
So I have a button that calls the OptionsPanel() function to open my webpage in a new tab. Now, I want to make it so if the user forgets that tab is open and pushes the button again, that it activates the already-open settings tab. That means I need to know that the tab is open and I need to be able to switch to it if it is OR open it if it is not already open.
Here is what I've come up with so far, but it doesn't work; it just always opens a new tab. I don't even know if I'm barking up the right tree.
const tabs = require("sdk/tabs");
var optionsTab;
function OptionsPanel(){
var opsTab = GetTabByID(optionsTab.id);
if(opsTab == null){
tabs.open( data.url("OptionsPanel.html") );
optionsTab.id = tabs.tab.id; <======errors out as undefined
}else{
opsTab.activate();
}
}
//return a handle to the tab that matches specified tab id
function GetTabByID(whatid){
for(let thistab of tabs){
if(thistab.id = whatid){
return thistab;
}
}
return null;
}
So, here are my goals:
Open my page in a new tab if it isn't already open.
If the tab is already open, then switch to that tab.
If the page is open when the browser loads, then be ready to switch to that tab if the user pushes the options button.
Why would you think tabs module has a tab property?
Normally you would use the activeTab property instead. However it does not get updated immediately after tabs.open is called. One has to use tabs[tabs.length - 1] instead.
const tabs = require("sdk/tabs");
var optionsTabId;
function OptionsPanel(){
var opsTab = GetTabByID(optionsTabId);
if (opsTab == null) {
tabs.open( data.url("OptionsPanel.html") );
optionsTabId = tabs[tabs.length - 1].id;
} else {
opsTab.activate();
}
}
Additionally, you made a mistake in GetTabByID.
//return a handle to the tab that matches specified tab id
function GetTabByID(whatid){
for(let thistab of tabs){
if(thistab.id == whatid){ // use == to compare
return thistab;
}
}
return null;
}
Keep in mind this assumes that it is not possible to navigate away from your options tab. I would check optsTab.url just in case.
Alternatively you could make use of the tab event interface
const tabs = require("sdk/tabs");
const OPTIONS_URL = data.url("OptionsPanel.html");
var optionsTab = null;
function OptionsPanel(){
if (optionsTab == null) {
tabs.open(OPTIONS_URL);
tabs.once('ready', function(tab) {
optionsTab = tab;
optionsTab.on('ready', function readyListener(tab) {
if (tab.url !== OPTIONS_URL) {
optionsTab.off('ready', readyListener);
optionsTab = null;
}
})
optionsTab.once('close', function(tab) {
optionsTab = null;
})
});
} else {
optionsTab.activate();
}
}