Search code examples
google-chromewindowdraggablegoogle-chrome-appminimize

Can't drag frameless Chrome App after minimizing it

I've created a frameless Chrome App with custom minimize, maximize and close buttons. It works fine both with those buttons and the draggable region, or with the contextual menu options, but once you minimize it you can't move (drag) it any more either from the draggable region or from the menu.

The hover event does not work either but that's not a problem and it seems to be a Chromium bug. See:

I would like to know if there's a solution for that so that I can continue using a frameless window or if the only thing I can do is to change from frame: "none" to frame: "chrome" when creating the window and change just the titlebar colors.

I'm using Windows 8 and I have the same problem both in Chromium 38.0.2066.0 (279108) and Chrome 36.0.1985.143 m.

I've created a test app to see if it still has the same problem or if it was an issue with some other part of the application and the problem's still there. Here's the code used for testing:

manifest.json:

{
    "manifest_version": 2,
    "name": "Test",
    "version": "1.0.0",

    "description": "...",
    "icons": {
        "16": "icon-16.png",
        "32": "icon-32.png",
        /*"48": "icon-48.png",*/
        "64": "icon-64.png",
        "128": "icon-128.png"
    },

    "app": {
        "background": {
          "scripts": ["background.js"],
          "persistent": false
        }
    },

    "offline_enabled": true,

    "permissions": [{"fileSystem": ["write"]} ]
}

background.js:

chrome.app.runtime.onLaunched.addListener(function() {
    chrome.app.window.create('test.html', {
        frame: "none",
        bounds: {
            width: 1000,
            height: 600
        },
        minWidth:800,
        minHeight:400
    });
});

test.html:

<html>
<head>
    <meta charset="utf-8"> 
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="drag-me">DRAG ME!</div>
</body>
</html>

style.css:

html{
    border:1px solid #CCC;
}

#drag-me{
    width:100%;
    height:100%;
    background:#FF3344;
    -webkit-app-region: drag;
}

#drag-me:hover{
    background:#FF4455;
}

EDIT:

I have tried to remove the -webkit-app-region: drag property when minimizing the window and putting it back when restoring or maximizing the window again using events, but it does not solve the problem.

JS:

chrome.app.window.current().onMinimized.addListener(function(e){
    document.getElementById("drag-me").className="";
});

chrome.app.window.current().onRestored.addListener(function(e){
    document.getElementById("drag-me").className="draggable";
});

CSS:

.draggable{
    -webkit-app-region: drag;
}

Any ideas? Thanks!

Solution

  • Please see http://crbug.com/381609. This was a bug on Windows which should be fixed in M38. If you're still seeing it with chrome canary, please make a comment on that bug or open a new bug. If you do open a new bug please let me know at [email protected].