Angular bootstrap modal - dialog

I'm using ui-bootstrap-tpl version 2.4.0 with Angular Dialog Service, and I have a problem with modal.
Problem occurs when I close modal:
If I click OK, it closed and no error.
If I click Cancel, it closed but have an error in console window:
Possibly unhandled rejection: cancel
If I click outside modal, it closed but have an error:
Possibly unhandled rejection: backdrop click
Anyway to fix it? Thanks alot!

You forgot to handle the dismiss case of the modal.
Here's an updated plunker: https://plnkr.co/edit/M5OnOcJJG65pinWe2iKt
Essentially, you need to do something like this:
dialog.result.then(
function () {
// success case
console.log('ok');
},
function () {
// dismiss case
console.log('cancel');
}
);

Related

How to initialize Chrome extension context menus under Manifest V3 service workers? [duplicate]

I'm working on a simple link sharing extension (pinboard, readability, delicious, etc), and have a question about how to properly deal with a context menu item. In my non-persistent background page I call chrome.contextMenus.create and chrome.contextMenus.onClicked.addListener to setup/respond to the context menu.
The context menu entry works as expected. But the background page is showing the following error (right after it starts and before I've used the entry) :
contextMenus.create: Cannot create item with duplicate id id_share_link at chrome-extension://.../share.js:52:30 lastError:29 set
This made me realize that at no point do I remove the item or the listener. Knowing little about javascript and extensions, I'm left wondering if I'm doing everything correctly. I'm assuming this top-level code is going to re-execute every time the background page is invoked. So there are going to be redundant calls to create and addListener (and hence the error I see being logged).
I clearly can't do cleanup in response to suspend, as these calls need to be present to wake up the background script.
Should I be handling things differently?
If you want to use an event page, ie a non-persistent background page, as you call it, you should register a context menu via contextMenus.create in the event handler of runtime.onInstalled, as these context menu registrations ”persist“ anyways.
You have to add the listener-function for the contextMenus.onClicked event every time the event page gets reloaded, though, as the registration of your wish to listen on that event persists, while the handler callback itself does not. So generally don't call contextMenus.onClicked.addListener from runtime.onInstalled, but from top level or other code, that is guaranteed to be executed each time the event page loads.[1]
You can handle it one of two ways:
You can add the context menu and the listeners on install using:
chrome.runtime.onInstalled.addListener(function() {
/* Add context menu and listener */
});
You can remove the context menu and listener, and then re-add it each time the file is called.
[solution may no longer be the case, read comment]
runtime.onInstalled is not triggered if you disable/enable your extension.
My solution is to always add menu items and swallow errors:
'use strict';
{
let seqId = 0;
const createMenuLinkEntry = (title, tab2url) => {
const id = (++seqId).toString();
chrome.contextMenus.create({
id: id,
title: title,
contexts: ['browser_action'],
}, () => {
const err = chrome.runtime.lastError;
if(err) {
console.warn('Context menu error ignored:', err);
}
});
};
createMenuLinkEntry('Go to Google', (tab) => 'https://google.com');
createMenuLinkEntry('Go to GitHub', (tab) => 'https://github.com');
} // namespace

elementIsNotVisible throwing noSuchElementError in Selenium

I wrote a test to ensure a slideout panel closes in my selenium tests using node js. Whenever I close the panel I use the condition elementIsNotVisible. However an error is thrown, noSuchElementError. This error is technically correct because the element should no longer be on the page, but shouldn't elementIsNotVisible be correct as well?
Test.js file:
await driver.wait(until.elementIsVisible(testPage.addAllAnnotationsButton(driver)), 20000);
await testPage.exitGeneAnnotationsButton(driver).click();
await driver.wait(until.elementIsNotVisible(testPage.addAllAnnotationsButton(driver)), 20000);
Page.js file:
const testPage = {
addAllAnnotationsButton: driver => driver.findElement(By.css(testPage.addAllAnnotationsButtonSELECTOR))
}
Error message(Note- Error message is thrown on the line where elementIsNotVisible is called):
NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"div.slideout.opened:nth-child(6) button.ui.button.medium:nth-child(2)"}
Edit 1: Please note, I have tried using stalenessOf and I still receive the same error.
As you have mentioned that when you close the panel, you use the condition elementIsNotVisible :
Here once you have closed the panel , the respective web element is not present in DOM. That is the reason you are getting NoSuchElement exception.
Suggestion : Use invisiblityofElement instead of elementIsNotVisible.
Though there are many reasons behind NoSuchElement Exception, one of the most common is try to interact with element/elements present in frame/iframe without switching the focus of web driver.
Hope this will help.

mdToast cannot resolve a promise with itself error

I keep running into an error in the console when my $mdToast fires. It says: TypeError: [$q:qcycle] Expected promise to be resolved with value other than itself '{}' The toast works fine, but I would prefer not to have that error whenever it pops up. Here is the function:
let showSuccess = this.mdToast.show({
template: '<md-toast>User added successfully!</md-toast>',
hideDelay: 33000,
position: 'top'
});
this.mdToast.hide(showSuccess);
Does anyone know what might be causing this? Thanks
You don't need to pass toast itself to hide function. Just use it without any parameters:
this.mdToast.hide();
According to the reference it hides an existing toast. Optional response parameter is actually used for another purpose (promises).
$mdToast.hide([response]);
Hide an existing toast and resolve the promise returned from $mdToast.show().

Notification.requestPermission().then() always return Promise object instead of resolved reject value in console

executed following code in the console
Notification.requestPermission(function(status) {
console.log('Notification permission status:', status);
});
in Chrome v 61
return
Notification permission status: "granted"
if already given otherwise pop-up appears near the left side of the address bar with Allow and Block option.
Although after several attempts then chrome also stop displaying the pop-up and gives information to the user in console.
and return
Notification permission status: "denied"
with message
Notifications permission has been blocked as the user has dismissed
the permission prompt several times. See
https://www.chromestatus.com/features/6443143280984064 for more
information.
BUT
in Firefox developer Edition v 57
return Promise object as below
Promise { <state>: "pending" }
why am I not getting the console message and neither does pop-up appears.
So my question is do I need to configure something in firefox?
or I am lacking something.
Note: I have tried both variations of requestPermission function suggested on MDN.
Promises and callbacks are executed asynchronously. What you see when you run this if Firefox is the temporary return value of the promise that the console.log will get executed in the future. The console.log is not however getting executed yet.
>> Notification.requestPermission().then(function(permission) { console.log(permission); });
← Promise { <state>: "pending" }
Basically what you see is working as intended. It's similar to doing something like this:
>> let thing = Notification.requestPermission().then(function(permission) { console.log(permission); });
console.log(thing);
Promise { <state>: "pending" }
← undefined
granted
The console.log(thing) is logging the promise that work will happen in the future but the permission grant and the console.log(permission) has not been executed yet.
Also the Notification.requestPermission(callback); format has been deprecated and should not be used.

Chrome extension icon change issue

I'm developing a Chrome extension and have a strange problem with icon change on-the-fly.
In my popup.html I have a button by clicking on which I want to change the icon of the extension in the browser. E.g. from colored one to black and white (when application is inactive).
So the function which is responsible for this:
function toggleActivated(){
localStorage.isActive = toBool(localStorage.isActive) ? false : true;
$('#activate-disactivate span').text(toBool(localStorage.isActive) == false ? 'Включить' : 'Выключить');
chrome.browserAction.setIcon({path: toBool(localStorage.isActive) ? '48.png' : '48_bw.png'});
//window.close();
}
But the problem is that I want to close popup after the icon changed. If I use the window.close() at the end - then the icon is not changed, but if it is commented out - then the icon is changed fine.
Why is there a conflict between chrome.browserAction.setIcon() and window.close()?
It sounds like chrome.browserAction.setIcon is getting fired asynchronously but the popup is getting closed before it finishes. You could try adding a 500ms setTimeout before closing.
You should also file a bug report at new.crbug.com.
I know this is old, but I was having the same problem and abraham was right when he said that chrome.browserAction.setIcon was being called asynchronously. But I don't think that setting a timeout is the best answer.
If you check the setIcon documentation you can see that this method takes a function callback as parameter. That's where you should call window.close(). Like this:
chrome.browserAction.setIcon({ path: icon_path }, function() {
window.close();
});
UPDATE:
As niraj.nijju pointed in the comment below, you can pass a tabId param to the setIcon function to limit the scope of the change.

Resources