Google cloud shell missing web preview button - shell

I stepped away from my sample Transport-Tracker project, which had been working just fine.
Now, when I run the Google Cloud Shell, the web preview button is no longer present. Also missing is the file transfer button. The Cloud Shell only includes the "Send key combination" and "Terminal settings" buttons.
I've tried this in both IE and Chrome with the same result.
What am I doing wrong?
Thanks.

This is due to a CSS bug. When you have the Google Cloud Platform navigation panel on the left opened, then open a Cloud Shell, the Web Preview button is pushed off the screen.
To fix, simply close the navigation panel by pressing the hamburger button in the top left. (You can reopen the panel, and the Web Preview button will be fixed.)

Lo and behold, today the web preview icon appears. I suspect it may have something to do with trying to open the full cloud shell before a connection to the projector has been established.

Related

Inspecting a browser's Developer Tools [duplicate]

According to Google this can be accomplished by visiting "chrome-devtools://devtools/devtools.html" in Chrome but now visiting that page in the stable version of Chrome (or Canary), just shows a 99% stripped version of the inspector.
To reiterate my "title" this is in reference to "inspecting" the inspector. Not just inspecting a normal webpage.
And while I don't think it's necessary to know to resolve the issue, I"m inspecting the inspector so I can style it as discussed by Paul Irish and here: https://darcyclarke.me/articles/development/skin-your-chrome-inspector/
Follow these easy steps!
Press Command+Option+i (Ctrl+Shift+i on Windows) to open DevTools.
Make sure that the developer tools are undocked into a new window. You may have to undock from the menu:
Press Command+Option+i again on this new window.
That will open the DevTools on the DevTools.
You can redock the page's DevTools if you want.
If it's not already, select Elements — it's the first icon at the top of the inspector.
A little beyond the scope of your question, but still valid in understanding why you're experiencing your problem can be found by understanding how Chrome Developer Tools: Remote Debugging works.
Open chrome://inspect
Open the inspector on that page (cmd + alt + i)
Scroll to the bottom of the page, under the Other section click the inspect link
The URL in the Other section should look something like this:
chrome-devtools://devtools/devtools.html?docked=true&dockSide=bottom&toolbarColor=rgba(230,230,230,1…
EDIT: they've fancied up the chrome:inspect page so you have to click the Other header on the left to get this to work now.
I just got this to work. The key is that you have to start up chrome in 'Remote Debugging' mode.
on OSX, open an terminal window and execute the following:
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
On windows, Its
chrome.exe --remote-debugging-port=9222
(better windows instructions can be found here: https://developers.google.com/chrome-developer-tools/docs/remote-debugging#remote)
This will start up an instance of chrome, that will send debugging messages to a local webserver on port 9222.
If you access that web service, it will give you the ability to use the inspector to inspect any chrome window that is running. Since we want to inspect the inspector, we need to start an inspector window first (As above Use the shortcut keys; for Mac it's Command+option+i.)
Now, go ahead and navigate to
http://localhost:9222
It will present you with a list of windows to display in the debugger. Select the window that starts with "Developer Tools" and you'll be able to inspect the css for the inspector.
Its hard to see in the image below, but on the left I have my chrome window pointing at the remote debugger, highlighting one of the toolbar labels. On the right you see it lit up with the tooltip just as if we were debugging a web page.
A few weeks ago somebody pointed this out in stackoverflow's "javscript" chatroom. First, and very importantly, make sure the inspector is undocked from your browser window. Then it's just a matter of opening a inspector window and then inspecting that window. In windows it's CtrlShiftI (Edit: I said, CtrlShiftI but that brings up the console inspecting the console... you should be able to navigate back and forth.) for the keyboard shortcut. (Other keyboard combos for other options and OSes here and here.) Just do that twice and you're good.
Edit: ok, you're probably confused as to undock the window. This is what you'd click if it's docked..
Edit II: I'm not quite sure why you can't inspect. JDavis's answer is consistent with the Google Docs for Apple computers. If you're using Linux it appears to be the same as Windows. You supposed to hit the inspector key combination while the focus is over the inspector window.

Open a popup (e.g. native browser) from a Teams desktop client app tab

Is there any way to pop open a browser window from a Teams app tab (desktop client)?
I came across the following link and from my interpretation of the reply it seems it's not possible.
Quoted from link for reference:
Unfortunately it’s not possible to use window.open in Teams tabs. Because we block opening of new windows to arbitrary sites within our Teams Desktop Client (for security reasons) you need to always use microsoftTeams.authentication.authenticate (if you want a popup window) or microsoftTeams.tasks.startTask (if you want an iframe-based dialog) to open a secondary app view.
It's not very clear to me what the microsoftTeams.authentication.authenticate reference above is suggesting.
Alternatively, if not a browser window, can we attempt to open another app installed on the device (e.g. Excel)?
Thanks in advance!
Are you just wanting to launch a new browser entirely? If so, a regular anchor tag, with a target attribute (e.g. ...), will work fine (I'm doing this in a tab myself, and it's working without problem).
You could try using a TaskModule to open a custom HTML/ Javascript or an iframe based widget inside a popup from within your Teams tab.
microsoftTeams.authentication.authenticate() will let you Authenticate the user against you tab. You can find the docs for this here.

How do I test a program made with Google Drive API

Beginner question here. Let's say I have my program in Javascript and it's connected to a server. The goal of this program would be that once you right click on a document, it appears in the "Open With" tab. How would I be able to test that this works? How would i get it to appear within this tab? This is probably some dumb oversight on my part,
Thanks in advance.
What you're trying to do is Connect apps to Drive. To do that, your app must be a Chrome app and it must be uploaded on the Chrome store.
If you've done that, follow these steps:
Click the "My Drive" dropdown button in Google Drive.
Click "More" amongst the selection.
Click "+ Connect more apps".
A window will appear showing different apps. Type the name of your app in the Search bar.
Choose the app and click "Connect" button.
You're app will now appear in the Open-with contextmenu (right-clicking) if it is able to open your Drive files.

Chrome Debugging tutorial appears not do work. What I'm doing wrong?

I'm trying this Google tutorial to debug my Chrome extension:
http://code.google.com/chrome/extensions/tut_debugging.html
I've switched to developer mode on the Extensions page
Installed the Hello World extension as advised by the tutorial
Now I'm right clicking the icon of the Hello World extension to get the menu.
In this menu (and developer mode on) there is supposed to be an item called Inspect popup, but it's just not there. It's not on any other extension either.
I'm using Chrome V21 on Windows 7 x64.
The "Inspect popup" option is back, the answer below is no longer valid for recent Chrome versions (~27?).
That tutorial is slightly outdated. Indeed, in the past, every browser action button had a menu option called "Inspect popup". When a browser action didn't have an associated popup, the option was still visible, but disabled.
Now, you have to open the popup by clicking on it, then right-click inside the displayed popup and choose the "Inspect Element" option in order to launch a dev tools instance for the popup.

IE: When clicking Google +1 a new window opens and then tries to close again

I have recently introduced some Google +1 buttons to my site.
I am calling the button like this:
<g:plusone size="small"
count="false"
callback="plusone_vote"
href='http://www.mysite.com'>
</g:plusone>
The plusone_vote callback is a js function which pushes a tracking event to Google Analytics.
This works for the majority of users. However, a small number are getting an issue. When they click on the +1 link a new IE window appears and then displays the message
"The webpage you're viewing is trying to close this window.
Do you want to close this window?"
If the user clicks "No" they get they Google +1 privacy page ("I'm fine with Google using my +1's and other info around content and ads on non-Google websites"). They can then click the "Share my +1's button" and the window closes. However, they "+1" action never appears to happen. The button does not turn blue and the page does not show up in their profile.
The users were all using IE8 or IE9 on Windows 7 - a combination which works fine for most users. The only thing that appears to be the same is that they all use the same type of laptop - I'm struggling to see the significance of that though.
Any ideas?
The actual issue is with your IE security settings: the page MUST be displayed as a regular 'internet' webpage in order for IE to correctly run the +1 and Facebook Like plugins without this error message.
In order to fix this:
Go into Internet Options in the IE menu
Go to Security Settings. Click on 'local intranet'.
Click on sites. Make sure 'detect local intranet' and all it's sub checkboxes are unchecked. Go into 'advanced' and make sure your webpage's domain is not listed. Close this window.
Now, click on 'Trusted Sites' and then 'Sites'. Make sure to remove your site's domain if it's listed.
All sites which are not 'Intranet' or a 'Trusted Site' default to public internet settings, which is the same as what your users will see (unless you're writing a business application which runs for internal network users, I suppose). This should fix this pop up, and allow +1 and Facebook like plugins to function correctly.

Resources