I mean hiding the menus in the red box, and only show the console.
Yes it is possible, with a devtools extension and the "Allow UI themes" experiment (see the "Official method" part of my answer at Custom.css has stopped working in 32.0.1700.76 m Google Chrome update). With this method, you will be able to define arbitrary stylesheets for the devtools.
/* Contents of Custom.css, use with https://stackoverflow.com/a/21210882 */
.tabbed-pane-header-tabs[aria-label="Panels"] .tabbed-pane-header-tab:not(#tab-console),
.tabbed-pane-header-tabs[aria-label="Panels"] ~ .tabbed-pane-header-tabs-drop-down-container,
.tabbed-pane-header-tabs[aria-label="Panels"] ~ .tabbed-pane-tab-slider {
display: none;
}
To find the above CSS selectors, I inspected the devtools, and made sure that the selectors are specific enough. The first part of each selector is to select the top row (the right part of the selector would also match tabs within the Elements/Sources panel). Instead of display:none, I used background:red (with varying colors) to more easily visualize the impact of the proposed changes.
Related
I'm using mapbox to show a pulsating icon of the closest ping for a given line. Meaning, I have a geojson line that is comprised of multiple ping locations, and what I am currently doing is when I hover the line I find the closest ping and display it.
Now the issue with this is this ping has a popup that shows some specific information about each individual ping. This popup covers the line in some situations which prevents the mousemove event on the map. This makes it so the closest ping isn't showed all of the time because the closest ping to my cursor location would be under the popup. Anyone have an idea of how to fix this? I've tried a few things including adding pointer-events: auto to the popup.
Here is a codepen showing what I'm talking about
You were super close. The correct answer is pointer-events: none;
Updated codepen.
(Edit - John)
For others coming to this I needed to make some popups "readonly" that would pass events through while leaving other popups as is. Steve was correct that setting pointer events to none works, but there isn't a way through CSS to style a parent element (aka the popup-content class). I ended up adding a class to the popups content element when I want to show it. Because Mapbox doesn't support this you have to fidget with it a little bit. The last change/update you make to the popup during a render cycle has to be the class update or Mapbox will remove the class
CSS
.no-pointer-events {
pointer-events: none !important;
}
JS
const popup = marker.getPopup();
popup.setHTML(... html here ...)
if (!popup.isOpen()) {
marker.togglePopup();
}
popup._content && popup._content.classList.add('no-pointer-events');
Firefox addon. I'm porting an existing addon to a restartless one. I have a panel with a lot of UI elements (mostly boxes/description and images) in it, and it is very convenient for me to define the panel elements in an XUL overlay file. I will have lots of bloated js code if I don't.
The panel element (parent) itself is created in code dynamically, and then I use loadOverlay, wait for the 'merged' event and then append the panel element's children from the overlayed document. I also make sure that the elements are cleaned up upon a remove.
However, using overlays will most probably won't pass an AMO review. And some of the reasons I think are :
In most cases overlay elements will cause problems while removing (eg: toolbar buttons remembering their positions etc.)
There are problems with attaching js/css files in an overlay file.
loadOverlay is buggy (496320, 330458)
And here are my inferences :
loadOverlay() API itself is not deprecated - in fact it is 'not frozen and may change later' - which means possibly it will be use-able in future.
The bug that a second overlay load fails, is not applicable in my case, as I don't initialize without an overlay merge.
Using static overlay for preference windows etc. is perfectly acceptable as of now.
The panel in my case behaves a lot like a preference window (which is brought up on demand and cleaned up upon addon removal)
I don't have any js/css attached to the overlay, nor any event listeners for the elements. The overlay is only used to define boxes and description text - nothing more.
So considering these, is it acceptable to use overlays and loadOverlay() for a restartless addon ? If not, is there an alternative ?
About overlays, by checking source code of restartless addon that extend existing addon (like ehh), I see the overlay.xul is auto merged with the existing addon's. So it shouldn't be a problem to use overlay.
Chrome's dev tools become almost unusable if you use a lot of vendor prefixes and have long property values...
Is there a way to tell the dev tools not to display the 'Unknown property values' (e.g the ones with a triangle)?
You probably don't want to fully hide all unrecognized style properties, because that would make it too easy to accidentally overlook a mistake.
You can customize the developer tools via a custom User style (it's not an extension).
First locate your profile directory, then enter the User StyleSheets subdirectory. You'll find a file called Custom.css. Edit this file, and add the following:
EDIT: Custom user styles have been removed from Chromium. To change the appearance of the developer tools, the new chrome.devtools.panels.applyStyleSheet method can be used (sample code).
#-webkit-web-inspector .properties > .not-parsed-ok:not(.child-editing):not(:hover) {
white-space: pre;
}
This CSS selector selects all CSS property-value pairs which are invalid, and force all content on single line, unless you're editing it, or hovering your mouse on it. If you really want to hide styles, use display:none;.
For the reasons given above, I would use something else, such as max-height: 8px; background-color: rgba(0,0,0,0.5); instead of display:none; to hide the properties. Then, you can still see that incorrect properties exist, without being bothered too much.
An alternative style is to indeed hide all properties by default, and only show the hidden properties when the mouse is on the CSS declaration:
#-webkit-web-inspector .properties:not(:hover) > .not-parsed-ok:not(.child-editing) {
display: none;
}
Hiding these unconditionally puts you on a slippery road. Consider yourself adding a property and inadvertently dropping a single character in the property name (background-colr) or value (rb(128,120,120)) (these typos are there for a reason, do not edit!). This property will instantly disappear, and you will have no way to restore it (by editing the CSS model), yet this broken property will remain in the style sheet text forever. That's why we don't hide them.
I'm trying to use a custom video player NPAPI plugin (view FireBreath) inside an tabbed ExtJS application. The plugin lives in one tab, and the others contain presentations of other non-video data.
When switching from tab to tab, the element that contains the plugin is destroyed, and all plugin state is lost. Is there any way to configure an ExtJS tabbed panel so that the html contained in it is not altered when switching to another tab (just hidden)? The alternative is to re-populate the plugin state when returning to the tab, but this would be associated with an unacceptable delay (mostly while waiting for video key frames).
Thanks,
O
I don't know about your ExtJS approach, if you can solve it on that side that would of course be preferrable.
However, if you can't, you can avoid the reinitialization by moving the stream handling to a helper application that is running in the background. The plugin would launch it as needed and receive the stream data from it after registering for it.
The helper would be told when to kill a stream and possibly kill it by itself after some timeout (to avoid session leaks in case of crashing plugins etc.).
I was about to consider a helper application as recommended above, or look into rewriting the plugin to be windowless. Both might be more robust solutions for other JS frameworks.
Fortunately, the solution ended up being simpler than this, at least for ExtJS. By default, ExtJS sets "display: none" on the tabbed view's div whenever it is undisplayed, which calls the plugin destructor. After doing a little more looking through their enormous API, ExtJS has a parameter hideMode as part of the Ext.panel.Panel base class:
'display' : The Component will be hidden using the display: none style.
'visibility' : The Component will be hidden using the visibility: hidden style.
'offsets' : The Component will be hidden by absolutely positioning it out of the visible area of the document. This is useful when a hidden Component must maintain measurable dimensions. Hiding using display results in a Component having zero dimensions.
Defaults to: "display"
Setting the parent Panel that contains the plugin to hideMode: 'offsets' fixed the problem perfectly.
tyrpx is a GWT / Google App Engine app that allows players to do typing races. I am trying to prevent people from selecting text to type (it's a quote). The quote is made of GWT labels. Is there a way to prevent people to select text? of to intercept a click over a panel or label?
See it here http://app.typrx.com then click on 'compete in a race'.
Thanks.
You can make text unselectable via CSS using either/both of these:
user-select: none;
-moz-user-select: none;
http://www.w3.org/TR/2000/WD-css3-userint-20000216#user-select
I've had the same issue and added a solution to the http://www.cobogw.org library. It handles all the browser specific implementations. You can add the library to your project or see how it's implemented and copy it to your own code. The method to use is:
CSS.setSelectable(getElement(), false);